color highlight 通过渲染颜色块直观识别无效颜色值，支持多种颜色语法但不识别css变量；error lens增强错误显示，全语言兼容；rainbow brackets基于语法树精准配对括号；todo highlighter区分标记类型并统计数量。
Color Highlight 为什么 CSS 颜色写错了却没报错？
因为颜色值本身语法合法，color: #ff0; 和 color: #fff0; 都不会触发语法错误，但后者是无效的 HEX 值。Color Highlight 插件会在编辑器里直接渲染出颜色块，一眼就能看出哪个颜色根本“显示不出来”或明显偏色。
常见误用场景：复制粘贴设计稿颜色时多了一个字符、RGBA 写成 rgba(0,0,0,0.5,)（末尾逗号）、HSL 括号内空格不一致导致解析失败。插件对 hex、rgb()、hsl()、rgba()、hsla()、color-mix() 等都支持，但不识别自定义 CSS 变量里的颜色值（如 var(--primary)）。
- 安装后无需配置，默认生效；若想关闭某语言高亮，可在设置中搜索
colorHighlight.languages修改数组 - 和
Prettier配合时注意：Prettier 可能会把rgb(255, 0, 0)格式化为rgb(255 0 0)（新语法），Color Highlight 能识别后者，但旧版插件可能滞后，建议保持插件更新 - 在 CSS-in-JS（如 styled-components）中，需手动在
colorHighlight.languages中加入javascript或typescript
Error Lens 让警告不再“藏”在波浪线下
VSCode 默认只在出错行标一条浅色波浪线，鼠标悬停才显示提示，容易漏看。Error Lens 把整行背景染成淡红/淡黄，并在行尾直接打出错误信息，比如：Cannot find name 'Ref' 或 Unsafe assignment of an any value，不用挪动鼠标就能确认问题。
它不依赖具体语言服务，只要语言扩展提供了诊断（diagnostics），它就增强显示。所以 Vue + Vetur、TS + Pylance、React + ESLint 都能用。
- 默认开启所有诊断级别（error/warning/info），如只想突出 error，修改设置项
errorLens.showWarning和errorLens.showInfo为false - 和
ESLint插件共存时，可能出现重复提示，建议禁用 ESLint 的problems视图，专注用 Error Lens 行内显示 - 在大文件中开启
errorLens.enableForLargeFiles（默认 false），否则性能会下降
Bracket Pair Colorizer 和 Rainbow Brackets 到底装哪个？
两者都给括号上色，但实现机制和兼容性不同。Bracket Pair Colorizer 是老派方案，靠正则匹配括号，对嵌套深度大或非标准语法（如 Vue SFC 的 <script setup></script>）容易错位；Rainbow Brackets 是新架构，基于 VSCode 的语法树（semantic tokens），更准、更稳，且支持自定义配色层级（最多 7 层嵌套）。
如果你用的是 Vue 3 + setup、TSX、或带装饰器的类，Rainbow Brackets 是唯一靠谱选择。Bracket Pair Colorizer 在纯 JS/JSON 场景下仍可凑合用，但已停止维护。
- Rainbow Brackets 默认启用，无需配置；如要调色，搜
rainbowBrackets.colors，填入 7 个十六进制色值数组 - 和
Vetur或Volar同时启用时，确保editor.bracketPairColorization.enabled设为false，避免原生括号高亮与插件冲突 - 某些主题（如 Material Theme）自带括号着色，可能覆盖插件效果，此时需关掉主题的括号功能
TODO Highlighter 不是让你“记得改”，而是防止你“忘了删”
写 // TODO 很容易，但上线前忘记清理就危险了。TODO Highlighter 不仅高亮，还会在状态栏显示当前文件 TODO 数量，并支持一键跳转到所有标记位置——重点是，它能区分 TODO、FIXME、HACK，甚至自定义关键词如 XXX 或 OPTIMIZE。
它不会自动删除注释，但配合 Find in Files（Ctrl+Shift+F）搜 TODO 就能批量检查，比人工扫快得多。
- 默认只高亮行内注释，若需匹配块注释（
/* TODO */），修改todoHighlights.includeBlockComment为true - 上线前 CI 流程可加一步：用
grep -r "TODO\|FIXME" src/检查，但本地开发阶段靠这个插件实时提醒更省心 - 别把它和
AutoDocstring混用——后者生成的是 docstring，不是待办标记，TODO Highlighter 不会识别那类内容
实际项目里最常被忽略的是 Rainbow Brackets 和 Volar/Vetur 的括号高亮开关冲突，以及 TODO Highlighter 对块注释的支持默认关闭。这两个点不调，高亮就等于没开。
