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?

Do you mean autocomplete as in Emmet? (ex. typing `.my-class` creating a div with that class?). — Guillermo Brachetta, Feb 12 '21 at 15:11
What I am talking about is the most basic autocomplete i.e. type `h1` and it will suggest an autocomplete for h1 header. — nishorgo, Feb 12 '21 at 15:13

score 19 · Accepted Answer · answered Feb 12 '21 at 15:15

19

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

answered Feb 12 '21 at 15:15

Guillermo Brachetta

3,857
3
18
36

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. :) – Cewu00 Jun 26 '22 at 02:29

AlexGithui · Answer 2 · 2021-06-08T12:53:41.083

12

Try the below solution which worked for me:

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

edited Jun 08 '21 at 12:53

answered Jun 08 '21 at 12:45

AlexGithui

121
1
3

This worked for me, thank you – David NoHorizon Jul 04 '23 at 20:53
work for me as well ! – Renzo Zagni Aug 27 '23 at 23:28

score 5 · Answer 3 · answered Nov 27 '22 at 12:53

5

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

answered Nov 27 '22 at 12:53

Zharfan Zahisham

143
1
9

score 2 · Answer 4 · answered Apr 03 '22 at 15:03

2

Django template language syntax highlighting in html !

No need to switch to django-html !

Use this extension : Django Support (zero config)

answered Apr 03 '22 at 15:03

Al Mahdi

635
1
9
16

score 1 · Answer 5 · edited Jun 16 '21 at 11:34

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

Please maintain `indentation` in your answer, i am reviewer. — Sunderam Dubey, Apr 03 '22 at 15:09

HTML autocomplete is not working along with Django extension in VSCode

5 Answers5