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

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",
      }
  

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>

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

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.

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.

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"},

}

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.!