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?

Xavier

Do you mean autocomplete as in Emmet? (ex. typing .my-class creating a div with that class?). – Fife

What I am talking about is the most basic autocomplete i.e. type h1 and it will suggest an autocomplete for h1 header. – Xavier

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

Fife

Just imputing the top code enables the autocomplete but only if you don't begin your tags with "<". Just typing "p" or "div" and clicking tab will auto-complete. Also "django-html": "html" seems like it is enough. Could you tell me what the second line does as I didn't notice anything different with Jinjas auto-completion. :) – Latinity

Answer 2

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

Varini

work for me as well ! – Terchie

This is the step works for me. But it's manual. Anyother way to configure both? – Parsimony

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

Aarau

Answer 4

Django template language syntax highlighting in html !

No need to switch to django-html !

Use this extension : Django Support (zero config)

Thorma

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

Clodhopping

Please maintain indentation in your answer, i am reviewer. – Carat