VS Code无法识别Liquid代码段，报'at-rule or selector expected'错误

在编辑包含Liquid语法的HTML文件时，VS Code抛出'at-rule or selector expected'错误，且Liquid代码无法正常高亮显示，即使恢复原始代码、安装Liquid扩展也无法解决。以下是针对性的解决方案：

1. 修正文件语言关联 #

打开目标文件后，点击VS Code右下角的语言模式标识（比如当前显示「HTML」），选择「Configure File Association for '.html'...」，然后选择「Liquid」或「Jekyll」，让编辑器将文件识别为Liquid语法格式。

2. 更换适配的Liquid扩展 #

卸载冲突或功能不足的Liquid扩展，推荐安装Liquid（作者sissel）或Jekyll Syntax Support这类针对Jekyll场景优化的扩展，安装完成后重启VS Code确保扩展激活。

3. 配置VS Code设置 #

打开设置面板（快捷键Ctrl+,），搜索并编辑settings.json，添加以下规则：

{
  "files.associations": {
    "*.html": "liquid"
  },
  "emmet.includeLanguages": {
    "liquid": "html"
  }
}

该配置强制将HTML文件关联到Liquid语法，同时让Emmet支持Liquid文件的HTML补全。

4. 清除VS Code缓存 #

关闭VS Code后，删除以下缓存目录的内容：

• Windows：%APPDATA%\Code\Cache、%APPDATA%\Code\CachedData
• macOS：~/Library/Application Support/Code/Cache、~/Library/Application Support/Code/CachedData
• Linux：~/.config/Code/Cache、~/.config/Code/CachedData
  重新启动VS Code后，缓存会自动重建，可能修复语法识别异常。

5. 确认项目根目录配置 #

确保项目根目录存在_config.yml文件（Jekyll项目必需），扩展会通过该文件识别项目类型。若没有，创建基础配置文件：

title: 你的站点标题
url: "https://你的站点地址.com"

附问题中的代码示例 #

---
layout: compress
---
<!DOCTYPE html>
<html lang="en">
<head>
    {% if site.analytics-google %}
        {% include analytics-google.html %}
    {% endif %}

    <meta charset="utf-8">
    <meta name=viewport content="width=device-width, initial-scale=1">
    <meta name=author content="{{ site.title }}">
    {% seo %}
    {% include favicon.html %}
    <link rel="alternate" type="application/rss+xml" title="{{ site.title }}" href="{{ site.url }}{{ "/feed.xml" }}" />
    <style>
        {% if site.dark-theme == "auto" %}
            {% capture scss_sheet %}
                {% include style.scss %}
                @media (prefers-color-scheme: dark) {
                    {% include style-dark.scss %}
                }
            {% endcapture %}
        {% elsif site.dark-theme %}
            {% capture scss_sheet %}{% include style-dark.scss %}{% endcapture %}
        {% else %}
            {% capture scss_sheet %}{% include style.scss %}{% endcapture %}
        {% endif %}
        {{ scss_sheet | scssify }}
    </style>
</head>
<body>
    <div class="wrapper-{% if site.width == "normal" %}normal{% elsif site.width == "large" %}large{% endif %}">
        {% if page.layout == "post" %}
            <div class="post">
        {% else %}
            {% if showHeader != true %}
                <div class="page {{ page.title | downcase }}">
            {% else %}
                <div class="{{ page.title | downcase }}">
            {% endif %}
        {% endif %}
            {{ content }}
            </div>
        </div>
    </div>
</body>
</html>

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