HTML files recognized as Django Template in VS Code

Question

I'm new to VS Code, coming from ST3 and TextMate before that. A bit flummoxed why is HTML not autodetected nor is it offered as a choice of language after clicking on the lower-right language indicator?

I've tried explicitly adding "files.associations": {"*.html": "html"} to the User Settings to no effect.

Running VSCode v1.15.1 on macOS v10.12.6.

Answer 1

Include the following line of setting emmet.includeLanguages": {"django-html": "html"} in VSCode's settings.json:

{
"python.jediEnabled": false,
"files.autoSave": "afterDelay",
"editor.suggestSelection": "first",
"vsintellicode.modify.editor.suggestSelection": 
"automaticallyOverrodeDefaultValue",
"editor.minimap.enabled": true,
"workbench.colorTheme": "Monokai",
"editor.largeFileOptimizations": false,
"html.format.indentInnerHtml": true,
"html.format.indentHandlebars": true,
"emmet.includeLanguages": {"django-html": "html"},
"[django-html]": {

},
"files.associations": {
    "*.html": "html"
}

}

It does the fix for me on version 1.33.1

Answer 2

Solved! I began eliminating extensions and found that Django Template 1.2.0 ( bibhasdn.django-html ) is to blame. As soon as I disabled it, the HTML option returned to the Language Associations menu. Hat tip to @ifconfig for confirming I should expect it to be present.

Answer 3

1) Click on "select language mode" from bottom right toolbar.

2) Select "Configure file association for .html" from the dropdown.

3) Select html from the dropdown.

This will remove html file being marked as Django-html every time you create a html document.

Answer 4

These settings worked for me in vscode settings.json

"files.associations": {
    "**/templates/*.html": "django-html",
    "**/templates/*": "django-txt",
    "**/requirements{/**,*}.{txt,in}": "pip-requirements",
    "*.html": "html"
  },
  "emmet.includeLanguages": { "django-html": "html" }

Answer 5

Python Extension Pack that included DJANGO packages made VSCOde see all html as Django Template and set comments as {%comment%} instead of <!-- -->

Removing it solved the issue.

Answer 6

I think the easiest way is to check this. At the right bottom corner of vs code, you can see a footer as below image.

So, click the Django HTML there. Then a popup with input can be noticed. Enter HTML as the input and select HTML . Problem solved.

Answer 7

Just Add this to your Settings.json:

"files.associations": {
    "**/templates/*.html": "django-html",
    "**/templates/*": "django-txt",
    "**/requirements{/**,*}.{txt,in}": "pip-requirements",
    "*.html": "html"
  },
  "emmet.includeLanguages": { "django-html": "html" }

Open the Languages(identifier) menu ( press right Ctl + K then release them and press `M) and there should be HTML.

Finally choose HTML and restart VSCode.

Answer 8

To map an extension to a language in the settings search for association in the results there should be Files:Associations :

where you can add new key/value pairs. where key is the extension (Filename Expansion) and value is the language identifier .

Answer 9

Generally.html and.txt files are recognized as Django Template files by Text-editors. This can be solved by just adding the given code in VSCode's Setting.json file:

"files.associations": {
        "**/templates/*.html": "django-html",
        "**/templates/*": "django-txt",
        "**/requirements{/**,*}.{txt,in}": "pip-requirements",
        "*.html": "html"
      },

Answer 10

Go to settings.json, and after

"files.associations": {
    "**/templates/*.html": "django-html",
    "**/templates/*": "django-txt",
    "**/requirements{/**,*}.{txt,in}": "pip-requirements",
    "*.html": "html"
},

put this

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

like this:

{
"workbench.colorTheme": "Default Dark+",
"editor.fontSize": 15,
"window.zoomLevel": -1,
"files.autoSave": "afterDelay",
"files.associations": {
    "**/templates/*.html": "django-html",
    "**/templates/*": "django-txt",
    "**/requirements{/**,*}.{txt,in}": "pip-requirements",
    "*.html": "html"
},
"emmet.includeLanguages": {
    "django-html": "html"
},
"[django-html]": {



    "editor.quickSuggestions": {
        "other": true,
        "comments": true,
        "strings": true
    }
}

}

Answer 11

Open your VSCode JSON settings and add these lines

"files.associations": {
    "*.html": "html"
}