VSCode中Shopify prettier-plugin-liquid无法格式化Jekyll内Liquid模板

环境与配置 #

• 系统：Windows 11 + WSL2 Ubuntu
• 使用插件：Shopify的prettier-liquid插件、theme-check-vscode插件
• VSCode配置文件（路径：home > cyberquarks > .vscode-server > data > Machine > settings.json）内容：

{
  "shopifyLiquid.formatterDevPreview": true,
  "prettier.useTabs": false,
  "prettier.tabWidth": 2,
  "prettier.plugins": ["prettier-plugin-liquid"]
}

问题现象 #

执行Format Document时，HTML部分能正常格式化，但Liquid模板代码未按预期格式化：

• 源代码：

{% assign unique_locations = "" | split: "" %}

    {% for product in site.products %}
      {% if product.category == "Dairy" %}
        {% for location in product.locations %}
          {% unless unique_locations contains location %}
            {% assign unique_locations = unique_locations | push: location %}
          {% endunless %}
        {% endfor %}
      {% endif %}
    {% endfor %}

    {% for location in unique_locations %}
    <option value="{{ location }}">{{ location }}</option>
    {% endfor %}

• 实际格式化输出：

{% assign unique_locations = "" | split: "" %} {% for product in
site.products %} {% if product.category == "Dairy" %} {% for location
in product.locations %} {% unless unique_locations contains location %} {%
assign unique_locations = unique_locations | push: location %} {% endunless
%} {% endfor %} {% endif %} {% endfor %} {% for location in unique_locations
%}

• 预期格式化输出：

{% assign unique_locations = '' | split: '' %}

{% for product in site.products %}
  {% if product.category == 'Dairy' %}
    {% for location in product.locations %}
      {% unless unique_locations contains location %}
        {% assign unique_locations = unique_locations | push: location %}
      {% endunless %}
    {% endfor %}
  {% endif %}
{% endfor %}

{% for location in unique_locations %}
  <option value="{{ location }}">{{ location }}</option>
{% endfor %}

更新说明 #

将文件从products.html重命名为products.liquid后，Liquid代码能正常格式化，但该文件是Jekyll布局文件，无法重命名。

核心疑问 #

请问配置中缺少什么，才能让.html后缀的Jekyll布局文件里的Liquid代码正常格式化？

解决方法 #

问题根源是VSCode未将.html文件识别为Liquid格式，导致prettier插件未启用对应的Liquid格式化规则，可通过以下步骤修复：

1. 添加文件关联，将.html映射为Liquid语言模式
   打开VSCode用户设置（快捷键Ctrl+,），搜索files.associations，添加配置：

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

若只想针对当前Jekyll项目生效，可在项目根目录的.vscode/settings.json中添加该配置，避免影响全局其他HTML文件。

2. 明确prettier对HTML/Liquid文件的格式化规则
   在项目根目录创建.prettierrc文件，指定解析器与插件：

{
  "tabWidth": 2,
  "useTabs": false,
  "plugins": ["prettier-plugin-liquid"],
  "overrides": [
    {
      "files": ["*.html", "*.liquid"],
      "options": {
        "parser": "liquid"
      }
    }
  ]
}

3. 确认默认格式化工具
   打开目标.html文件，点击右下角语言模式（原显示HTML），选择Liquid；按Ctrl+Shift+P执行Format Document With，选择Prettier - Code formatter作为默认工具。

完成以上配置后，.html后缀的Jekyll布局文件中的Liquid代码即可按预期格式化。

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