选插件前须明确高亮目标:变量引用用内置editor.selectionhighlight,任意单词用highlight-words插件,颜色值用color highlight插件;混用会导致功能失效。

选插件前先明确你要高亮什么:是变量引用、颜色值、任意单词,还是语义标识符?不同目标对应完全不同的插件和配置路径,混用反而失效。
区分三类高亮需求,对应不同插件
VSCode 里“高亮”不是单一功能,而是由三套机制分别承担:
-
editor.selectionHighlight(内置):双击变量后高亮同语义引用,依赖语言服务,只对userName这类标识符生效,"user"字符串或const关键字不会被标出 -
highlight-words(插件):手动触发,支持正则、全词匹配、忽略大小写,可高亮任意字符串(包括printf、HAL_GPIO_WritePin、甚至日志中的ERROR) -
Color Highlight(插件):专用于颜色值,自动识别#3498db、rgb(255, 0, 0)、var(--primary)并渲染色块,不处理文本
装错插件会导致功能缺失:比如想追踪 counter 变量却只装了 Color Highlight,结果什么都不会变;想给日志关键词加背景却只开 editor.selectionHighlight,它根本不管字符串字面量。
highlight-words 插件必须改的三个配置项
安装 highlight-words 后默认体验差,尤其暗色主题下颜色发灰、边框糊成一片。必须手动调整:
-
highlightwords.box设为false:避免边框遮挡括号和光标,改用背景色更清晰 -
highlightwords.colors至少补两组高对比度配对,例如:[{"light": "#ffeb3b", "dark": "#ff9800"}],深色主题下cyan容易和语法高亮冲突 -
highlightwords.defaultMode设为1(全词匹配):防止高亮state时把statement也带进去
别直接复制插件文档里的默认数组——它含 8 种颜色,但 VSCode 渲染时只取前几个,后面全被忽略;且部分颜色在 One Dark Pro 下 alpha 值被主题强制覆盖,实际看不见。
editor.selectionHighlight 高亮失效的三个真因
双击变量没反应?不是插件没装,而是以下任一条件不满足:
-
editor.selectionHighlight在 settings.json 中显式设为true(仅勾选 GUI 设置不够,某些 Remote-SSH 场景会回退) -
editor.wordHighlightStrongBackground被主题设为transparent,必须用workbench.colorCustomizations覆盖,例如:"editor.wordHighlightStrongBackground": "#5a5a5a55" - 当前文件右下角语言模式不是
C、C++、JavaScript等有效模式,而是Plain Text或未关联的后缀(如.log)
注意:editor.selectionHighlight 对大小写敏感,且不跨作用域——函数内定义的 i 不会高亮全局同名变量,这是语言服务限制,不是配置问题。
Color Highlight 的边界与绕过方案
这个插件只认标准颜色语法,遇到自定义 CSS 变量或非标准写法就失效:
- 支持:
color: var(--bg);(需配置colorHighlight.colors规则) - 不支持:
background: url("data:image/svg+xml,...")中的内联颜色、style="color:#f00"里的属性值(HTML 内联 style 不解析) - 注释中颜色需手动开启:
colorHighlight.showColorsInComment设为true - 若
vue文件中样式块不生效,检查colorHighlight.languages是否包含"vue"
真正难搞的是预编译 CSS 中的动态颜色(如 #{theme.primary}),这类需要额外插件或正则高亮,Color Highlight 无能为力。











