vscode 1.60+ 应禁用 rainbow brackets 等插件,改用原生 bracketpaircolorization 功能;需启用 editor.bracketpaircolorization.enabled 和 editor.guides.bracketpairs,并自定义 foreground1–3 颜色实现三层彩虹括号。

VSCode 1.60+ 不该再装 Rainbow Brackets 插件
原生 editor.bracketPairColorization.enabled 已全面替代它,性能更好、语言支持更全(JSX/HTML/Python 推导式都行),而 Rainbow Brackets(CoenraadS 版)早已停更多年。装了反而可能让括号不着色——因为插件依赖原生配对功能,但自己无法开启它。
常见错误现象:Rainbow Brackets 安装后没颜色 → 实际是 editor.bracketPairColorization.enabled 被禁用,插件白跑一趟。
- 按
Ctrl + ,搜索bracket pair colorization,确认Editor: Bracket Pair Colorization已勾选 - 顺手把
Editor: Match Brackets设为always,否则光标不靠近括号时也不高亮 - 禁用所有括号类插件(
Rainbow Brackets、Bracket Pair Colorizer 2),重启窗口再测试,避免缓存干扰
怎么配出三层“彩虹括号”效果
VSCode 原生最多支持 6 层嵌套着色,但只暴露 foreground1–foreground3 给用户自定义;第 4 层起自动循环复用前 3 种颜色。改这三项就控制全部视觉节奏,改太多反而破坏层级语义。
在 settings.json 的 workbench.colorCustomizations 中添加:
"workbench.colorCustomizations": {
"editorBracketHighlight.foreground1": "#FF9966",
"editorBracketHighlight.foreground2": "#66CCFF",
"editorBracketHighlight.foreground3": "#FF66CC",
"editorBracketHighlight.unexpectedBracket.foreground": "#FF3333"
}
-
foreground1:最外层(如函数包裹的{}) -
foreground2:中间层(如map()内的[]) -
foreground3:最内层(如箭头函数的()) -
unexpectedBracket.foreground:不匹配括号(多写一个}就立刻标红,这个很多人漏配)
HTML/JSX 标签括号为什么没颜色?
VSCode ≥ 1.70 才真正支持 HTML 开闭标签、JSX 大括号的着色,但仅开 bracketPairColorization 不够,还必须启用引导线(guides)。
- 确认
editor.guides.bracketPairs设为true或active - 主题不支持?很多轻量主题(比如默认的
Light+)压根没定义editorBracketMatch.background1等 token,导致开了也不显色 - 最快验证:左下角点颜色主题图标,切换到
GitHub Dark或One Dark Pro,看是否立刻出彩 - 想保留当前主题又想要颜色?直接在
settings.json里加editorBracketMatch.background1–background3,值同 foreground 逻辑,但用背景色(例如"#2a2a2a")
缩进层级线要不要装 indent-rainbow?
它和括号着色完全正交,不碰括号逻辑,只渲染缩进条,无兼容风险,是比 Rainbow Brackets 更合理的补充选择。
-
indent-rainbow不会和原生括号着色冲突,也不会导致光标跳动或卡顿 - 如果你常写 Python、YAML 或 deeply nested JSON,它能帮你一眼看出缩进断层
- 配置简单:
indentRainbow.colorOnWhiteSpaceOnly设为true可避免干扰空格高亮 - 注意:不要同时开
indent-rainbow和Bracket Pair Colorizer 2,后者已停更且在 JSX 中偶发错位
括号颜色本身不难配,难的是搞清哪些设置必须共存、哪些主题根本不支持 background token、以及为什么换了颜色却看不到效果——往往卡在 guides 没开,或者主题缺定义。











