VSCode自带基础代码高亮,装插件是为增强而非补缺:解决默认高亮粗略、特定语言支持弱(如Vue SFC)、需额外语义高亮(TODO/颜色值可视化)三类问题。

VSCode 默认就有代码高亮,装插件是为增强还是补缺?
VSCode 本身自带基础语法高亮,只要文件语言模式识别正确(比如 .js 文件被识别为 JavaScript),关键词、字符串、注释等就会有颜色。装插件不是为了“开启高亮”,而是解决三类问题:默认高亮太粗略(比如所有函数名都一个色)、特定语言支持弱(如 Vue 单文件组件的 <script setup> 块)、需要额外语义高亮(如 TODO、FIXME、颜色值可视化)。别一上来就装一堆插件,先确认你缺什么。
怎么选对插件:按需求分三类装
别搜“高亮插件”这种模糊词,直接按目标找:
- 想让颜色代码旁边显示色块 → 装
Color Highlight(作者sergeche,200万+ 安装量) - 想高亮重复单词、自定义关键词(如
TODO、FIXME、接口名)→ 装highlight-words或vscode-highlight - 想改善某语言的语法区分度(比如 Python 的装饰器、React 的 JSX 属性)→ 装对应语言增强插件,如
Better Python、ES7+ React/Redux/React-Native snippets
注意:highlight-words 和 vscode-highlight 功能重叠但配置逻辑不同:highlight-words 配置简单,适合单词级高亮;vscode-highlight 支持正则捕获组,能分别给 //TODO 和后面的描述上不同颜色,但正则要双层转义(\\//TODO)。
安装后不生效?重点检查这三处
插件装完没反应,90% 是卡在这几个地方:
-
右下角语言模式是否正确:比如打开style.css却显示 “Plain Text”,点它手动选成CSS;Color Highlight只在CSS、HTML、SCSS等模式下工作 -
是否重启了 VSCode:尤其highlight-words,不重启大概率不生效(实测三次失效全因没重启) -
workspace 是否禁用了插件:右下角出现Color Highlight: Disabled提示时,点击它选 “Enable for this workspace”
配置 highlight-words 时容易踩的坑
它默认只高亮当前文档里的单词,跨文件不联动。如果想全局高亮某些词(比如项目里所有 apiV1),必须手动加配置:
{
"highlightwords.words": ["TODO", "FIXME", "apiV1"],
"highlightwords.colors": ["#ff6b6b", "#4ecdc4", "#44b5f5"],
"highlightwords.defaultMode": 1
}
关键点:"highlightwords.defaultMode": 1 表示“全词匹配”,避免把 apiV1 高亮成 apiV123 里的前半段;colors 数组长度必须和 words 一致,否则多余颜色会被忽略。
复杂点在于:它不支持正则,也没法区分大小写单独控制;真要匹配 // TODO: 这种带符号的,得换 vscode-highlight 写正则,但要注意 settings.json 里反斜杠必须写成 \\。


















