必须用Developer: Inspect Editor Tokens and Scopes命令精准获取目标代码的真实scope链(如comment.line.double-slash.ts),再在settings.json的editor.tokenColorCustomizations.textMateRules中严格按大小写、英文引号配置,避免被主题或语义高亮覆盖。

怎么精准定位你要改的 scope
改颜色没反应,90% 是 scope 写错了。VS Code 不认“注释”“函数名”这种中文描述,只认 comment.line.double-slash、support.function.builtin 这类精确 scope 链。
必须用内置命令抓真实 scope:
- 光标停在目标代码上(比如一个
console.log中的log) - 按
Ctrl+Shift+P(Windows/Linux)或Cmd+Shift+P(macOS) - 输入并执行
Developer: Inspect Editor Tokens and Scopes
面板里显示的 scope 列(从内到外一长串)才是你该抄进配置里的值。例如:support.function.console.js 比 function 更准,comment.line.double-slash.ts 能单独控制 TypeScript 的 // 注释,不波及 JavaScript。
editor.tokenColorCustomizations 怎么写才生效
这个配置必须写在 settings.json 里,不是 UI 设置界面,也不是主题文件中。路径是用户设置或工作区设置的 JSON 文件。
结构要严格合法:
- 顶层对象里加
"editor.tokenColorCustomizations"字段,值是对象,不是数组 - 优先用
textMateRules,每条规则必须含scope和settings -
scope字符串大小写敏感,引号必须是英文双引号 - 末尾不能多逗号,JSON 格式一错就整个配置静默失效
示例(让所有双引号字符串变青绿):
"editor.tokenColorCustomizations": {
"textMateRules": [
{
"scope": "string.quoted.double",
"settings": {
"foreground": "#2ec4b6"
}
}
]
}
为什么改了颜色却没变?三个高频坑
不是配置写错,而是被绕过去了:
- 第三方主题(如
Nord、One Dark Pro)自带tokenColorCustomizations,会覆盖你写的规则;查它文档,设类似"nord.enforceSyntaxHighlighting": false关闭其语法层 - 你配的是
workbench.colorCustomizations(管 UI),但想调函数名颜色——那是语法高亮,归editor.tokenColorCustomizations管,二者完全隔离 - 同时在用户级和工作区级
settings.json里写了同名字段,工作区设置会完全覆盖用户设置,导致你以为改了实际没生效
语义高亮(semanticTokenColors)和 textMateRules 的关系
两者共存,但语义高亮优先级更高。启用 "editor.semanticHighlighting.enabled": true 后,semanticTokenColors 会覆盖 textMateRules 中相同语义的 token。
比如你用 textMateRules 把所有 function 设为蓝色,又用 semanticTokenColors 把 function.declaration 设为紫色,那函数声明就会显紫色,普通函数调用还是蓝色。
常见语义 token 类型包括:function、variable、interface、enum、type —— 它们依赖语言服务器支持,不是所有语言都全量提供。
注意:semanticTokenColors 必须写在主题文件(.json 主题定义)里,不能塞进 settings.json 的 editor.tokenColorCustomizations 下。











