How to set correct indentation of html jinja blocks in Visual Studio Code?

Question

This is what the code currently looks like:

{% extends "base.html" %}

{% block content %}
{% with messages = get_flashed_messages() %}
{% if messages %}
{% for msg in messages %}
<p>{{ msg }}</p>
{% endfor %}
{% endif %}
{% endwith %}

<h1>{{ title }}</h1>
{% endblock content %}

And this is how I want it to look:

{% extends "base.html" %}

{% block content %}
{% with messages = get_flashed_messages() %}
    {% if messages %}
        {% for msg in messages %}
            <p>{{ msg }}</p>
        {% endfor %}
    {% endif %}
{% endwith %}

<h1>{{ title }}</h1>
{% endblock content %}

I tried changing VSC settings and installing various extensions, but autoformatting code that works perfectly in python code removes indentation in jinja blocks.

Answer 1

The djlint-vscode extension fixed this for me. You may need to explicitly switch the syntax mode to "Jinja2" instead of "Jinja2 HTML." That should do it. You can manually invoke the indent command with the (default) keyboard shortcut CTRL+SHIFT+I. Also you need to install djlint for whatever Python interpreter you're using.