How can I set Beautify for VSCODE to indent Jinja2 and Flask?

Question

Beautify indentation is ignoring Jinja2.

I am using Beautify – HookyQR to help with formatting and indentation.
HTML, Python, CSS … everything works fine. But when I start using Python, Flask with Jinja2 as I save it, it just ignores all the content and I lose all the indentation.

This is what I was expecting:

<div class="form-group">
    {{ form.username.label(class="form-control-label") }}

    {% if form.username.errors %}
        {{ form.username(class="form-control form-control-lg is-invalid") }}
        <div class="invalid-feedback">
            {% for error in form.username.errors %}
            <span>{{ error }}</span>
            {% endfor %}
        </div>
        {% else %}
        {{ form.username(class="form-control form-control-lg") }}
    {% endif %}
</div>

This is the code when I save:

<div class="form-group">
    {{ form.username.label(class="form-control-label") }}

    {% if form.username.errors %}
    {{ form.username(class="form-control form-control-lg is-invalid") }}
    <div class="invalid-feedback">
        {% for error in form.username.errors %}
        <span>{{ error }}</span>
        {% endfor %}
    </div>
    {% else %}
    {{ form.username(class="form-control form-control-lg") }}
    {% endif %}
</div>

I was searching about this, but I just cannot find any tips.

What I use:

I am a PC user and my text editor is VS Code, Win 10.

Extensions uses on VSCODE:

Beautify – Live Server – Material Icon Theme – Material Theme – SQL Server (mssql)

Asked By: Andre Nevares

||

Source

Answer 1

I ran into the same problem. I found this extension though which seems to do the job.

Here’s a link to it
https://marketplace.visualstudio.com/items?itemName=monosans.djlint

or just search "djlint" in the extensions marketplace.

You also need to install the djlint python package with the command:

pip install djlint

You will need to add these lines to your settings.json file.

"[jinja][jinja-html][html]": {
    "editor.defaultFormatter": "monosans.djlint",
},

The first line is telling VS Code that the following settings are just for the file types jinja, jinja-html and html. If you’re using different file types insert yours here.

The next line is just telling VS Code to use DJLint’s formatter for those file types.

Let me know if that helps!

Answered By: Tyler Petrov

Answer 2

The answer by @Tyler Petrov is pretty spot on.

If you want some more context feel free to check out my solution 🙂

Answered By: ffrosch

How can I set Beautify for VSCODE to indent Jinja2 and Flask?

Question:

What I use:

Extensions uses on VSCODE:

Answers: