VSCode 自1.60版起优先使用内置括号配对高亮(editor.bracketPairColorization.enabled),性能更好、支持更全;只需配置workbench.colorCustomizations中foreground1/2/3即可实现三层彩虹色,无需插件。

VSCode 括号颜色高亮现在**优先用内置功能,而非插件**——自 1.60 版起,editor.bracketPairColorization.enabled 已深度集成、性能更好、语言支持更全。所谓“彩虹括号”,其实只需几行配置就能实现,装插件反而可能冲突或过时。
启用原生括号配对着色(必须先做)
这是所有高亮的基础,不开启就看不到任何颜色:常见错误现象:装了 Rainbow Brackets 却没效果,其实是底层配对功能被禁用了。
- 打开设置(
Ctrl + ,),搜索bracket pair colorization - 勾选
Editor: Bracket Pair Colorization(对应配置项:"editor.bracketPairColorization.enabled": true) - 顺手检查
Editor: Match Brackets设为always,确保光标靠近时立即高亮配对括号
自定义三层“彩虹色”(不用插件)
VSCode 原生支持最多 6 层嵌套着色,但默认只暴露前 3 层颜色变量,足够应付绝大多数场景(如 JS 的if (a.map(x => [x.id, x.name]).filter(...))):
为什么只调 foreground1/2/3?因为超出第 3 层会循环复用,改这三项就能控制全部视觉节奏;改太多反而让颜色失去层级语义。
"workbench.colorCustomizations": {
"editorBracketHighlight.foreground1": "#FF9966",
"editorBracketHighlight.foreground2": "#66CCFF",
"editorBracketHighlight.foreground3": "#FF66CC",
"editorBracketHighlight.unexpectedBracket.foreground": "#FF3333"
}
-
foreground1:最外层(如函数包裹的{}) -
foreground2:中间层(如map()内的[]) -
foreground3:最内层(如箭头函数内的()) -
unexpectedBracket.foreground:不匹配括号(如多写一个})——这个容易忽略,但能快速定位语法错误
要不要装 Rainbow Brackets 或 Bracket Pair Colorizer?
答案很明确:**不推荐新项目使用**。现实问题:Rainbow Brackets 插件(CoenraadS 版)已停更多年;Bracket Pair Colorizer 2 虽活跃,但和原生功能重叠,且在 TS/JSX 等语言中偶发错位、卡顿。
- 如果你用的是 VSCode 1.70+(2026 年几乎全是),原生着色已支持 HTML 标签、JSX 大括号、Python 列表推导式等复杂结构
- 插件唯一优势是“可设更多层级颜色”,但实际阅读中 >3 层嵌套本就该重构,而不是靠颜色硬扛
- 若真要装,务必禁用原生功能(关掉
editor.bracketPairColorization.enabled),否则两种机制打架,括号忽显忽隐
配合缩进线与语义高亮才真正好用
单靠括号颜色不够——它只是结构提示的一部分。真正减少嵌套误读,得组合使用:典型场景:看一段 8 层缩进的 Python 字典生成式,或 React 中嵌套 5 层的 JSX 返回值。
- 开启缩进引导线:
"editor.guides.bracketPairs": "active"(仅当前括号对显示垂直线)或"editor.guides.indentation": true - 启用语义高亮:
"editor.semanticHighlighting.enabled": true,让函数名、参数、变量各司其职,括号不再孤立存在 - 主题建议:用
One Dark Pro或Nord这类对meta.brace类作用域有明确定义的主题,避免自定义颜色被主题覆盖
foreground1 就以为结束了,结果发现 JSX 里花括号不着色——其实是语言模式识别错了(右下角显示的是 Plain Text 而非 JavaScript React)。










