bracket pair colorizer 与 indent rainbow 组合可解决 js 代码 80% 阅读混乱问题：前者用固定配色区分多层括号，后者按缩进深度轮换颜色提升对齐感知，辅以 better comments 和 todo tree 实现注释语义化与集中管理。
直接用 Bracket Pair Colorizer + Indent Rainbow 组合，就能解决 80% 的 JS 代码阅读混乱问题——括号嵌套看不清、缩进层级分不明，这两类问题在复杂条件、链式调用、高阶函数里尤其明显。
为什么括号配色比“高亮当前括号”更管用
VS Code 自带的 editor.matchBrackets 只高亮光标所在的一对括号，但 JS 里常见 Array.prototype.map().filter().reduce() 或多层 if (a) { if (b) { if (c) { ... } } }，光标一动就断连。而 Bracket Pair Colorizer 给每层括号（()、[]、{}）分配固定颜色，嵌套再深也能一眼看出哪对属于同一作用域。
- 默认启用后，圆括号是青色、方括号是紫色、花括号是橙色，颜色不冲突且对比度足够
- 如果和主题色打架（比如暗色主题下青色太淡），可在设置里搜
bracket pair colorizer，改bracketPairColorizer.consecutivePairColors为["#ff6b6b", "#4ecdc4", "#45b7d1", "#96ceb4"]这类明快组合 - 注意关闭旧版插件
Bracket Pair Colorizer 2（已归档），新版叫Bracket Pair Colorizer，作者是CoenraadS
Indent Rainbow 怎么让缩进真正“可读”
JS 虽然不依赖缩进执行，但缩进错位会直接误导逻辑结构——比如 return 多缩进一层，实际却在 if 外；或 async/await 块里漏掉一层缩进，导致 await 执行时机错乱。 Indent Rainbow 不是简单加背景色，而是按缩进深度轮换四种颜色，让“缩进是否对齐”变成视觉直觉。
- 安装后默认生效，无需配置；若想微调，搜
indentRainbow，改indentRainbow.colorOnWhiteSpaceOnly为true，避免干扰代码本身颜色 - 对
template literal内多行字符串无效（这是设计使然），别误以为插件坏了 - 和 Prettier 配合时，确保
editor.formatOnSave开启，否则手动格式化后缩进颜色可能滞后一帧
注释和关键逻辑怎么快速定位
纯靠眼睛扫 // TODO 或 /* !important */ 效率低，且容易忽略。这时 Better Comments 和 Todo Tree 是互补组合：
-
Better Comments让注释自带语义颜色：用!标记阻塞性问题（红色）、?标记待确认逻辑（蓝色）、todo标记待办（橙色），颜色直接嵌入行内，不打断阅读流 -
Todo Tree把所有// TODO、// FIXME汇总到侧边栏，支持点击跳转，适合批量跟踪——但注意它默认不识别/* */块注释里的 todo，需在设置里加"todo-tree.regex.regex": "(//|#|
