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

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 e.g. li (not <li>), then press enter to get <li></li>

Answer 3

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