直接修改 settings.json 中的 editor.tokenColorCustomizations 即可生效,需用 Developer: Inspect Editor Tokens and Scopes 获取精准 scope,配置 textMateRules 规则,避免被第三方主题覆盖或写错位置。

直接改 editor.tokenColorCustomizations 就行,但 90% 的人配完没反应,不是 VSCode 坏了,是 scope 没抓准、配置位置错了,或被主题悄悄覆盖了。
怎么在 settings.json 里正确写 tokenColorCustomizations
必须打开命令面板(Ctrl+Shift+P 或 Cmd+Shift+P),执行 Preferences: Open Settings (JSON),在顶层对象里加字段:
不是数组,不是嵌套在 [javascript] 下(除非你只想局部生效),也不是塞进 workbench.colorCustomizations —— 那个只管界面,不管代码字的颜色。
editor.tokenColorCustomizations 是一个对象,里面推荐只用 textMateRules 数组:
- 每条规则必须含
scope和settings -
scope必须是完整链,比如keyword.control.ts,不是keyword -
settings里只支持foreground(文字色)、background(背景色,部分语言不渲染)、fontStyle("italic"或"bold") - 颜色值用
#rrggbb或rgba(),别用"red"这类命名色
怎么拿到真正有效的 scope
别猜、别搜“注释颜色 scope”,VS Code 不认这种词。唯一可靠方式是实时取:
- 把光标停在你要改的代码上(比如一个
console.log、一段// 注释、一个const) - 运行命令
Developer: Inspect Editor Tokens and Scopes - 看弹出面板顶部第一个
Scope字段,例如support.function.console.js或comment.line.double-slash.tsx - 复制它,粘贴到
textMateRules的scope字段里
注意:JS、TS、TSX、Python 的同类型语法 scope 后缀不同,混用就失效。
为什么改了 settings.json 却没变色
VS Code 不报错,只沉默忽略。三个最常见原因:
-
scope写错:比如写了comment,实际该用comment.line.double-slash.ts;用 Inspect 命令确认第一条 scope 才是最精准的 - 被第三方主题覆盖:One Dark Pro、Nord 等主题自带
tokenColors,且设了_defaults: true,会无视你的规则;临时切回Default Dark+测试,或关掉主题的语法强化开关(如"nord.enforceSyntaxHighlighting": false) - 语义高亮(
editor.semanticTokenColorCustomizations)优先级更高:如果你同时开了语义高亮,它会压过textMateRules;要么关掉"editor.semanticHighlighting": false,要么改用语义 token 规则
哪些 scope 写法容易踩坑
scope 不是越宽越好,宽了反而不可控、拖慢渲染:
- 避免
identifier、variable这类泛化 scope:它们匹配全文件所有变量,在大文件里明显卡顿 - 别用
string改所有字符串:HTML 属性值、JS 模板字面量、正则表达式都会被一起改;改string.quoted.double.ts或string.regexp.js更稳 - 同一 token 可能有多个 scope 并存(比如一个
if同时匹配keyword、keyword.control.js、keyword.control.ts),Inspect 面板显示的顺序就是匹配优先级,选最上面那条 - 想整体调亮/压暗?加一条 fallback:
{"scope": ["*"], "settings": {"foreground": "adjust(var(--vscode-editor-foreground))"}},但慎用,可能干扰插件高亮
真正难的不是写配置,而是分清你改的是哪一层:TextMate scope 控制词法,语义 token 控制逻辑,而 workbench.colorCustomizations 一根毛都碰不到代码字本身。


















