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

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

I’ve managed to make it work by installing auto close tag extension and adding "django-html" language support to activationOnLanguage setting.

"auto-close-tag.activationOnLanguage": [
    "django-html",
    ...,
]

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.

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