How can I autocomplete both HTML and Django-HTML simultaneously in Visual Studio Code?

Question

I've installed Django support in Visual Studio Code and associated */templates/*.html with django-html as the extension demands.

However, it can't auto-compete HTML Tags as I've done so .

And if I just associate HTML with itself, then it can't intellisense Django Template code .

How can I autocompleting both ?

Answer 1

I managed to do so by:

• installing the Django extension

• adding the following configuration to my workspace settings.json file:

   "emmet.includeLanguages": { "django-html": "html", }

Answer 2

As namespace_Pt said , I tried it and it works. I will list which extensions are in my Visual Studio Code installation.

1. Django 1.2.0

2. Visual Studio IntelliCode (I tried, and it works without this one)

    "emmet.includeLanguages": { "django-html": "html", }

I added it, at the end of the settings.json file. I find the file from the settings's search bar. Just undo what Visual Studio Code added itself and add the code above. Don't forget to add a comma.

Where you find the.json file in settings

How it looks like after I added it

Answer 3

Follow the steps:

1. Install this as your extension: Django

2. Write the lines of codes in settings.json of your Visual Studio Code:

    "emmet.includeLanguages": { "django-html": "html", }

3. How can I get settings.json ?

   Answer : The menu command File → Preferences → *Settings ( Code → Preferences → Settings on Mac) provides entry to configure user and workspace settings. You are provided with a list of Default Settings . Copy any setting that you want to change to the appropriate settings. JSON file.

Answer 4

Here is essentially the same fix, but using the VS Code UI which may make it easier for some people - especially if your new to this and your settings.json file has not been generated yet.

In VS Code go to File -> Preferences -> Settings

Once there you can switch to the 'Workspace' tab if you want this setting to only be for this project/workspace, or stick with the 'User' tab if you want this on all projects/workspaces.

Open the 'Extensions' item in the list and click on 'Emmet'.

Under 'Include Languages' click the 'Add Item' button. Fill it in with:

Item: django-html

Value: html

and click the 'OK' button.

This will add the setting for you to your settings.json file, or generate you a new settings.json file if you don't have one.

Note: To get the autocomplete/generate to work you might need to type your tag without the brackets eg li (not <li> ), then press enter to get <li></li>

Answer 5

When my vscode's version is 1.62.3,"emmet.includeLanguages": {"django-html": "html",} does not work well,but version 1.52.1 can work well.

Answer 6

Works for me (vs 1.62.3): in file settings.json before:

 "emmet.includeLanguages": {
    "django-html": "html",
}

include:

{
  "files.associations": {
    "**/*.html": "html",
    "**/templates/**/*.html": "django-html",
    "**/templates/**/*": "django-txt",
    "**/requirements{/**,*}.{txt,in}": "pip-requirements"
},

Total file look like:

{
  "files.associations": {
    "**/*.html": "html",
    "**/templates/**/*.html": "django-html",
    "**/templates/**/*": "django-txt",
    "**/requirements{/**,*}.{txt,in}": "pip-requirements"
},

  "files.autoSave": "afterDelay",
  "emmet.includeLanguages": {"django-html": "html"},

}

Answer 7

I tried everything that was listed above but nothing worked for me. Then after much hustle I found the solution. In your VS Code Go to.. --> File --> preferences --> settings --> workspace(if you want this setting to just be this workspace specific or "user" if you want it for all) --> extensions --> emmet--> now click on Edit in settings.json --> now in that file under the curly braces that's already given, write or copy paste this ->

"emmet.triggerExpansionOnTab": true,

"files.associations": {"*html":"html"},

and press ctrl + s to save.

It worked for me.! I hope it will work for you too.!