VS Code 默认注释颜色单一,难以区分 TODO、FIXME 等语义;Better Comments 按关键词着色(如 TODO 黄、FIXME 红),支持自定义标签与行首注释高亮;Todo Highlight 提供侧边栏待办列表与全局搜索;Bracket Pair Colorizer 2 用颜色+连线精准匹配括号,需关闭原生匹配以避免冲突。

为什么默认注释颜色不够用
VS Code 默认把所有注释都渲染成灰色,// TODO、// FIXME、// HACK 和普通说明混在一起,扫一眼根本分不清轻重缓急。尤其在大型文件里,关键待办事项容易被淹没,等上线才发现“TODO”还躺在代码里没处理。
Better Comments:按语义给注释上色
它不改逻辑,只改颜色——但效果立竿见影。安装后,默认就支持 TODO(黄色)、FIXME(红色)、HACK(橙色)、NOTE(蓝色)等关键词高亮,一眼锁定风险点或待优化项。
- 配置简单:打开设置搜索
Better Comments: Custom Tags,可追加自定义标签,比如加个REVIEW用紫色标出需同行评审的段落 - 注意缩进:它只高亮「行首带
//或/*」的注释,对函数内联注释(如let x = 1; // init)默认不生效,需手动开启Better Comments: Highlight Line Comments - 和
Todo Highlight不冲突,但后者只高亮不分类;Better Comments更适合日常开发中快速区分意图
Todo Highlight:让所有 TODO 可视化且可追踪
如果你需要确保 TODO 不漏掉、不误提交,这个插件更硬核。它不仅高亮,还会在侧边栏生成实时列表,点击直接跳转到对应行。
- 默认匹配
TODO、FIXME、XXX,支持正则扩展,比如加一条"\bBUG\b"捕获散落在代码里的临时标记 - 容易踩坑:它默认只扫描已打开的文件,如果想全项目扫描,得启用
todo-tree.filtering.includeGlobs并配置路径,否则搜不到src/utils/*.js里的 TODO - 和 Git 集成:配合
gitignore规则,可排除node_modules和构建产物目录,避免卡顿
Bracket Pair Colorizer 2:括号配对不是高亮,是“找对象”
这不是传统意义的语法高亮,但对编码体验影响极大。当嵌套三层以上 if、map 或 JSX 标签时,光靠缩进极易看错层级。它用颜色绑定左右括号,选中任一括号,另一端自动高亮+画连线。
- 必须关掉 VS Code 原生的括号高亮(
editor.matchBrackets设为off),否则两者打架,颜色错乱 - 颜色数量有限,默认 5 种,嵌套过深时会循环复用;可通过
bracket-pair-colorizer-2.customBrackets手动指定常用符号(如{、[、(、)的优先级 - Vue/JSX 用户特别受益:它能识别
和的配对,比原生标签高亮更稳定
真正影响效率的不是颜色多炫,而是信息是否在需要时准确浮现。这三个插件各自解决一类视觉盲区:注释意图、待办追踪、结构定位——装完重启,别调主题,先写两行代码试试光标停在哪,灯泡亮不亮、括号连不连线、TODO 跳不跳转。细节到位了,眼睛才不累。











