真正让代码高亮“更专业”的不是换主题或装一堆插件,而是分清语法级高亮(语言本身)和语义级高亮(变量、关键词、调试标记),前者靠语言插件+主题实现,后者必须用highlight-words并手动配置colors和defaultMode。

直接说结论:真正让代码高亮“更专业”的不是换主题或装一堆插件,而是分清两类需求——语法级高亮(语言本身)和语义级高亮(你关注的变量、关键词、调试标记),并分别用不同机制解决。
语法高亮靠语言插件 + 主题,不是 highlight-words
很多人误以为 highlight-words 能改善语法高亮,但它完全不处理 function、const、class 这类关键字着色。语法高亮由三部分决定:
- VSCode 内置语言支持(对 JS/TS/HTML/CSS 开箱即用)
- 对应语言的扩展插件(如
C/C++、Python、Vetur),它们提供更细粒度的 token 识别 - 当前配色主题(
Dark+ (default dark)或One Dark Pro)是否为这些 token 定义了颜色
如果你发现 async 没变色、import 和普通标识符一样灰,先检查右下角语言模式是否正确(比如 .ts 文件被识别成 Plain Text),再确认已安装对应语言插件,最后换一个主题试试。不要指望 highlight-words 去修这个。
语义高亮必须用 highlight-words,且必须手动配置 colors 和 defaultMode
想高亮某个函数名 handleClick 在整个项目里所有出现位置?想临时标记所有 TODO 或 FIXME?这才是 highlight-words 的战场。但默认安装后它根本不会生效:
-
"highlightwords.colors"至少要定义 2 组颜色,否则插件内部校验失败,高亮直接不显示 -
"highlightwords.defaultMode": 3是关键:表示“全词匹配 + 忽略大小写”,避免选中map却把flatMap、mapStateToProps全染上 - 深色主题下务必设
"highlightwords.box": {"dark": false},否则边框色和背景融合,看起来像没高亮
示例配置片段(加到 settings.json):
{
"highlightwords.colors": [
{"light": "#ffebee", "dark": "#b71c1c"},
{"light": "#e8f5e9", "dark": "#1b5e20"}
],
"highlightwords.defaultMode": 3,
"highlightwords.box": {"light": true, "dark": false},
"highlightwords.showSidebar": false
}
快捷键绑定失败?大概率是快捷键被其他插件劫持
highlight-words 默认没有快捷键,必须手动绑定。常见失效原因不是插件坏了,而是:
- 你在
Ctrl+K Ctrl+S里绑了Highlight Toggle Current,但Prettier或Auto Rename Tag抢占了Ctrl+Shift+H或Ctrl+H - 快捷键绑定到了“仅当前工作区”,而你正在打开的文件不属于该工作区
- 插件启用状态异常:在扩展面板里右键
highlight-words→ “禁用”再“启用”,比重启 VSCode 更快生效
推荐绑定组合键:Ctrl+Shift+H(Windows/Linux)或 Cmd+Shift+H(macOS),并确认右侧“when”条件为空(即全局生效)。
别碰 editor.tokenColorCustomizations,除非你真 inspect 过 token scope
网上很多教程教你在 settings.json 里加 editor.tokenColorCustomizations 改 keyword 颜色,但问题在于:
- 同一个词在不同语言下 scope 不同:JS 里的
return是keyword.control.js,TS 里可能是keyword.control.ts,Vue SFC 中又嵌套在source.vue下 - 没用
Help → Toggle Developer Tools → Inspect Editor Tokens点击真实代码确认 scope,改了等于乱改 - 主题更新后可能覆盖你的自定义,导致颜色突然消失
真要微调,只建议针对明确 scope 的小范围调整,比如:
"editor.tokenColorCustomizations": {
"textMateRules": [
{
"scope": ["support.type.property-value.css"],
"settings": {"foreground": "#2196F3"}
}
]
}
复杂点在于:语法高亮是静态解析结果,语义高亮是运行时匹配,两者底层机制完全不同。混用或强行统一视觉风格,反而增加认知负担。最专业的做法,是让语法高亮保持克制(突出结构),让语义高亮承担聚焦任务(突出意图)。











