CODEWITHSUNDEEP
pythonvisual-studio-codejinja2
saquiel
saquiel

Reputation: 621

Visual Studio Code and Jinja templates

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,

Upvotes: 39

Views: 66617

Answers (8)

James
James

Reputation: 1

This is what worked for me and it's simple.

Installation

  1. Install djLint in the terminal by running this command python -m pip install -U djlint

  2. Install djLint VS Code extension from Visual Studio Marketplace. Click on VS Code extension tab and search for djLint, and install it.

  3. Open VS Code settings >> Text Editor >> Default Formatter, then select djLint as your default formatter. This worked fine for me.

Upvotes: 0

ffrosch
ffrosch

Reputation: 1423

Batteries included solution

Here is a solution that gives you code highlighting, tag-autocompletion and customizable auto-formatting:

  1. Install Better Jinja or Django (better syntax highlighting within double quotes) plugin
  2. Install djLint plugin
  3. Press CTRL + Shift + P and type open settings json + Enter

This is my config and it works great for my jinja templates. djLint has more filetype-specific options to offer (see extension-description in VS Code).

// settings.json

// My jinja-templates use the extension `.jinja2`. To make it work with the "Django" plugin I add this to my settings:
"files.associations": {
    "*.jinja2": "django-html"
},
// Add emmet tag autocomplete for jinja and django templates
"emmet.includeLanguages": {
    "jinja2": "html",
    "jinja-html": "html",
    "django-html": "html",
},
// Set djLint as formatter for html, jinja, jinja-html, django-html
"[html][jinja][jinja-html][django-html]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "monosans.djlint",
    "editor.detectIndentation": false,
    "editor.linkedEditing": true,
    "editor.tabSize": 2
  },
// Add specific formatting rules as needed, e.g.:
"djlint.enableLinting": true,
"djlint.closeVoidTags": true,
"djlint.formatAttributeTemplateTags": true,
"djlint.formatCss": true,
"djlint.formatJs": true,
"djlint.lineBreakAfterMultilineTag": false,
"djlint.maxBlankLines": 2,
"djlint.maxLineLength": 100,
"djlint.maxAttributeLength": 100

Upvotes: 21

Cristian Cassetta
Cristian Cassetta

Reputation: 41

In my case, since I'm using prettier as a global formatter, I had to add this to the settings.json :

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

You can add this in any part of the settings, just make sure you are within the outermost brackets and maybe paste it together with other similar settings.

Upvotes: 1

Moby J
Moby J

Reputation: 851

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 :

  1. Go to preferences >> settings >> type "file associations" in the search settings bar, click on "edit settings.json"

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

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

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

If you use the Material Icon Theme extension, the file icon breaks after associating .html files with jinja-html.

To solve that, add this to your settings.json

    "material-icon-theme.languages.associations": {
        "jinja-html": "html"
    },
    "files.associations": {
    "*.html": "jinja-html"
   },
    "emmet.includeLanguages": {
        "jinja-html": "html"
    },

Upvotes: 75

Saichand
Saichand

Reputation: 141

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"},

Upvotes: 14

Eldar Yaacobi
Eldar Yaacobi

Reputation: 191

add this like the screenshot below

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

[screenshot]

Upvotes: 19

Scott Guthart
Scott Guthart

Reputation: 457

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.

Upvotes: 12

Atauã Doederlein
Atauã Doederlein

Reputation: 101

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.

Upvotes: 8

Related Questions