Visual Studio Code and Jinja templates

Question

I use VS code since a while with some Extensions. All is perfect expect when I use Flask.

Prettier put all flask code glued together, and intellisence is not working with flask code:

{% extends "layout.html" %} {% block style %} body {color: red; } {% endblock %}
{% block body %} you must provide a name {% endblock %}

What can I do to make it work with flask (trie flask-snippets)?

I run it in virtuel env (run before lauch vscode).

Thanks in advance,

Answer 1

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. :)

Answer 2

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.