color highlight仅高亮颜色值,如#ff6b6b、rgb()、var()、blue等;不处理#todo等非颜色字符串,且需配合highlight-words实现变量全局高亮,bracket pair colorizer须禁用原生括号配对功能。

Color Highlight 只对颜色值生效,别指望它高亮别的东西
Color Highlight 的作用边界非常明确:它只识别并渲染 #ff6b6b、rgb(255, 107, 107)、var(--primary)、blue 这类颜色语法。不是所有带“#”的字符串都会被处理——比如 #todo 或 #section-1 完全不会触发色块。
常见误用场景:
- 在 JS 字符串里写
const color = "#3498db"→ 高亮正常;但写成const id = "#header"→ 不会高亮 - 在 Markdown 文件中写
## 标题→ 即使含#,也不会渲染色块(语言模式是 markdown,插件不激活) - 注释里写
// background: #e74c3c→ 默认不处理,需手动开启colorHighlight.showColorsInComment
highlight-words 才是真正用来高亮选中代码区域的插件
如果你的目标是“选中一个变量名,让它在当前文件所有出现位置都标亮”,Color Highlight 做不了,Bracket Pair Colorizer 也做不了——只有 highlight-words 能稳定实现。
它必须手动配置才能工作,光装插件没用:
-
highlightwords.colors至少填两组颜色,否则高亮不显示(插件内部有最小长度校验) -
highlightwords.defaultMode: 3是关键:表示“全词匹配 + 忽略大小写”,避免选中map时把flatMap也标出来 -
highlightwords.box.dark: false在深色主题下必须设为false,否则边框和背景融合,看起来像没高亮 - 快捷键默认为空,需在
Ctrl+K Ctrl+S中绑定Highlight Toggle Current,推荐Ctrl+Shift+H
中文括号高亮要关掉原生功能,否则冲突失效
VSCode 自带的 editor.bracketPairColorization.enabled 和第三方插件(如 Bracket Pair Colorizer)不能共存。中文括号尤其敏感,一旦启用原生配对,插件定义的 【】、『』 很可能错位或完全不渲染。
正确操作顺序:
- 先在设置里把
editor.bracketPairColorization.enabled设为false - 再配置插件的
bracketPairColorizer.colorizedBracketPairs,每对必须是两个独立字符串:["【","】"],不能写成"【】" - 确认语言模式正确:中文括号写在 JS 字符串里(
const s = "【开头】")不会被处理——这是预期行为,不是 bug - 如果颜色太淡,直接在
workbench.colorCustomizations加"editorBracketHighlight.foreground1": "#FF9E5C"
TODO/FIXME 注释高亮依赖插件,原生不支持
VSCode 默认不会给 // TODO: 或 /* FIXME */ 加背景色或特殊样式。想让它们一眼可见,必须装插件,比如 Todo Highlight 或 Better Comments。
两者区别明显:
-
Todo Highlight专注标记,高亮后还能用命令Todo: List Highlighted annotations拉出全部待办清单 -
Better Comments更灵活,支持自定义类型:!important、?question、// @see都能分色,但需要手动配todo-tree.highlights.defaultHighlight类规则 - 注意:如果用了 Prettier 或 ESLint 自动格式化,某些注释风格(如
/* TODO */)可能被格式化工具删掉或改写,导致高亮失效
配置项之间存在隐性依赖,比如 highlight-words 的颜色数组长度、Bracket Pair Colorizer 与原生括号功能的开关状态、甚至终端面板位置都可能间接影响高亮是否可见——这些细节不试一次根本想不到。











