HTML autocomplete is not working along with Django extension in VSCode

user_10696220 0
Viewed 3654

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?

django-extensions visual-studio-code django html
4 Answers

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

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
user_125359070

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

user_154595770

Django template language syntax highlighting in html !

No need to switch to django-html !

Use this extension : Django Support (zero config)

user_139310610
Related