需启用editor.bracketpaircolorization.enabled和independentcolors，并卸载旧插件；vscode 1.60+原生支持括号嵌套彩色高亮，开启后可区分()、[]、{}各层颜色，避免错乱闪烁。
怎么让括号嵌套一眼就看清？用内置 bracketPairColorization
VSCode 1.60+ 已原生支持括号对高亮，BracketPairColorizer 插件已过时。直接启用内置功能更稳、更轻、不冲突。
在 settings.json 中加这行即可：
{ "editor.bracketPairColorization.enabled": true }
常见错误：装了旧版 Bracket Pair Colorizer 2 插件后又开内置，会导致颜色错乱或闪烁。务必卸载该插件再启用内置。
进阶建议：
-
"editor.bracketPairColorization.independentColorPoolPerBracketType"设为true，可让()、[]、{}各自用独立色池，嵌套多层时区分度更高 - 光标停在括号上时，默认会高亮匹配对；若没反应，检查是否被其他插件（如某些主题）覆盖了
workbench.colorCustomizations
缩进混乱看不清层级？Indent Rainbow 是最轻量的解法
空格/Tab 混用、缩进深度难判断，是 JS 里 if/for/function 块容易写错的关键原因。Indent Rainbow 用不同颜色标记每级缩进，比纯靠空格数靠谱得多。
安装插件 Indent-Rainbow 后，无需配置即生效。但要注意：
- 它默认只对
javascript、typescript等语言启用；若在.vue的<script></script>块里不生效，需手动加语言支持："indentRainbow.ignoreLinePatterns": ["^\s*//"]避免注释行干扰 - 和 Prettier 冲突常见：Prettier 格式化后可能重置缩进风格，导致彩虹色“跳变”。建议把
editor.formatOnSave和 Indent Rainbow 共存，视觉辅助不替代格式规范
注释写得像代码一样难读？Better Comments 分层标记
JS 里一堆 // TODO、// HACK、// FIXME 挤在一起，根本分不清优先级。Better Comments 用颜色+前缀把注释分类，一眼识别意图。
安装后默认支持常见关键词，但 JS 场景要微调：
- 在
settings.json中补充 JS 常用标记："better-comments.tags": [ { "tag": "!", "color": "#FF2D00", "strikethrough": false }, { "tag": "?", "color": "#3498DB", "strikethrough": false }, { "tag": "//", "color": "#474747", "strikethrough": true } ] - 避免和 ESLint 注释冲突：比如
// eslint-disable-next-line会被误标为普通注释，可在tags中排除正则匹配eslint - 别滥用
TODO—— 它默认高亮为黄色，团队里如果每人每天写 5 条，整个文件全是黄块，反而失去警示意义
Prettier + ESLint 怎么配才不打架？关键在 prettier-eslint-config
单独开 editor.formatOnSave 用 Prettier，再开 ESLint 实时报错，结果常出现“刚格式完，ESLint 又标红”的循环。根源是规则重叠，比如 Prettier 要分号，ESLint 规则却禁用分号。
真正有效的做法是让 ESLint “托管”格式化：
- 安装
eslint-config-prettier，并在.eslintrc.js的extends末尾加上'prettier'，它会关闭所有与 Prettier 冲突的规则 -
settings.json中只保留："editor.formatOnSave": true和"editor.defaultFormatter": "dbaeumer.vscode-eslint"（不是 Prettier 插件） - 这样 ESLint 在保存时既校验逻辑错误，也执行格式修复，Prettier 只作为底层引擎被调用，不再直连编辑器
最后提醒一句：括号颜色、缩进彩虹、注释分层这些视觉手段，解决的是“人眼找结构”的问题；而 Prettier+ESLint 解决的是“机器认规范”的问题。两者必须各司其职，混搭不当反而增加认知负担。
