VSCode 默认不识别 .liquid 文件是因语言模式未匹配或插件未生效；需安装官方 Liquid 插件（如 Shopify Liquid 或 Liquid Language Support），并手动将 .liquid 关联至 liquid 语言 ID，再检查右下角状态栏是否显示 Liquid。
VSCode 默认不识别 .liquid 文件，装了插件也不高亮？大概率是语言模式没对上，或者插件根本没生效——不是插件不行，是你没让它管这个文件。
为什么 Liquid 文件没语法高亮
VSCode 不像 Shopify CLI 那样自动绑定 .liquid 后缀，它只靠文件扩展名 + 语言标识（language ID）触发高亮逻辑。常见失效场景：
- 文件扩展名不是
.liquid（比如你改成了.html或直接没后缀） - 右下角状态栏显示的是
Plain Text或HTML，不是Liquid - 装的是过时或非主流 Liquid 插件（如某些只支持旧版 VS Code 的 fork）
- 工作区设置了
"files.associations"，但规则写错了，把.liquid映射到了其他语言
必须安装的 Liquid 插件与验证方式
在 Open VSX 或 VS Code 扩展市场中，认准两个关键标识：作者是 Shopify 或 vscode-liquid 维护者，且最近半年有更新。推荐安装：
-
Shopify Liquid（官方出品，ID：shopify.theme-kit，含 CLI 集成） - 或
Liquid Language Support（轻量，专注语法高亮和补全，ID：zhuangtongfa.liquid）
装完后不要急着写代码，先验证是否生效：
- 新建一个
test.liquid文件，输入{% if product.title %}{{ product.title }}{% endif %} - 看右下角是否自动显示
Liquid；如果不是，点击它 → 选Configure File Association for '.liquid'→ 选Liquid - 再看关键字
{%、{{、if、product.title是否有颜色区分
手动修复 language ID 和文件关联
有些项目里模板混用（比如 snippet.liquid 被当成 HTML），或你用了自定义后缀（如 .section），就得手动干预：
- 打开
settings.json（Ctrl+, → 右上角“打开设置(JSON)”） - 添加或修改
"files.associations"：
"files.associations": {
"*.liquid": "liquid",
"*.section": "liquid",
"layout/*.html": "liquid"
}
注意："liquid" 是语言 ID，不是插件名；大小写敏感；路径通配符仅支持 *，不支持 **。
预览效果依赖主题与 token 规则
语法高亮 ≠ 语义高亮。即使插件正确加载，如果当前主题没定义 support.class 或 variable.language 这类作用域的颜色，Liquid 变量（如 product.title）仍可能灰着——这不是 bug，是主题缺失。
- 用快捷键
Ctrl+Shift+P→ 输入Developer: Inspect Editor Tokens，把光标停在product.title上，看它被识别成什么 scope - 若显示
variable.language，但主题没配色，就在settings.json加：
"editor.tokenColorCustomizations": {
"textMateRules": [
{
"scope": "variable.language",
"settings": { "foreground": "#268bd2" }
}
]
}
真正卡住人的，往往不是插件装不装，而是语言 ID 没对上、scope 没被主题覆盖、或者你正编辑的文件压根没被识别为 Liquid —— 先盯住右下角那个小标签，比调一堆配置实在得多。
