VSCode中可通过安装Bracket Pair Colorizer 2插件或启用内置experimental.bracketPairColorization实现括号配对着色:先安装插件并启用,再配置colorizedBracketPairs自定义颜色,或直接开启原生括号着色功能。

如果您在使用 VSCode 编写代码时,因嵌套层级过深而难以快速识别括号的起始与结束位置,则可能是由于默认语法高亮未对括号配对进行差异化着色。以下是启用并配置 Bracket Pair Colorizer 插件以实现括号可视化区分的步骤:
本文运行环境:MacBook Air,macOS Sequoia。
一、安装 Bracket Pair Colorizer 2 插件
Bracket Pair Colorizer 2 是当前主流且持续维护的括号着色扩展,兼容 VSCode 1.80+ 版本,支持多种语言及自定义配色方案。
1、打开 VSCode,点击左侧活动栏中的扩展图标(方块拼图形状)。
2、在扩展搜索框中输入 Bracket Pair Colorizer 2。
3、在搜索结果中找到作者为 CoenraadS 的插件,点击“安装”按钮。
4、安装完成后点击“重新加载”使插件立即生效。
二、启用括号着色功能
该插件默认启用基础着色,但需确认设置中未禁用核心功能,否则括号不会显示颜色。
1、按下 Cmd + , 打开设置界面。
2、在搜索框中输入 bracket pair colorize enabled。
3、确保 Bracket Pair Colorize: Enabled 选项处于勾选状态。
4、若该选项不可见,可点击右上角“打开设置(JSON)”,手动添加:"bracketPairColorizer.enabled": true。
三、自定义括号颜色方案
插件支持为不同嵌套层级的括号分配独立颜色,通过配置 colorizedBracketPairs 可精确控制每对括号的显示效果。
1、进入设置 JSON 文件(Cmd + , → 右上角“打开设置(JSON)”)。
2、在 settings.json 中添加或修改 "bracketPairColorizer.colorizedBracketPairs" 字段。
3、例如设置三层嵌套:[{"open":"{","close":"}","color":"#FF6B6B"},{"open":"[","close":"]","color":"#4ECDC4"},{"open":"(","close":")","color":"#45B7D1"}]。
4、保存文件后,重新打开任意含嵌套括号的代码文件即可看到颜色变化。
四、启用括号高亮联动
开启 bracketPairColorizer.showBracketsInGutter 可在编辑器装订线区域同步显示对应括号符号,增强视觉锚点。
1、在设置 JSON 中添加配置项:"bracketPairColorizer.showBracketsInGutter": true。
2、确保装订线区域未被其他插件(如 GitLens)遮挡。
3、将光标置于任一括号上,观察左侧灰色竖条中是否出现同色小括号图标。
4、若未显示,检查当前文件语言模式是否被识别为支持语言(如 JavaScript、Python、JSON 等)。
五、切换至原生括号着色替代方案
VSCode 1.86+ 内置了更轻量的括号着色机制(experimental.bracketPairColorization),可作为插件的低资源占用替代。
1、在设置界面搜索 experimental.bracketPairColorization。
2、启用 Editor > Bracket Pair Colorization: Enabled。
3、禁用 Bracket Pair Colorizer 2 插件以避免冲突。
4、重启 VSCode 后,括号将按嵌套深度自动应用系统预设色彩(无需额外配置)。










