better comments 插件通过颜色与图标区分注释语义，提升可读性与协作效率；支持安装扩展、自定义标签颜色、选用预设主题、配置语言支持四种方式。
注释太单调？Better Comments 让不同语义的注释一眼可辨
默认的 // 注释全灰，/* */ 也缺乏区分度，读代码时容易忽略关键提示。Better Comments 就是为解决这个痛点而生——它不改逻辑，只让注释“说话”。
安装后，它会按预设规则给不同前缀的注释上色：!（红色）标紧急问题，?（蓝色）标待确认，*（绿色）标说明性内容，todo（橙色）标待办任务。Vue 文件中若不生效，需手动修改插件目录下的 parser.js，在 setDelimiter 函数里补上 case "vue" 分支并指定 // 为注释符。
- 别依赖默认配置——检查
settings.json中better-comments.tags是否已启用你常用标记 - 避免和 Colorful Comments 插件共存，二者功能重叠且可能样式冲突
- 团队协作时，把定制后的
tags配置纳入项目级.vscode/settings.json，保证一致
缩进看不清嵌套层级？indent-rainbow 是最轻量的视觉锚点
尤其在长函数、多层 JSX 或 Vue 模板中，光靠空格/Tab 很难快速判断某行属于哪一级作用域。indent-rainbow 不分析语法，只按缩进深度循环使用四种颜色（如蓝→紫→绿→橙），每级一个色块，像路标一样直观。
它对性能几乎无影响，也不依赖语言服务，开箱即用。但注意：如果项目用 prettier 统一格式，而 Prettier 的 tabWidth 和你编辑器的缩进设置不一致，颜色断层会错位——务必保持二者统一，比如都设为 2 或 4。
- 禁用其他缩进高亮插件（如 Indent One），避免颜色打架
- 配色可在设置里调，但别自定义成相近色系（如灰+浅灰），否则失去区分意义
- 它不处理空格与 Tab 混用问题——先用
editor.detectIndentation自动识别，再手动清理历史混用
颜色值干瞪眼？Color Highlight 或 Colorize 直接渲染背景色
写 CSS 或内联样式时，看到 #3498db 或 rgba(0, 0, 0, 0.7) 还得切到取色器？Color Highlight 和 Colorize 都能直接在代码里渲染出对应色块，前者更轻量，后者支持更多格式（如 CSS 变量 var(--primary)）。
两者都不需要额外配置，装完即生效。但要注意：Colorize 在大型文件中偶有卡顿，而 Color Highlight 对 Tailwind 类名（如 bg-blue-500）默认不识别——得手动在设置里加 "color-highlight.languages": ["*"] 并重启。
- VS Code 内置的 CSS 颜色预览（hover 显示小色块）只对标准颜色关键字有效，这类插件才是真·实时渲染
- 如果同时装了
Tailwind CSS IntelliSense，它的颜色预览会覆盖插件效果，建议关掉其tailwindCSS.experimental.colorPreview选项 - 主题暗色模式下，某些浅色（如
#fff）背景可能看不清文字，可微调插件的透明度或字体色
括号匹配总要找？Bracket Pair Colorizer 2 已被原生替代
VS Code 1.68+ 版本已内置括号着色功能，Bracket Pair Colorizer 2 这类老插件不仅多余，还常引发闪烁、错位甚至崩溃。现在只需打开设置，搜 bracket pair，启用 editor.bracketPairColorization.enabled 即可。
原生方案更稳：支持嵌套深度达 20 层，且与语言服务器协同（比如 Vue 的 <template></template> 里也能正确着色），还自带 editor.guides.highlightActiveBracketPair 选项，悬停时高亮当前括号对。
- 卸载所有括号着色旧插件，否则它们会和原生功能抢控权，导致颜色乱跳
- 若发现着色异常（如 JSX 中
{}不上色），检查是否被语言扩展禁用——比如 Volar 默认关闭 JS/TS 的括号着色，需在vetur或volar设置里显式开启 - 原生方案不支持自定义颜色，想换色只能改主题色板，不是插件能控制的
真正影响阅读体验的，从来不是单个插件有多炫，而是多个视觉线索能否协同工作——注释色、缩进色、颜色预览、括号色必须互不干扰，且和你的主题、缩进设置、语言扩展形成稳定配合。稍有错配，反而增加认知负担。
