Bracket Pair Colorizer 是 VS Code 插件，通过为多层嵌套括号（()、[]、{}）分配循环高对比度颜色实现配对可视化，支持 JSX 和模板字符串，可自定义颜色数量与色值，并兼容 Prettier 等工具。

括号嵌套多、层次深时，光靠肉眼很难快速识别哪一对括号匹配——Bracket Pair Colorizer 就是为解决这个问题而生的 VS Code 插件。它不改变代码逻辑，只给不同层级的括号（()、[]、{}）赋予不同颜色，让配对关系一眼可见。

自动染色，开箱即用

安装插件后默认就启用，无需额外配置。每层嵌套的括号会按预设顺序循环使用一组高对比度颜色（如红、蓝、绿、紫等），最内层一个色，往外一层换一个色，层层分明。

• 支持所有常见括号类型：圆括号、方括号、花括号，也兼容 JSX 中的 {} 和模板字符串中的 ${}
• 颜色顺序固定但可自定义，适合长期使用形成视觉习惯
• 光标停在某个括号上时，不仅高亮自身，还会同步高亮它的配对项，连带显示作用域范围

颜色太多？可以精简或调整

如果默认的六七种颜色让你觉得干扰，可以在设置中减少层级数，或替换成更柔和/更醒目的配色方案。

Json Repair Kit

使用 Node.js 评估修复格式错误的 JSON，自动纠正尾随逗号、单引号、未加引号的键等常见问题，实现文件规范化。

下载

• 在 VS Code 设置中搜索 bracket pair colorizer，找到 Bracket Pair Colorizer 2 › Independent Nested Colors，设为 false 可限制最多只用 3 种颜色
• 修改 Bracket Pair Colorizer 2 › Colors，填入自定义十六进制色值，比如 ["#ff6b6b", "#4ecdc4", "#ffe66d"]
• 某些主题下括号颜色可能不够明显，可同时开启 Bracket Pair Colorizer 2 › Show Brackets In Gutter，在行号旁加小色块标记

和其它插件配合更高效

它和 Prettier、Auto Rename Tag、Highlight Matching Tag 等工具不冲突，反而能互补增强可读性。

• 写 Vue 或 React 时，{} 在表达式和 JSX 中都会被识别，避免把逻辑括号和模板括号混淆
• 搭配 indent-rainbow 使用，缩进线+括号色双重提示结构，嵌套再深也不晕
• 调试时快速定位 if 块或 try/catch 范围，不用来回拖动滚动条找闭合大括号

基本上就这些。不是炫技功能，而是每天写代码时默默帮你省下大量“找括号”时间的小帮手。