VS Code代码高亮失效首要确认右下角语言模式是否正确,如显示Plain Text需手动切换为对应语言;再检查files.associations配置、主题兼容性及扩展冲突;最后用Developer: Inspect Editor Tokens and Scopes诊断token生成与渲染问题。

高亮失效不是“坏了”,而是 VS Code 没拿到正确的 token 或没按预期渲染它——先确认语言模式,再查主题支持,最后看扩展干扰。
检查右下角语言模式是否正确识别
这是 80% 高亮问题的起点。VS Code 不会根据文件名自动推断语言,只依赖状态栏显示的语言模式(如 javascript、vue、python)。若显示 Plain Text 或 JSONC 等非目标语言,语法解析器根本不会加载,token 全是空的。
- 点击右下角语言标识,手动选择对应语言(如
.vue文件选Vue,.ts文件选TypeScript) - 选中后勾选 “Configure
vuelanguage based settings” 可保存为默认,避免每次重开都变回Plain Text - 检查
files.associations是否误配:比如"*.js": "json"会强制把 JS 当 JSON 解析,高亮全崩
用 Developer: Inspect Editor Tokens and Scopes 看真实 token
该命令能暴露底层着色逻辑:你看到的每个词,VS Code 实际打上了什么 token 标签(如 support.type.object.js),以及当前主题对它的颜色定义是否生效。
- 执行命令后,鼠标悬停或点击任意代码片段,面板会显示 token scope 和 color 设置
- 若显示
no color customizations,说明当前主题没覆盖这个 scope,不是插件问题,是主题缺失规则 - 若 scope 明显错误(如
function被标成string),说明语言服务解析异常,大概率是扩展冲突或配置错误 - 对比 Default Dark+ 主题是否正常:如果它能高亮,基本锁定是你当前主题不兼容该语言
禁用扩展排查冲突源
第三方扩展常劫持语言服务或覆盖 token 规则,尤其 Vue/Vue3 场景下 Vetur 和 Volar 同时启用必炸;Python 场景下旧版 Python 扩展与新 Pylance 共存也可能错乱。
- 快捷键
Ctrl+Shift+P→ 输入Extensions: Disable All Installed Extensions,然后Developer: Reload Window - 若高亮恢复,逐个启用扩展,每启一个 reload 一次,直到复现问题
- 重点关注:主题类扩展(如
One Dark Pro)、语言增强类(如Vetur、Auto Close Tag)、格式化类(如Prettier) - 某些扩展会在
Output面板的Extension Host或Log (Extension Host)中报 token 注册失败,可直接定位
手动补全 token 颜色或切回内置语言服务
当确认是主题缺失规则,又不想换主题时,editor.tokenColorCustomizations 是最直接的兜底方案;而对 Vue/TS 项目,Volar 依赖 TypeScript 服务,若工作区 TS 版本太新或太旧,也会导致语法树构建失败,进而无 token 可高亮。
- 在
settings.json中添加自定义规则,例如修复 C 变量高亮:"editor.tokenColorCustomizations": { "textMateRules": [ { "scope": "variable.other.local.c", "settings": { "foreground": "#FFD700" } } ] } - Vue 项目务必禁用
Vetur,确保只启用Volar;打开.vue文件后,点右下角 TS 版本号,选Use VSCode's Version - 检查项目根目录是否有
tsconfig.json:Volar 需要它来初始化语言服务,空项目或路径错误会导致整个.vue文件 token 为空
真正卡住的地方往往不在“怎么修”,而在“没意识到语言模式和 token 渲染是两层独立机制”——改了主题却忘了切语言模式,禁用了扩展却没 reload window,或者以为装了 Python 插件就万事大吉,结果文件压根没被识别成 python。盯住右下角那个小标签,比调一百遍设置都管用。


















