语义高亮需手动开启 editor.semantichighlighting 并配置 editor.semantictokencolorcustomizations,使用 developer: inspect editor tokens and scopes 查准 scope 名,配合 languageoverrides 按语言精细着色。

语义高亮必须先打开开关
不启用 editor.semanticHighlighting,所有语义相关配置都无效。它不是默认开启的,哪怕你装了支持 LSP 的语言插件(比如 TypeScript、Python、Go),也得手动开。
直接在 settings.json 里加这一行:
{
"editor.semanticHighlighting": true
}
注意:部分老旧主题(如某些自定义主题或未更新的第三方主题)会禁用语义高亮,此时即使开了开关也没效果。优先用 VSCode 自带的 Dark+ 或 Light+ 测试是否生效。
- 如果开了但没变化,先换回
Dark+主题再试 - 某些语言扩展(如旧版 Python 插件)可能未实现语义 token,可运行
Developer: Inspect Editor Tokens and Scopes看 scope 是否含.semantic后缀 - VSCode 1.45+ 才完整支持,低于此版本该配置会被忽略
配色必须用 editor.semanticTokenColorCustomizations
很多人把语义颜色写进 editor.tokenColorCustomizations,结果完全不生效——那是给词法高亮(TextMate)用的,和语义高亮是两套机制。
正确位置是:
{
"editor.semanticTokenColorCustomizations": {
"rules": {
"variable.local": { "foreground": "#FF6B6B" },
"function": { "foreground": "#4ECDC4" },
"type": { "foreground": "#FFE66D" }
}
}
}
关键点:
-
rules是必填字段,不能直接写在editor.semanticTokenColorCustomizations下面 - token 名必须准确,比如
variable.local≠variable,function≠entity.name.function(后者是 TextMate scope) - 颜色值只接受十六进制(
#rrggbb或#rgba),不支持rgb()或命名色 - 若同时配置了同名 token 的词法和语义规则,语义规则一定覆盖词法规则
scope 名别靠猜,用命令实时查
写错 scope 是最常见失败原因。比如你想高亮类属性,以为是 property,实际可能是 field(C#)、variable.other.property(JS)或 support.variable.property(Python)。
唯一可靠做法:
- 把光标停在目标代码上(比如一个
this.name) - 按
Ctrl+Shift+P(Win/Linux)或Cmd+Shift+P(macOS) - 输入并执行
Developer: Inspect Editor Tokens and Scopes - 看弹窗顶部第一个带语言后缀的 scope(如
field.ts),去掉语言后缀就是你要的语义 token 名(field)
注意:面板右侧的 foreground 值会显示当前生效颜色,改完立刻能比对是否命中。
按语言单独配色避免互相污染
全局配 function 会让 Python 的 def 和 TypeScript 的函数声明共用同一颜色,但它们语义角色不同——前者是声明关键字,后者是标识符主体。
推荐写法是用 languageOverrides:
{
"editor.semanticTokenColorCustomizations": {
"rules": {
"function": { "foreground": "#8BE9FD" }
},
"languageOverrides": {
"python": {
"rules": {
"function": { "foreground": "#FFB86C" }
}
},
"typescript": {
"rules": {
"function": { "foreground": "#8BE9FD" },
"type": { "foreground": "#FF79C6" }
}
}
}
}
}
这样既保留通用规则,又为关键语言做精细控制。注意:languageOverrides 的语言 ID 必须和 VSCode 内部识别一致(比如 javascript 不是 js,typescriptreact 不是 tsx),不确定时可在文件右下角查看当前语言模式。
真正容易被忽略的是:语义 token 的粒度远超直觉——variable 下还分 local、global、parameter、property,不查 scope 直接配,大概率只生效一半。











