Vue 中 HTML 标签语法高亮颜色失效的解决方案

心靈之曲 2026-01-14 00:00:00 次阅读

vs code 中 vue 文件的 template、script、style 等标签显示为白色（无语法高亮），通常因主题未正确配置 html 标签的 textmate 作用域着色规则所致；可通过手动编辑 `settings.json`，在 `editor.tokencolorcustomizations` 中为当前主题添加 `entity.name.tag.html` 作用域的前景色定义来修复。

在 Vue3 单文件组件（SFC）中，

✅ 正确解决方式是自定义 token 颜色规则，而非依赖第三方插件（如 Volar 或 Vue Language Features 扩展本身不控制标签颜色）。操作步骤如下：

打开 VS Code，按下 Ctrl+Shift+P（Windows/Linux）或 Cmd+Shift+P（macOS）调出命令面板；
输入并选择 Preferences: Open User Settings (JSON)；
在 settings.json 中添加或修改 editor.tokenColorCustomizations 字段，务必匹配你当前启用的主题名称（可通过右下角状态栏查看，例如 ["Dracula"、"Nord"、"Default Dark+"）。

? 示例：若你使用的是内置主题 Default Dark+，可添加如下配置（支持为不同标签设定差异化颜色）：

{
  "editor.tokenColorCustomizations": {
    "[Default Dark+]": {
      "textMateRules": [
        {
          "scope": "entity.name.tag.html",
          "settings": {
            "foreground": "#569CD6"
          }
        },
        {
          "scope": "entity.name.tag.script.html",
          "settings": {
            "foreground": "#C4C4C4"
          }
        },
        {
          "scope": "entity.name.tag.style.html",
          "settings": {
            "foreground": "#CE9178"
          }
        }
      ]
    }
  }
}

? 关键说明：

entity.name.tag.html 是所有顶层 HTML 标签名（含
更精确的作用域如 entity.name.tag.script.html 和 entity.name.tag.style.html 可实现细粒度着色（需主题或语法支持，部分旧版插件可能不识别，建议优先确保通用作用域生效）；
颜色值必须为合法十六进制格式（如 #ff6b6b），不支持 CSS 命名色（如 red）；
修改后无需重启 VS Code，保存 settings.json 即可实时生效；
若仍无效，请检查是否启用了冲突的高亮插件（如某些老旧的 Vue Highlight 扩展），建议禁用并仅保留 Volar（Vue3 推荐）。

? 小技巧：想快速验证作用域名称？安装 Scope Inspector 插件，将光标置于任意标签上，按 Ctrl+Shift+P → Developer: Inspect Editor Tokens and Scopes，即可实时查看当前文本对应的所有作用域层级。

通过以上配置，你的 Vue SFC 标签将清晰可辨——