怎么为VSCode安装括号高亮-RainbowBrackets插件配置指南

先看一个问题：为什么很多开发者装了 Rainbow Brackets 插件，括号反而没有颜色，甚至编辑器出现卡顿？其实，括号着色这件事，VSCode 1.60+ 版本已经内置了原生支持，而且效果比第三方插件好得多。不过，很多开发者可能还不知道，或者了解得不完整。

先给出一个明确的结论：别装 Rainbow Brackets 插件了，它已经停更多年，而且与 VSCode 1.60+ 的原生功能冲突。装了之后，反而会导致括号不着色、卡顿，甚至出现着色错位。

为什么 Rainbow Brackets 插件现在不能用

CoenraadS 版本的 Rainbow Brackets 从 2021 年起就停更了，不再维护。与此同时，VSCode 官方从 1.60 版本开始内置了 editor.bracketPairColorization.enabled 功能。这个原生功能的性能更好，能覆盖 JSX、HTML、Python 等几乎所有语言的括号（包括 HTML 标签对），而第三方插件根本无法启用这种底层能力。一个常见的场景是：插件明明启用了，但括号依然没有颜色。这背后的问题其实是，原生配对识别被禁用，导致插件“上色”失败。

• 装了插件却看不到效果？这很常见，原因往往是 editor.bracketPairColorization.enabled 被设成了 false。
• 括号闪烁、光标跳动、JSX 大括号颜色出错？这是插件与原生功能同时运行时产生的典型冲突。
• 打开大文件明显卡顿？插件用的是老式的文本扫描方式，CPU 占用高；而原生功能基于 AST，要稳定得多。

正确开启 VSCode 原生括号彩色嵌套

这是所有高亮配置的基础，必须优先完成：

• 按 Ctrl + ,（Windows/Linux）或 Cmd + ,（macOS）打开设置。
• 搜索 bracket pair colorization，勾选 Editor: Bracket Pair Colorization（对应的配置项是 "editor.bracketPairColorization.enabled": true）。
• 顺手搜索 match brackets，把 Editor: Match Brackets 设为 always，否则光标靠近括号时可能不触发高亮。
• 如果以上设置后仍然无效，检查一下右下角的 language mode 是否正确。比如，文件后缀是 .vue，但 language mode 被识别为 Plain Text，这种情况很容易发生在 .env 或者未关联后缀的文件上。改成 Ja vaScript、Python 等对应语言即可。

自定义三层彩虹色：只改 foreground1–3 就够了

VSCode 原生最多支持 6 层嵌套着色，但只向用户开放了 foreground1–foreground3 这 3 个配置项。从第 4 层开始，颜色会自动循环复用前 3 种。没必要把 6 层颜色全改一遍，一方面容易破坏层级语义，另一方面也容易跟主题背景打架。

在 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 标签括号也想彩色？必须开 guides

VSCode >= 1.70 才真正支持 HTML 开闭标签、JSX 大括号的着色。但仅仅开启 bracketPairColorization 还不够，还需要启用括号引导线：

• 在 settings.json 中加上："editor.guides.bracketPairs": "all"（显示全部层级）或 "active"（只显示当前层级）。
• 部分轻量主题（比如 Light+）没有声明 editorBracketMatch.background1 等 token，会导致着色不可见。最快的验证方法是：左下角切换到 GitHub Dark 或 One Dark Pro，如果立刻出现颜色，那就说明主题本身不支持。如果坚持要用当前主题，可以在 workbench.colorCustomizations 中补上 editorBracketMatch.background1–background3，值跟 foreground 一样即可。

还有一个容易被忽略的细节：语言模式识别失败，比如 .vue 文件中 script 区域的括号不着色。这种情况往往不是配置问题，而是 Volar 插件没有安装或没有启用。另外，工作区设置（workspace settings）可能会覆盖全局设置，所以如果发现配置不生效，记得去项目文件夹下的 .vscode/settings.json 里检查一下。