VSCode 1.60+ 原生支持彩虹括号,需启用 editor.bracketPairColorization.enabled 和 independentColors,卸载旧插件,正确配置 foreground1–3 并确保语言模式正确。

VSCode 1.60+ 版本已原生支持彩虹括号,不需要装插件——装了反而容易颜色错乱、引导线消失、光标跳动,甚至让括号配对直接失效。
editor.bracketPairColorization.enabled 必须为 true
这是所有括号着色的开关,不是“颜色设置”,而是决定 VSCode 是否尝试识别并配对括号。关了它,foreground1、foreground2 全无效,插件也救不回来。
- 按
Ctrl + ,(Windows/Linux)或Cmd + ,(macOS)打开设置,搜bracket pair colorization,确认勾选 - 检查
settings.json里有没有"editor.bracketPairColorization.enabled": false,有就删掉或改成true - 顺手确认
"editor.matchBrackets": "always"(默认值,但有人手动改过)
必须同时启用 independentColors 才能分层着色
只开 enabled 不够:所有嵌套括号会共用同一组循环色(比如三层都红),看起来像“没变色”。真正区分层级,得靠 independentColors。
- 在设置里搜
independent colors,勾选Editor › Bracket Pair Colorization: Independent Colors - 对应 JSON 配置是:
"editor.bracketPairColorization.independentColors": true - 不开这个,
foreground1~foreground3就只是摆设;开了之后,第 1 层用foreground1,第 2 层用foreground2,第 3 层用foreground3,第 4 层起循环回foreground1
卸载 Bracket Pair Colorizer 和 Rainbow Brackets 等旧插件
这些插件和原生功能冲突,不是“增强”,而是劫持括号渲染逻辑——导致颜色错乱、光标跳动、配对失效,甚至让 editor.guides.bracketPairs 引导线消失。
- 打开扩展面板(
Ctrl + Shift + X),搜Bracket、Rainbow、Colorize - 卸载所有带这些关键词的扩展,包括
Bracket Pair Colorizer、Bracket Pair Colorizer 2、Rainbow Brackets - 卸载后重启 VSCode 或执行
Developer: Reload Window - 如果还有残留效果,临时切到
Default Dark+主题验证是否被其他扩展覆盖
自定义 foreground1–foreground3 颜色别碰 background 字段
VSCode 原生只认 workbench.colorCustomizations.editorBracketHighlight.foreground1 到 foreground3 这三个字段。写 background1 或 editorBracketMatch.background 是旧插件用的,现在无效,还会干扰渲染。
- 按
Ctrl + Shift + P输入Preferences: Open Settings (JSON) - 在
workbench.colorCustomizations对象里加三行(超出第 3 层自动循环): "editorBracketHighlight.foreground1": "#FF6B6B33""editorBracketHighlight.foreground2": "#4ECDC433""editorBracketHighlight.foreground3": "#FFD93D33"- 颜色值建议带透明度(如
#FF6B6B33),避免盖住语法高亮
最常被忽略的其实是语言模式:右下角显示 Plain Text、Vue(但文件是 .js)、HTML(但内容是 JSON)时,{} 和 [] 根本不会被处理——点它手动切换成 TypeScript 或 JavaScript React 才行。字符串或注释里的括号(如 "if (x > 0) { }" 中的 {)原生逻辑会跳过,这不是 bug,是设计行为。


















