vs code 中 vue 文件的 template、script、style 等标签显示为白色，是因默认语法高亮未适配 vue 特殊结构；可通过自定义 `tokencolorcustomizations` 配置为不同标签（如 ``、`<script setup>`）设置专属前景色。</script>
在 VS Code 中，Vue 单文件组件（SFC）的 <template>、<script>、<style> 等顶层标签默认使用通用 HTML 作用域规则（如 entity.name.tag.html），而多数主题（如 Monokai、One Dark Pro、GitHub Dark）并未针对 Vue SFC 的语义化标签做差异化着色，导致所有标签均呈现为白色或浅灰，难以区分结构。
✅ 正确解决方式是：通过 settings.json 手动配置 editor.tokenColorCustomizations，按 TextMate 作用域（scope）精准控制标签颜色。
? 操作步骤：
- 打开命令面板：Ctrl+Shift+P（Windows/Linux）或 Cmd+Shift+P（macOS）；
- 输入并选择 Preferences: Open User Settings (JSON)；
- 在 JSON 中添加或修改 "editor.tokenColorCustomizations" 字段，务必指定当前启用的主题名称（如 "Monokai"、"GitHub Dark"、"One Dark Pro"），否则配置不生效。
? 示例配置（适配 Vue SFC 结构）
以下配置为不同标签赋予语义化颜色（以 GitHub Dark 主题为例）：
{
"editor.tokenColorCustomizations": {
"[GitHub Dark]": {
"textMateRules": [
{
"name": "Vue top-level <template> tag",
"scope": "entity.name.tag.html",
"settings": {
"foreground": "#569CD6"
}
},
{
"name": "Vue top-level <script> tag",
"scope": "entity.name.tag.html",
"settings": {
"foreground": "#C586C0"
}
},
{
"name": "Vue top-level <style> tag",
"scope": "entity.name.tag.html",
"settings": {
"foreground": "#CE9178"
}
}
]
}
}
}⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- scope: "entity.name.tag.html" 会同时匹配所有 HTML 风格标签（包括 <div>、<span>），因此该方案适用于顶层 Vue 标签优先着色的场景；若需更精确控制（如仅 <template>），可结合更细粒度 scope（如 "vue.tag.template"），但需确保已安装支持 Vue 语法的作用域扩展（如 Vue Language Features (Volar)）并启用 volar.experimental.enableExtendedSyntaxHighlighting。
- 修改后无需重启 VS Code，保存 settings.json 即可实时生效。
- 若颜色未变化，请确认：① 主题名拼写完全一致（区分大小写与空格）；② 已禁用冲突的语法高亮插件（如旧版 Vetur）；③ 使用的是官方推荐的 Volar 而非 Vetur（Vetur 已停止维护，且其作用域规则与 Volar 不兼容）。
? 进阶建议：配合 Volar 插件开启 volar.experimental.enableExtendedSyntaxHighlighting: true 后，可使用更精准的 scope，例如 "meta.tag.vue" 或 "meta.tag.script.vue"，实现真正语义级着色，大幅提升大型 Vue 项目的可读性与开发效率。
