VSCode代码高亮失效的首要原因是右下角语言模式错误（如显示Plain Text），而非主题或插件问题；需点击切换正确语言模式，检查文件后缀、files.associations配置及插件冲突，并用Developer: Inspect Editor Tokens and Scopes验证token scope。

右下角语言模式错误导致高亮失效

VS Code 不会自动根据文件内容推断语言，只依赖后缀名和 files.associations 配置。一旦右下角显示 Plain Text 或错误语言（如 HTML 代替 Vue），所有语法高亮立即退化为纯白——这不是主题或插件问题，而是“没认对人”。

• 点击右下角语言标签，手动选对语言（JavaScript、TypeScript、Vue、CSS 等）
• 按 Ctrl+Shift+P（Win/Linux）或 Cmd+Shift+P（macOS），输入 Change Language Mode 回车再选
• 检查文件后缀是否写错：比如 .js 写成 .jss，或 .vue 大写成 .VUE（某些扩展对大小写敏感）
• 若项目中改过 files.associations，确认没把 *.ts 错配成 javascript，否则 interface、as const 这类 TS 特有语法就无法高亮

Vue 文件高亮不生效的典型插件冲突

.vue 文件默认不被识别为 Vue，必须靠插件驱动语言服务。Volar 和 Vetur 不能共存，且 Volar 已是 Vue 3 官方唯一推荐方案；Vetur 仅适用于 Vue 2 项目。

VSCode

避免常见的 VSCode 错误——设置冲突、调试器配置和扩展冲突。

下载

• 卸载 Vetur，再安装 Volar（作者：johnsoncodehk）
• 打开一个 .vue 文件后，右下角必须显示 Vue，不是 Vue HTML 或 HTML
• 在 settings.json 中确保有 "files.associations": { "*.vue": "vue" }，否则 Volar 不加载
• 禁用所有其他 Vue 相关插件（如 VueHelper、Auto Close Tag 的 Vue 模式），它们可能劫持语言模式

Color Highlight 插件色块不显示的排查路径

这个插件只渲染颜色值（如 #3498db、rgb(0, 128, 255)）旁的小色块，但它极度依赖语言模式和装饰开关。它不负责关键字高亮，所以别指望它修复 function 变白的问题。

• 确认当前文件语言是 CSS、SCSS、HTML 或 Less；Plain Text 下完全不工作
• 检查设置中 editor.decorations 是否为 true（默认开启，但某些主题或策略会关闭）
• 如果用了自定义语言关联（如把 .html 关联到 plaintext），需在 colorHighlight.languages 数组里显式加 "html"
• 运行 code --disable-extensions 启动 VS Code，仅启用 Color Highlight 测试——若此时正常，说明其他插件干扰了装饰渲染

自定义高亮颜色时 scope 抓不准的后果

直接抄网上的 "keyword" 或 "string" 规则大概率无效。VS Code 实际匹配的是带语言后缀的精细 scope，比如 keyword.control.js 或 string.quoted.double.tsx。写错 scope，配置就等于没写。

• 打开目标代码文件，把光标停在想调色的词上（如 "hello"）
• 按 Ctrl+Shift+P 输入 Developer: Inspect Editor Tokens and Scopes 执行
• 看弹窗顶部第一个 scope（带语言后缀的那个），复制它填进 textMateRules 的 scope 字段
• 注意：格式化后结构变化（如模板字符串被压成单行），scope 可能从 string.template 变成 string.quoted.backtick，务必在格式化后重新抓

真正卡住人的从来不是“没装插件”，而是语言模式没对、scope 没抓准、插件之间互相覆盖——这些点不逐个验证，装十个插件也没用。