highlight-words是唯一靠谱的选中代码高亮插件,因其专为手动触发、多色叠加、跨文件高亮设计,支持全词匹配与正则模式,且需显式配置colors(至少2组)、defaultMode(推荐3)、box(dark:false防边框消失)等参数才能生效。

VS Code 默认的语法高亮只是基础,真正让代码“一眼看清结构”的高亮体验,必须靠插件组合 + 精准配置,而不是装一堆插件就完事。
highlight-words 是唯一能稳定高亮选中词的插件
很多人试过 Color Highlight、Bracket Pair Colorizer,结果发现它们根本不管“你选中的那个变量名”。highlight-words 是目前唯一专为这个场景设计的插件:手动触发、多色轮换、跨文件生效、支持正则。
-
highlightwords.colors至少要配 2 组颜色,否则高亮不显示(插件有硬性校验) -
highlightwords.defaultMode推荐设为3(全词 + 忽略大小写),避免选中map却把flatMap也标红 -
highlightwords.box中"dark": false很关键:深色主题下边框默认会融进背景,看起来像没高亮 - 快捷键必须手动绑定:
Ctrl+Shift+H是推荐组合,但得在快捷键设置里搜Highlight Toggle Current显式分配
editor.tokenColorCustomizations 控制语法级高亮颜色
这是 VS Code 原生机制,用来改 keyword、string、function 这类语法元素的颜色,和插件无关。它只影响 token 级别,不作用于注释、TODO 或自定义词。
- 先用
Help → Toggle Developer Tools,再点编辑器里任意位置,用Inspect Editor Tokens查当前光标处的 scope 名(比如support.function.console.js) - 在
settings.json里加editor.tokenColorCustomizations,只改你真正在意的 scope,别盲目套用网上的大段配置 - 改完不生效?检查是否被插件(如 Prettier、ESLint)的格式化规则覆盖了——它们可能在保存时重置样式
Todo Tree 高亮注释标记但必须配对启用
todo-tree 不是装上就自动扫 // TODO,它的行为完全由 todo-tree 开头的配置项驱动,且默认只扫描注释区域。
-
todo-tree.general.tags决定识别哪些标记,默认不含NOTE或REVIEW,要自己加 -
todo-tree.highlights.customHighlight必须是对象格式,写成数组会静默失效 - 想在
package.json或README.md里也识别?开todo-tree.general.scanWholeFile,但项目大时明显卡顿 -
todo-tree.filtering.includeGlobs强烈建议加上,比如["**/*.ts", "**/*.vue"],不然node_modules里扫一遍能卡住编辑器
Color Highlight 只渲染颜色值,不是通用高亮工具
它名字有“Highlight”,但功能非常窄:只找 #ff6b6b、rgb(255,107,107)、var(--primary) 这类颜色字面量,并在旁边画小色块。它不会高亮你选中的变量、函数或关键词。
-
colorHighlight.languages必须显式列出语言 ID,比如["css", "scss", "vue", "javascript"],缺了vue就不渲染<style scoped>里的颜色 -
colorHighlight.showColorsInComment设为true才能处理// background: #42b883这类注释里的颜色 - 别指望它替代
highlight-words—— 它连“选中即高亮”这个基本动作都不支持
最常被忽略的一点:所有高亮插件的行为都依赖 settings.json 的显式配置,UI 设置面板里点几下根本不够。尤其是 highlight-words 和 todo-tree,漏掉任何一个关键字段(比如 colors 数组长度、includeGlobs 范围),效果就会断崖式下降。


















