DEV Community

Warren Wong
Warren Wong

Posted on • Originally published at warrenwong.org on

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"
  }
}
Enter fullscreen mode Exit fullscreen mode

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

Top comments (2)

Collapse
 
korhan_eker profile image
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",
}

Collapse
 
edidiongesu profile image
Edidiong Esu

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