Associate HTML as Jinja Files in VSCode

Visual Studio Code can give you syntax highlighting for your Jinja templates even though Jinja files are usually named with a *.html extension in Flask projects.

I assume you already have the Python Extension for VSCode installed.

Open your Preferences > Settings from the dropdown menu or your settings.json file inside your current project's .vscode directory and add:

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

I wouldn't put this in the user settings.json file since that will globally associate all *.html files with jinja-html.

Comments

[Korhan Eker]

Install djlint extension, and then add the following configuration into your settings.json file:

{
"terminal.integrated.defaultProfile.windows": "Git Bash",
"emmet.includeLanguages": {
"jinja2": "html",
"jinja-html": "html",
"django-html": "html",
},
"[jinja]": {
"editor.defaultFormatter": "monosans.djlint",
"editor.detectIndentation": false,
"editor.tabSize": 2,
"editor.formatOnSave": true,
},
"[jinja-html]": {
"editor.defaultFormatter": "monosans.djlint",
"editor.detectIndentation": false,
"editor.tabSize": 2,
"editor.formatOnSave": true,
},
"[django-html]": {
"editor.defaultFormatter": "monosans.djlint",
"editor.detectIndentation": false,
"editor.tabSize": 2,
"editor.formatOnPaste": true,
},
"workbench.iconTheme": "vscode-icons",
}

[Edidiong Esu]

How do I keep both Jinja and html formatting? When I do this, I lose the html formatting.