vscode 1.60+ 应禁用 rainbow brackets 插件,改用原生 bracketpaircolorization 功能,性能更优、支持 jsx/html/python 等全语言括号着色,并需启用 guides 才能正确高亮 html/jsx 标签对。

VSCode 1.60+ 不该再装 Rainbow Brackets 插件
原生 editor.bracketPairColorization.enabled 已全面替代旧插件,性能更好、语言支持更全(包括 JSX、HTML 标签、Python 推导式),而 Rainbow Brackets(CoenraadS 版)早已停更多年,Bracket Pair Colorizer 2 在 TS/JSX 中偶发错位、卡顿,且与原生功能冲突——装了反而可能让括号不着色。
- 常见错误现象:装了插件但没颜色 → 实际是原生配对功能被禁用,插件依赖它却无法开启它
- 检查方法:Ctrl + , 搜索
bracket pair colorization,确认Editor: Bracket Pair Colorization已勾选 - 顺手打开
Editor: Match Brackets设为always,否则光标靠近时也不高亮配对项
三层彩虹色只需改三个 foreground 配置项
VSCode 原生最多支持 6 层嵌套着色,但只暴露 foreground1–foreground3 给用户自定义;第 4 层起自动循环复用前 3 种颜色——改这三项就控制全部视觉节奏,改太多反而破坏层级语义。
- 实操建议:在
settings.json的workbench.colorCustomizations中添加: -
"editorBracketHighlight.foreground1": "#FF9966"(最外层,如函数包裹的{}) -
"editorBracketHighlight.foreground2": "#66CCFF"(中间层,如map()内的[]) -
"editorBracketHighlight.foreground3": "#FF66CC"(最内层,如箭头函数的()) -
"editorBracketHighlight.unexpectedBracket.foreground": "#FF3333"(不匹配括号,多写一个}就立刻标红,这个很多人漏配)
主题不支持括号着色?换主题或手动补 background 颜色
原生括号颜色依赖当前主题是否声明了 editorBracketMatch.background1 等 token;很多轻量主题(比如默认的 Light+)压根没定义这些,导致开了配对也不显色。
- 最快验证:左下角点颜色主题图标,切换到
GitHub Dark或One Dark Pro,看是否立刻出彩 - 若仍无效:重启窗口(Ctrl + Shift + P →
Developer: Reload Window) - 想保留当前主题又想要颜色?直接在
settings.json里加editorBracketMatch.background1–background3,值同 foreground 逻辑,但用背景色(例如"#2a2a2a")
JSX/HTML 标签括号也彩色?确认 VSCode ≥ 1.70 并启用 guides
原生括号着色在 1.70+ 版本才真正支持 HTML 开闭标签、JSX 大括号;但仅开启 bracketPairColorization 不够,还需打开括号引导线(guides),否则标签对不会显示连接线,视觉连贯性差。
- 搜索
bracket pairs guides,把Editor: Guides: Bracket Pairs设为active(悬停时显示)或all(始终显示) - 同时确保
Editor: Guides: Highlight Active Bracket Pair已启用,光标落在<div> 上时,<code>











