Code Outline 不显示是因未启用符号解析或文件类型不被识别，需确保为 .js 文件且含有效声明；Indent Rainbow 需统一空格缩进并排除无关语言；Bracket Pair Colorizer 需调色+禁用动画+开启匹配；ESLint 与 Prettier 协同需统一分号、缩进、换行规则以保障结构可读性。
Code Outline 显示函数/类层级结构
默认不显示代码大纲，Ctrl+Shift+O 按下后为空白，是因为没启用符号解析或文件类型不被识别。确保当前打开的是 .js 文件（非 .ts 或未关联的文本），且文件中存在可识别的导出、函数声明或类定义——比如 function foo() {}、export const bar = () => {}、class Baz {}。
如果仍不显示，检查是否禁用了语言功能：在设置里搜索 javascript.suggest.autoImports，确认它为 true；同时确认 VSCode 内置 JavaScript 支持未被其他插件（如 TypeScript 插件）意外覆盖。
Indent Rainbow 区分多层缩进嵌套
JS 中箭头函数链式调用、Promise 嵌套、React JSX 返回对象时容易缩进混乱，仅靠空格难以快速定位层级。安装 Indent Rainbow 后，每级缩进自动染色，但默认只对空格生效，遇到混合制表符+空格会失效。
- 必须统一缩进方式：在设置中设
"editor.insertSpaces": true和"editor.tabSize": 2 - 若项目用 4 空格缩进，需同步改
"indentRainbow.tabSize": 4 - YAML 或 Markdown 文件可能误触发，加到
"indentRainbow.ignoredModes": ["markdown", "yaml"]
Bracket Pair Colorizer 高亮匹配括号
JS 里 {}、[]、() 层叠频繁，尤其在 map().filter().reduce() 或 JSX 中，光标停在某括号上却找不到对应闭合位置，是典型视觉疲劳源。
插件 Bracket Pair Colorizer 默认启用，但容易和主题冲突——比如深色主题下蓝色括号难辨认。解决方法不是关插件，而是微调配色：
- 在
settings.json中加"bracketPairColorizer.consecutivePairColors": ["#ff6b6b", "#4ecdc4", "#44b5f0"] - 禁用自动颜色模式：
"bracketPairColorizer.disableAnimation": true，避免光标移动时颜色闪烁干扰 - 确认
"editor.matchBrackets": "always"已开启，这是底层匹配逻辑开关
ESLint + Prettier 协同让结构“肉眼可读”
格式混乱本身就会破坏结构感知，比如 if 块没换行、三元运算符挤成一行、缺少空行分隔逻辑块——这些不是语法错误，但会让 Code Outline 和人眼都难以划分模块。
关键不在装插件，而在配置协同规则：
-
"prettier.printWidth": 80强制换行，避免超长链式调用横向滚动 -
"prettier.bracketSpacing": true让{ key: value }更宽松，提升对象可扫视性 -
"eslint.rules": { "no-mixed-spaces-and-tabs": "error" }防止缩进错位导致结构错觉 - 禁用
"prettier.semi": false后，必须配合 ESLint 的"semi": ["error", "never"]，否则缺失分号会引发解析歧义，影响 AST 结构识别
真正影响 JS 结构清晰度的，从来不是某个插件开关，而是缩进一致性、括号可追踪性、语句分隔明确性这三件事是否闭环。漏掉任意一环，再炫的插件也救不回一眼看不出主干的代码。
