如何在VSCode中启用.tpl文件的代码片段与HTML代码格式化（PrestaShop场景）

一、让VSCode把.tpl识别为HTML文件 #

.tpl文件默认不会被VSCode当作HTML处理，这是导致代码片段和格式化失效的核心原因，先解决关联问题：

• 打开任意.tpl文件，点击VSCode右下角的语言模式（比如默认显示「Plain Text」）
• 在弹出菜单里选择「Configure File Association for '.tpl'...」，然后选「HTML」
• 也可以直接修改配置文件：打开设置（快捷键Ctrl+,），搜索files.associations，添加以下配置：

  "files.associations": {
      "*.tpl": "html"
  }
  

完成后，VSCode会把所有.tpl文件当作HTML处理，自动启用HTML原生的代码片段功能。

二、开启并自定义.tpl代码片段 #

关联文件类型后，VSCode自带的HTML代码片段（比如输入html:5生成HTML5骨架）会直接生效。如果需要PrestaShop专属的Smarty语法片段：

• 打开命令面板（Ctrl+Shift+P），输入「Configure User Snippets」，选择html.json（因为.tpl已关联到HTML）
• 在打开的JSON文件中添加自定义片段，比如常用的Smarty变量输出片段：

  {
      "PrestaShop Smarty 变量输出": {
          "prefix": "psvar",
          "body": [
              "{$${1:variable_name}}"
          ],
          "description": "插入PrestaShop Smarty变量格式"
      }
  }
  

保存后，在.tpl文件里输入psvar就能快速触发这个片段。

三、格式化.tpl文件内的HTML代码 #

方式1：用VSCode自带格式化工具 #

关联文件类型后，直接按快捷键Shift+Alt+F就能格式化HTML部分。如果对格式化效果不满意，可以调整设置：

• 打开设置（Ctrl+,），搜索「HTML Format」，根据需求修改选项，比如把「HTML: Format Wrap Attributes」设为force-aligned让属性对齐，或者auto自动换行。

方式2：用第三方插件（如Prettier） #

如果自带工具不够用，安装Prettier插件：

• 在扩展商店搜索「Prettier - Code formatter」并安装
• 修改settings.json，指定Prettier作为HTML（即.tpl）的默认格式化工具：

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

之后同样按Shift+Alt+F就能用Prettier格式化.tpl里的HTML代码。

注意事项 #

.tpl文件里可能混合Smarty语法（比如{if}、{foreach}），部分格式化工具可能对这些标签处理不够完美。遇到这种情况可以：

• 调整Prettier的HTML解析配置，或者安装专门的「Smarty Template」插件辅助识别语法，不过多数情况下，把.tpl关联为HTML后，格式化HTML部分不会破坏Smarty标签。

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