Vue3 文件中 HTML 标签无语法高亮颜色的解决方案

vs code 中 vue 文件的 template/script/style 标签显示为白色，是因默认主题未对 html 标签作用域（如 `entity.name.tag.html`）配置前景色；需通过 `editor.tokencolorcustomizations` 手动为当前主题定制标签颜色。

在 VS Code 中，Vue 单文件组件（.vue）的

✅ 解决方法：自定义 Token 颜色规则

1. 打开命令面板（Ctrl+Shift+P / Cmd+Shift+P）→ 输入并选择 Preferences: Open User Settings (JSON)；
2. 在 settings.json 中添加或修改 "editor.tokenColorCustomizations" 字段，确保其结构匹配当前启用的主题名称；
3. 为 entity.name.tag.html 作用域指定 foreground 颜色值（支持十六进制、RGB、named color）。

? 关键注意点：

• 主题名必须与 VS Code 当前激活主题完全一致（区分大小写），可通过 Settings > Appearance > Theme 查看；
• 同一作用域下多个规则会按顺序覆盖，后定义的优先级更高；
• 若需差异化着色（如 <script> 用橙色、<template> 用紫色），需借助更精确的作用域（见下方进阶示例）； </script>
• 修改后无需重启，保存 settings.json 即实时生效。

? 推荐配置示例（适配主流主题）：

Logome

AI驱动的Logo生成工具

下载

立即学习“前端免费学习笔记（深入）”；

{
  "editor.tokenColorCustomizations": {
    "[One Dark Pro]": {
      "textMateRules": [
        {
          "scope": "entity.name.tag.html",
          "settings": {
            "foreground": "#C792EA" // 紫罗兰色，清晰易读
          }
        }
      ]
    },
    "[Monokai]": {
      "textMateRules": [
        {
          "scope": "entity.name.tag.html",
          "settings": {
            "foreground": "#F92672" // Monokai 经典粉红
          }
        }
      ]
    }
  }
}

? 进阶提示：精准控制不同标签
VS Code 的 Vue 插件（如 Volar）配合语义化作用域，可实现更精细着色。例如：

• <script setup> 标签 → meta.tag.script.vue </script>

此时可单独配置：

{
  "scope": ["meta.tag.script.vue"],
  "settings": { "foreground": "#FFB86C" }
},
{
  "scope": ["meta.tag.template.vue"],
  "settings": { "foreground": "#A4E579" }
}

✅ 最后建议：安装 Volar（Vue 3 官方推荐语言服务器）并禁用旧版 Vetur，以获得完整且准确的 Vue 语法支持与作用域识别。完成配置后，你的 Vue 文件标签将焕发清晰色彩，大幅提升开发可读性与效率。