VSCode代码颜色异常主因是插件劫持token provider导致scope判定失效；典型表现如关键字变灰、字符串与注释同色，根源在于Vetur/Volar冲突、Bracket Pair Colorizer过时干扰或“Syntax Only”插件绕过语义分析，需用Developer: Inspect Editor Tokens and Scopes验证scope并以Extensions: Disable All Installed Extensions+二分法精准定位。
VSCode 里代码颜色“与众不同”，通常不是主题或配色方案的问题，而是某个插件在主动干预 token 颜色渲染逻辑——比如 indent-rainbow、Color Highlight 或已过时的 Bracket Pair Colorizer 正在覆盖默认高亮行为。
为什么装了插件后关键字变灰、字符串和注释同色
根本原因是插件注册了自己的 token provider，绕过了 VSCode 原生语法解析器（如 typescript.tmx），导致 scope 判定失效。例如：Vetur 和 Volar 同时启用时，其中一个会接管 Vue 文件的 token 提供，但 scope 输出可能不兼容当前主题规则；Bracket Pair Colorizer 在 VS Code 1.80+ 中已被原生功能替代，继续启用会强制禁用内置括号高亮，连带影响 surrounding token 的染色上下文。
- 现象：右下角显示为
TypeScript，但function是灰色、const无高亮 → 实际是插件返回了错误 scope（如source.ts而非keyword.control.ts） - 验证方式：按
Ctrl+Shift+P→ 输入Developer: Inspect Editor Tokens and Scopes→ 点击任意关键词，看右侧弹窗中scope字段是否合理 - 典型冲突组合：
Vetur + Volar、Auto Close Tag（旧版）+ HTML、标着 “Syntax Only” 的 JS 插件（只做正则匹配，不走语义分析）
如何快速定位是哪个插件在改颜色
别猜，用 VSCode 自带机制二分排查：
- 按
Ctrl+Shift+P→ 执行Extensions: Disable All Installed Extensions - 再执行
Developer: Reload Window - 如果颜色立刻恢复正常，说明问题出在插件；否则是配置或语言模式问题
- 然后逐个启用插件，每启一个就
Reload Window一次，直到复现异常 - 重点关注
Output面板中Extension Host日志：出现Failed to register token provider或overriding existing theme rule就基本锁定罪魁
哪些插件真能安全“改颜色”，且值得留着
不是所有颜色类插件都危险。以下几类属于设计上就支持叠加、不劫持核心 token 流程的“友好型”：
-
indent-rainbow：只在缩进空白处画色条，不影响keyword、string等 token 的 foreground 颜色 -
Color Highlight：在颜色字面量上叠加背景色层，不修改语法 scope，也不干扰 editor.tokenColorCustomizations -
TODO Highlight：仅对注释中匹配正则的 TODO / FIXME 加背景/边框，scope 仍是comment - 自定义 token 颜色时，优先用
editor.tokenColorCustomizations+textMateRules，scope 值必须来自Inspect Editor Tokens and Scopes输出，不能瞎填
自定义颜色时最容易被忽略的细节
很多人加完 "editor.tokenColorCustomizations" 没效果，不是 JSON 写错，而是漏了关键约束：
- scope 必须精确匹配：比如想改 JS 中的函数调用，得用
support.function.js，而不是笼统的function - 语言专属配置要套在语言 ID 里：
"[javascript]": { "editor.tokenColorCustomizations": { ... } }，否则全局生效但可能被后续插件覆盖 - 透明度必须写在颜色值里：
"#ff000033"（带 alpha），不能靠opacity字段——token color 不支持该属性 -
indent-rainbow的colorOnWhiteSpace默认 false，如果缩进线只在 tab 上显示、空格不显，就得手动开它
