VSCode中Prettier对Flask/Jinja2模板抛出意外闭合标签错误

报错原因 #

• Prettier默认的HTML解析器无法正确识别Jinja2模板语法，尤其是你代码里onclick属性内的双引号嵌套：{{url_for("delete_item",id=item.id)}}里的双引号和外层onclick的双引号冲突，导致解析器误判标签结构，认为<button>标签提前闭合，从而抛出错误。
• 另外，Prettier默认严格按照HTML5规范检查标签，但Jinja2的动态语法会干扰它的解析逻辑。

Prettier适配Jinja2的配置方法 #

1. 安装Jinja2专用插件 #

Prettier官方有专门处理Jinja2模板的插件，先在项目根目录执行安装命令：

npm install --save-dev @prettier/plugin-jinja2

2. 配置Prettier解析规则 #

在项目根目录创建或修改.prettierrc.json文件，添加以下配置，让Prettier用jinja2解析器处理模板文件：

{
  "plugins": ["@prettier/plugin-jinja2"],
  "overrides": [
    {
      "files": ["*.html", "*.jinja", "*.jinja2"],
      "options": {
        "parser": "jinja2"
      }
    }
  ]
}

3. 调整VSCode关联设置（可选） #

让VSCode把Jinja2文件也交给Prettier格式化，打开.vscode/settings.json添加：

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

4. 临时应急修复（无需插件） #

直接调整引号嵌套方式，避免解析冲突：

<button
  class="btn btn-sm btn-primary"
  onclick='showConfirmationModal("{{url_for('delete_item',id=item.id)}}","Confirm Action","Are you sure?")'
>
Delete
</button>

内容的提问来源于stack exchange，提问作者hamlet2k