如何在Visual Studio Code中设置HTML Jinja块的正确缩进？

数据老陈

2026-8-8

解决Jinja2模板代码自动缩进问题

当前未正确缩进的代码

{% 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 %}

期望的正确缩进格式

{% 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 %}

解决方案

Python格式化工具（如black、autopep8）不识别Jinja2模板语法，会错误移除模板块的缩进，需使用专门针对Jinja2的格式化方案：

安装VS Code专用扩展
在扩展商店搜索并安装Jinja2 Formatter，它专为Jinja模板处理缩进和格式问题。安装后打开模板文件（.html/.jinja后缀），右键选择「格式化文档」即可自动生成正确缩进。
配置默认格式化工具避免冲突
打开VS Code设置（快捷键Ctrl+,），搜索「Editor: Default Formatter」，为.html或.jinja文件指定Jinja2 Formatter为默认工具，防止Python格式化工具干扰。也可直接在settings.json中添加：
```
"[html]": {
    "editor.defaultFormatter": "samuelcolvin.jinjahtml"
}
```
使用Prettier配合Jinja插件
安装Prettier扩展及prettier-plugin-jinja-template插件，配置Prettier识别Jinja语法，同样能实现模板的正确缩进。