Visual Studio Code and Jinja templates

I also had a similar problem and this is what I did to fix it :

1. Install the Better Jinja plugin. (https://marketplace.visualstudio.com/items?itemName=samuelcolvin.jinjahtml)

   • This will allow you to change the file association from plain “HTML” to “jinja-html” (it’s on the lower right part of my vscode screen), and this will stop jinja codes from sticking to one another on save.
   • At this stage your intellisense will not work anymore, causing a lot of annoyance, so :

2. Go to preferences >> settings >> type “file associations” in the search settings bar, click on “edit settings.json”

3. Finally add the following line to the settings.json file :

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

4. Restart your vscode. Every time you open an html file with jinja templating codes, as long as jinja-html is selected (not HTML!), prettify won’t mess it up, and your intellisense should be working just fine. 🙂

The answer from Mobi J helped me but I think it was icomplete.
What did solve the same issue I was having was to add those two lines at the very ending of settings.json (before the last closing bracket):

    "emmet.includeLanguages": { "jinja-html": "html" },
    "editor.defaultFormatter": "vscode.emmet"

I actually did so by navigating Settings (Ctrl + , on Linux), but the result is just that addition to the settings.json file.

After that change, both intellisense and emmet are working, in .html and in .jinja files.

Ok, so I tried the solutions from Ataua and Moby J, but wasn’t able to get them to work. Maybe because I’m using Prettier globally.

Here’s what worked for me:

There’s a project called Unibeautify that seems kind of like a "one ring to rule them all" for tying together personalized settings across different formatters and filetypes.

It has a VS Code extension, VSCode-Unibeautify.

After installing the extension, you need to create a config file and tell VS Code where to find it. You can create and customize your own config if you want to use it for multiple languages, but here’s what worked for me for Jinja:

# unibeautifyrc.yaml
HTML:
  beautifiers:
    - JS-Beautify
    - Pretty Diff

and then, in your vscode settings:

// settings.json
  "unibeautify.defaultConfig": "/PATH/TO/unibeautifyrc.yaml",
  "unibeautify.enabled": true,
  "[jinja-html]": {
    "editor.defaultFormatter": "Glavin001.unibeautify-vscode",
    "editor.formatOnSave": true
  },

What I’ve done also, is to associate html files with the Jinja filetype in my project’s settings.json. This helps if you just want to limit the use of Unibeautify to just Jinja files on a project by project basis. I think you could also make the below *.html more specific to your templates directory if you prefer.

// MYPROJECT/.vscode/settings.json
{
  "files.associations": {
    "*.html": "jinja-html"
  }
}

This solution is powered by JS-Beautify which seems to work well with Jinja and powers Atoms atom-beautify extension, also by the same author of Unibeautify, Glavin001, a beautiful individual.

add this like the screenshot below

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

[screenshot]

I have tried everything but at last, it worked for me.

1. Install the Better Jinja plugin.

2. Install the django plugin

3. Then go to settings by pressing ctrl+,, and search for file associations and goto settings.json and edit the following:

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

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