vscode 1.68+ 已原生支持彩虹括号,无需插件;启用 editor.bracketpaircolorization.enabled 并设为 true 是前提,再通过 workbench.colorcustomizations 自定义 foreground1–3 颜色实现三层着色,第 4 层起循环复用。

VSCode 1.68+ 版本已原生支持彩虹括号,不需要装插件——装了反而容易颜色错乱、引导线消失、光标跳动。
editor.bracketPairColorization.enabled 必须为 true
这是所有括号着色的开关。它不控制颜色,只决定“VSCode 是否尝试识别并配对括号”。Bracket Pair Colorizer 2、Rainbow Brackets 等插件全靠它提供配对信息,关了就彻底失效。
- 按
Ctrl + ,打开设置,搜bracket pair colorization,确认勾选 - 如果 settings.json 里有
"editor.bracketPairColorization.enabled": false,直接删掉或改成true - 顺手检查
editor.matchBrackets是否为always(默认是,但有人手动改过)
语言模式错误会导致括号不着色
VSCode 只对识别为代码的语言启用括号配对逻辑。右下角状态栏显示 Plain Text、Vue(但实际是 .js 文件)、HTML(但内容是 JSON)时,{} 和 [] 就不会被处理。
- 点击右下角语言名,手动选对:比如 .ts 文件选
TypeScript,不是Plain Text - .vue 文件默认用
Vue模式,但 script 块内括号着色依赖typescript或javascript子语言支持;若失效,可安装 Volar 并确保其激活 - 粘贴未保存的代码片段时,VSCode 默认当
Plain Text处理,需先保存为 .js/.ts 再打开
自定义三层彩虹色要改 workbench.colorCustomizations
原生只暴露 foreground1~foreground3 三个变量,分别对应最外层、中间层、最内层括号。第 4 层起自动循环复用 foreground1,不是 bug,是设计。
- 按
Ctrl + Shift + P输入Preferences: Open Settings (JSON) - 在
workbench.colorCustomizations下加这三行(注意逗号和引号):"editorBracketHighlight.foreground1": "#FF9966",<br>"editorBracketHighlight.foreground2": "#66CCFF",<br>"editorBracketHighlight.foreground3": "#FF66CC"
-
unexpectedBracket.foreground很关键:少写一个)或多写一个}时会立刻标红,比 ESLint 更早发现错配
缩进染色要用 indent-rainbow,但默认不生效
indent-rainbow 和括号着色完全无关,它只渲染缩进空格/TAB 的彩色条带,不干涉任何括号逻辑,所以可以放心共存。
- 安装后必须手动开启:
indentRainbow.enable设为true - 默认只对
javascript、python、typescript生效;想在markdown或json里也看到缩进色,得加:"indentRainbow.includeLanguages": ["markdown", "json"]
- 别指望它给 JSX 标签缩进上色——那是语言服务的事,indent-rainbow 只管空白字符
真正容易被忽略的是:括号颜色再炫,也救不了字符串或注释里的嵌套(比如 "if (x > 0) { }" 中的 {}),这是原生逻辑刻意跳过的,不是配置问题。











