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 查看；
• 同一作用域下多个规则会按顺序覆盖，后定义的优先级更高；
• 若需差异化着色（如
• 修改后无需重启，保存 settings.json 即实时生效。

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

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

{   "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）配合语义化作用域，可实现更精细着色。例如：

此时可单独配置：

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

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