如何在VS Code中格式化包含Tera模板片段的HTML文件？

方案1：使用Tera官方CLI工具 #

Tera官方提供了CLI工具支持格式化，步骤如下：

• 安装CLI：通过Rust的包管理工具cargo安装，执行命令：

  cargo install tera-cli
  

• 在VS Code中配置自定义格式化任务：
  1. 打开命令面板（Ctrl+Shift+P），选择"Tasks: Open User Tasks"，创建tasks.json文件
  2. 填入以下配置，实现调用tera fmt格式化当前文件：

     {
       "version": "2.0.0",
       "tasks": [
         {
           "label": "Format Tera Template",
           "type": "shell",
           "command": "tera fmt ${file}",
           "args": [],
           "problemMatcher": [],
           "group": {
             "kind": "format",
             "isDefault": true
           },
           "presentation": {
             "echo": false,
             "reveal": "never",
             "focus": false,
             "panel": "shared",
             "showReuseMessage": false,
             "clear": true
           }
         }
       ]
     }
     

  3. 绑定快捷键：打开键盘快捷方式设置，添加如下配置，将Ctrl+Shift+I绑定到该格式化任务：

     {
       "key": "ctrl+shift+i",
       "command": "workbench.action.tasks.runTask",
       "args": "Format Tera Template",
       "when": "editorLangId == 'tera'"
     }
     

方案2：使用djlint通用模板格式化工具 #

djlint支持多种类Jinja2语法的模板（Tera语法与Jinja2高度兼容），步骤如下：

• 安装djlint：通过pip安装，执行命令：

  pip install djlint
  

• 在VS Code中安装djlint官方扩展，然后在settings.json中添加文件关联配置，让Tera文件使用djlint格式化：

  {
    "files.associations": {
      "*.tera": "jinja2",
      "*.tpl": "jinja2"
    },
    "[jinja2]": {
      "editor.defaultFormatter": "monosans.djlint"
    }
  }
  

  之后就能直接用VS Code默认的格式化快捷键（Ctrl+Shift+I）处理Tera文件。

方案3：自定义脚本格式化 #

如果上述工具无法满足需求，可以写一个简单的Shell/Python脚本调用tera-cli，然后在VS Code中配置为默认格式化工具：

1. 创建脚本（比如format_tera.sh）：

   #!/bin/bash
   tera fmt "$1"
   

   赋予执行权限：chmod +x format_tera.sh
2. 在VS Code的settings.json中配置：

   {
     "[tera]": {
       "editor.defaultFormatter": "vscode.externalFormatter",
       "editor.formatOnSave": true
     },
     "externalFormatter.formatters": [
       {
         "language": "tera",
         "command": "/path/to/format_tera.sh",
         "args": ["${file}"]
       }
     ]
   }
   

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