刚好我之前也遇到过这个两难的问题——选HTML模式能格式化但没自动补全，选liquid.html模式有补全却没法格式化，折腾了一阵终于找到几个靠谱的解决办法，分享给你：

方法一：专用Liquid插件+指定HTML格式化器 #

这是最直接的方案，利用官方插件提供补全，复用HTML格式化能力：

• 先安装Shopify Liquid Template Support插件，它能给liquid.html语言模式提供完整的Shopify标签自动补全、语法高亮功能。
• 打开VS Code设置（快捷键Ctrl+,或Cmd+,），点击右上角的打开设置(JSON)按钮，添加以下配置：

  "[liquid.html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
  }
  

  这段配置的作用是：当当前文件语言为liquid.html时，强制使用VS Code自带的HTML格式化工具来处理代码，完美解决格式化失效的问题。

方法二：统一文件关联+全局格式化配置 #

如果你希望所有.liquid文件默认就进入liquid.html模式，不用手动切换，可以加上文件关联配置：

• 在settings.json里继续添加：

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

  这样每次打开.liquid文件，VS Code都会自动识别为liquid.html语言，自动补全和格式化功能就都能同时生效了。

方法三：用Prettier专门格式化Liquid代码 #

如果觉得HTML格式化器对Liquid标签的支持不够友好，可以用Prettier的Liquid专用插件：

• 安装Prettier和Prettier - Liquid两个插件。
• 在settings.json中设置liquid.html的默认格式化器为Prettier Liquid插件：

  "[liquid.html]": {
    "editor.defaultFormatter": "sissel.shopify-liquid-prettier"
  }
  

• 还可以在项目根目录创建.prettierrc文件，自定义Liquid格式化规则，比如：

  {
    "plugins": ["prettier-plugin-liquid"],
    "liquidSingleQuote": true,
    "liquidPreserveLineBreaks": true
  }
  

  这个方案的优势是格式化规则更贴合Liquid语法，不会出现标签被误拆分的情况。

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