代码高亮需插件增强实用性：better comments区分注释语义，bracket pair colorizer 2实现括号配对高亮，color highlight实时预览颜色值，error lens行内显示错误；四者覆盖90%视觉优化需求，避免冗余安装引发冲突。
代码高亮本身是 VS Code 自带能力，但“让高亮真正有用”——比如区分注释类型、匹配括号、突出 TODO、显示颜色值、标记错误位置——这些全靠插件补足。没装对插件，你看到的只是语法着色，不是可读性提升。
注释高亮：别让 // TODO 沉在代码里
默认的灰色注释根本抓不住眼球，尤其在长函数中容易被忽略。必须用插件把不同语义的注释变成视觉信号：
-
Better Comments 或 Colorful Comments：支持用 !（红色）、?（蓝色）、TODO（深黄）等符号触发对应颜色，配置项少、开箱即用
- 避免装多个同类插件：
Better Comments 和 TODO Highlights 功能重叠，选一个即可；后者更专注 TODO/FIXME，不支持自定义符号
- 注意配置顺序：如果同时用了
Prettier，确保它不格式化掉注释前的空格——否则 //! 可能被缩成 // !，导致高亮失效
括号/标签配对高亮：一眼找到另一半
写 JSX、Vue 或嵌套 JSON 时，光靠颜色不够，得有结构指引：
VSCode
避免常见的 VSCode 错误——设置冲突、调试器配置和扩展冲突。
下载
-
Bracket Pair Colorizer 2：给每层括号（{}、[]、()）分配不同颜色，选中一个自动高亮同级和匹配项；VS Code 1.79+ 原生已内置类似功能，但该插件仍更稳定、支持更多符号（如
-
Highlight Matching Tag：专治 HTML/Vue 模板，点击 <div>，自动下划线标出闭合的 <code>
；不兼容 Svelte 的
<script></script> 块，别在 .svelte 文件里强求
别装 Auto Rename Tag 来替代这个——它只改名，不提供视觉匹配
颜色值实时预览：CSS/SCSS 中的 #3b82f6 就该直接看见蓝色
靠脑补十六进制色值效率极低，且易错：
-
Color Highlight：轻量、无配置，支持 rgb()、hsl()、变量（如 $primary，需配合 SCSS IntelliSense）
- 如果项目用 Tailwind：
Tailwind CSS IntelliSense 自带颜色预览，且能 hover 看到对应 class 效果，比 Color Highlight 更精准
- 注意冲突：某些主题（如
Material Theme）会覆盖插件的颜色框样式，若预览框变模糊，先关主题或换 Dark+ (default dark) 测试
错误与警告行内显示：别 hover，直接看
ESLint 或 TypeScript 报错默认要悬停才显示，打断编码流：
-
Error Lens：把错误信息直接印在出错行末尾，红色高亮 + 图标，支持 Ctrl+Click 跳转到问题源头
- 它依赖语言服务器输出，所以必须先装好对应语言插件（如
ESLint、Pylance），否则只显示“no diagnostics”
- 性能敏感项目慎用：大型 monorepo 中开启
Error Lens 可能拖慢保存响应，可设 "errorLens.showOnSaveOnly": true 缓解
高亮插件不是越多越好——Better Comments + Bracket Pair Colorizer 2 + Color Highlight + Error Lens 这四组覆盖了 90% 的视觉干扰场景。多装一个，就多一分配置冲突和启动延迟，尤其是 Bracket Pair Colorizer 2 和原生括号高亮共存时，偶尔会颜色错位，这时候得手动禁用原生功能："editor.bracketPairColorization.enabled": false。
