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

直接改 editor.tokenColorCustomizations + textMateRules,别碰 workbench.colorCustomizations 或主题文件——那俩根本不管关键字颜色。
怎么查 keyword 的真实 scope 值
VS Code 不认你猜的 keyword 或 if 这种词,它只认 TextMate 语法作用域。把光标停在任意一个 if、for、const 上,按 Ctrl+Shift+P(macOS 是 Cmd+Shift+P),输入并运行 Developer: Inspect Editor Tokens and Scopes。
右上角弹出面板里,看 “Scope” 列表最上面那一行——比如:keyword.control.js(JS)、keyword.control.ts(TS)、keyword.control.python(Python)。这个才是你要用的 scope。
- 优先选带语言后缀的,比如
keyword.control.ts,它比泛化的keyword优先级高,不会误改其他语言 - 如果想全局改所有语言的关键字,才用
keyword,但容易和第三方主题冲突 - 别复制整个 scope 链(如
keyword.control.js, source.js),scope字段只接受单个字符串
settings.json 里怎么写规则
打开 Preferences: Open Settings (JSON),在顶层 JSON 对象里加 editor.tokenColorCustomizations 字段。要改 TypeScript 的 function 关键字为橙红色,就得这么写:
{
"editor.tokenColorCustomizations": {
"textMateRules": [
{
"scope": "keyword.control.ts",
"settings": {
"foreground": "#FF6B6B"
}
}
]
}
}
-
scope必须和 Inspect 工具里看到的完全一致,大小写、点号、后缀都不能错 -
foreground值必须是十六进制(如"#FF6B6B")或rgba(),不能写"red"或"lightcoral" - 如果想只对某语言生效,整个配置得包在
"[typescript]": { ... }里,注意方括号和引号不能少
为什么改了没反应?常见卡点
90% 的“不生效”问题出在这三件事上:
- JSON 格式错误:多逗号、引号没闭合、括号错位——VSCode 设置面板右下角虽有红点,但容易被忽略;建议粘贴到 JSONLint 里验证
- 当前主题锁死了语法色:像 One Dark Pro、Nord 这类主题常设
"_defaults": true,直接无视你的textMateRules;先切回官方Default Dark+测试是否生效 - 作用域冲突:两个规则匹配同一个 token,后写的覆盖前一个;用 Inspect 工具看右上角显示的 “Rule applied #2”,再调整
textMateRules数组顺序
深色/浅色主题下颜色怎么选才不伤眼
对比度不是越强越好。深色主题下用纯白 "#FFFFFF" 做关键字,边缘发虚还刺眼;浅色主题下用纯黑 "#000000",和背景反差太硬,长时间看容易疲劳。
- 推荐用在线工具(如 WebAIM Contrast Checker)验证:关键字色与当前背景色的对比度 ≥ 4.5:1(WCAG AA 标准)
- 深色主题常用关键字色:
"#4EC9B0"(青绿)、"#C586C0"(紫红) - 浅色主题更稳的选择:
"#0066CC"(深蓝)、"#D75F00"(赭红) - 别忘了检查
comment和string的颜色是否和关键字形成视觉层次——三者亮度差太小,就等于没分层
真正麻烦的是 scope 的粒度:比如 keyword.control.ts 能改 if for,但改不了 type 或 interface——那得查它们各自的 scope,比如 keyword.other.type.ts。Inspection 工具弹出来那一刻,才是你该盯住看的唯一依据。











