HTML autocomplete is not working along with Django extension in VSCode

Question

I am currently using the latest version of VSCode and Django. Whenever I enable the Django extension by Baptiste Darthenay, HTML autocomplete stops working. If I disable the Django extension and reload VSCode, it will start to work again. What should I do to make the HTML autocomplete work along with the Django extension?

Answer 1

Try adding this to your settings.json file:

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

Additionally you can also add this one and tweak it to your preferences:

"[django-html]": {
    "editor.defaultFormatter": "HookyQR.beautify",
    "editor.quickSuggestions": {
        "comments": true,
        "other": true,
        "strings": true
    },
    "editor.tabSize": 4,
    "editor.wordWrap": "on"
}

Answer 2

Django template language syntax highlighting in html !

No need to switch to django-html !

Use this extension : Django Support (zero config)

Answer 3

For those who can't find settings.json, you can just go to Settings>Extensions>Emmet>Include Languages. Then, click on Add Item and fill in:

key: django-html
value: html

Answer 4

Try the below solution which worked for me:

1. With your VSCode open to your Django project.
2. Open an HTML file (e.g within your templates folder)
3. At the bottom right of the VSCode screen you will see 'Django HTML'
4. Click on that, which then takes you to a language selection screen
5. Type HTML and click
6. You will notice the prompt at the bottom right will now change to 'HTML'
7. You should now have autocomplete for HTML working well

Answer 5

Only by adding "emmet.includeLanguages": {"django-html": "html"} in settings.json fixed the problem you mentioned.

Before:

{
"terminal.integrated.rendererType": "dom",
"liveServer.settings.donotVerifyTags": true,
"liveServer.settings.donotShowInfoMsg": true,
"javascript.updateImportsOnFileMove.enabled": "always",
"workbench.editorAssociations": {
    "*.ipynb": "jupyter.notebook.ipynb"
},
"C_Cpp.updateChannel": "Insiders",
"grunt.autoDetect": "on",
"files.associations": {
    "*.html": "django-html"
},

"[django-html]": {
    "editor.quickSuggestions": {
        "other": true,
        "comments": true,
        "strings": true
    }
}

}

After:

{
"terminal.integrated.rendererType": "dom",
"liveServer.settings.donotVerifyTags": true,
"liveServer.settings.donotShowInfoMsg": true,
"javascript.updateImportsOnFileMove.enabled": "always",
"workbench.editorAssociations": {
    "*.ipynb": "jupyter.notebook.ipynb"
},
"C_Cpp.updateChannel": "Insiders",
"grunt.autoDetect": "on",
"files.associations": {
    "*.html": "django-html"
},

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

"[django-html]": {
    "editor.quickSuggestions": {
        "other": true,
        "comments": true,
        "strings": true
    }
}

}

You can see the discussion here: https://github.com/vscode-django/vscode-django/issues/16