color highlight插件默认仅在css/scss/html中高亮颜色值,js/ts字符串需手动配置colorhighlight.languages及正则pattern;vscode-highlight用正则匹配todo等标记;highlight-words临时高亮当前词;editor.tokencolorcustomizations修改语法作用域颜色。

VSCode 默认就有基础语法高亮,但很多开发者遇到的问题不是“没高亮”,而是“高亮不准”“颜色难辨”“特定内容(如 TODO、颜色值、关键词)不亮”——这些都得靠插件补足,且每类插件解决的问题完全不同,不能装错或混用。
vscode-highlight:用正则匹配自定义高亮(如 //TODO、FIXME)
这个插件专为语义标记设计,比如你想让所有 //TODO 红色、//FIXME 黄底黑字,就得靠它。它不依赖语言模式,纯靠正则扫描文本,所以能跨文件类型生效。
-
highlight.regexes是核心配置项,必须写在settings.json里;每个正则对应一个数组,数组里每个对象控制一个捕获组的颜色和样式 - 正则要双反斜杠转义,比如匹配
//TODO得写成"(\\/\\/TODO)",否则会报错或不生效 - 如果高亮没出现,先检查是否保存了
settings.json,再确认文件没被设置为Plain Text模式(右下角语言标识要对) - 性能敏感项目慎用复杂正则,比如带
.*?或多层嵌套的,可能拖慢大文件打开速度
Color Highlight:让 #FF6B6B、rgb(255, 107, 107) 这类颜色值旁显示色块
它不改颜色文字本身,只在旁边加一个小色块预览,对前端和 UI 工程师最实用。但它只在特定语言上下文中工作,不是所有地方都识别。
- 默认只支持
css、scss、html,如果想在javascript文件里高亮字符串中的颜色(如const color = "#3498db"),必须手动把"javascript"加进colorHighlight.languages配置项 - 它识别不了变量引用,比如
var(--primary)默认不渲染,需开启colorHighlight.customColors并配正则,否则白忙活 - 如果色块不出现,先看右下角语言模式是否为
JavaScript(不是Plain Text或JSON),再检查配置是否拼错键名(常见错写成colorhighlight.languages,实际是驼峰colorHighlight.languages)
highlight-words:临时高亮当前光标单词(类似 Source Insight 的 F8)
适合代码走读、查变量引用、定位重复字符串,属于“按需点亮”,不持久、不依赖规则,响应快。
- 快捷键默认未绑定,必须手动设:用
Ctrl+Shift+P调出命令面板,搜Highlight Toggle Current,点齿轮图标 → “修改键绑定” → 按F8(或其他你喜欢的键) -
highlightwords.defaultMode推荐设为1(whole word),避免搜state时把useState里的state也高亮,干扰判断 - 它不支持跨文件高亮,只作用于当前打开的编辑器;关闭文件后高亮自动清除,没法保存
- 颜色数量由
highlightwords.colors控制,默认 8 种,不够用可追加十六进制色值,但别超过 16 个,否则切换卡顿
editor.tokenColorCustomizations:改内置语法高亮颜色(如让 function 关键字变紫)
这是 VSCode 原生能力,不装插件也能做,但需要知道准确的语法作用域(scope)名,否则改了也没反应。
- 别瞎猜 scope 名,用
Help → Toggle Developer Tools,然后在控制台执行document.querySelector('.monaco-editor').style不顶用;正确姿势是按Ctrl+Shift+P搜Inspect Editor Tokens,把光标停在想改的词上,看左下角弹出的作用域链 -
editor.tokenColorCustomizations只影响当前主题,换主题就得重配;如果想全局生效,得在每个主题的tokenColors里单独加 rule - 改
keyword或support.function这类宽泛 scope 容易误伤,建议优先用更细粒度的,比如entity.name.function(函数定义名)或variable.other.readwrite(可读写变量) - 配置写错格式(比如少逗号、括号不匹配)会导致整个
settings.json失效,VSCode 会静默忽略,只保留之前有效配置——所以改完务必验证效果
真正麻烦的从来不是装插件,而是搞清哪个插件解决哪个问题、配置项写在哪、作用范围有多大。比如想高亮颜色值,装 vscode-highlight 就白费劲;想临时标出某个变量,却去配 tokenColorCustomizations 就太重了。选错方向,调三天也不见效果。











