vscode 1.60+ 原生括号配对彩色高亮需开启 editor.bracketpaircolorization.enabled,配合 editor.guides.bracketpairs 显示引导线,并确保语言模式正确(如 javascript 而非 plain text),颜色自定义仅需配置 foreground1–3,避免使用已废弃的 background 字段。

确认 editor.bracketPairColorization.enabled 已开启
VSCode 1.60+ 默认启用括号配对彩色高亮,但这个功能极易被用户设置覆盖或误关——很多“没颜色”的问题根源就在这里。
- 打开设置(
Ctrl + ,或Cmd + ,),搜索bracket pair colorization - 勾选
Editor › Bracket Pair Colorization: Enabled(对应配置项为"editor.bracketPairColorization.enabled": true) - 顺手检查
Editor: Match Brackets是否设为always,否则光标靠近括号时可能不触发高亮
常见错误现象:装了 Bracket Pair Colorizer 2 却没效果,其实是底层配对功能被禁用了;插件只是“上色”,不负责“识别配对”。
用 workbench.colorCustomizations 调出彩虹色
原生功能最多支持 6 层嵌套着色,但默认只暴露前 3 层颜色变量:editorBracketHighlight.foreground1 到 foreground3。改这三项就能控制全部视觉节奏,超出第 3 层会循环复用——没必要全配满。
- 按
Ctrl + Shift + P输入Preferences: Open Settings (JSON) - 在
workbench.colorCustomizations对象里添加:
"editorBracketHighlight.foreground1": "#FF6B6B", "editorBracketHighlight.foreground2": "#4ECDC4", "editorBracketHighlight.foreground3": "#FFD93D"
注意:别用 background1 等旧字段名(那是已废弃的 Bracket Pair Colorizer 插件用的),VSCode 原生只认 foregroundX;颜色值建议带透明度(如 #FF6B6B33)避免遮挡语法高亮。
开启 editor.guides.bracketPairs 显示引导线
纯颜色有时不够直观,尤其在缩进深、行距密的代码里。搭配垂直引导线能一眼看清括号作用域范围,比单靠颜色更可靠。
- 在
settings.json中加入:"editor.guides.bracketPairs": "active"(只高亮当前括号对)或"all"(显示所有嵌套层级) - 该设置依赖主题支持,若无效果,先换到
GitHub Dark或One Dark Pro等明确声明括号引导线的主题 - 性能影响极小,但
"all"模式在超长文件中可能轻微拖慢渲染(一般可忽略)
为什么有些语言不着色?检查 editor.bracketPairColorization.languages
VSCode 不会对所有语言启用括号着色——它只在语言模式明确支持括号语义时才激活。比如 Markdown 中的 () 多是链接或强调,不是语法结构,所以默认关闭。
- 右下角看当前语言模式(如显示
Plain Text就不会着色,应改为JavaScript或Python) - 若某语言该着色却不生效,可能是被显式排除了:搜索
bracket pair colorization languages,点Edit in settings.json查看是否有类似"editor.bracketPairColorization.languages": ["*"]的限制 - HTML/JSX 中的
{}和标签<div> 都支持着色,但需确保语言模式是 <code>HTML或JavaScript React,而非Plain Text最容易被忽略的是语言模式识别失败——比如一个
.js文件被 VSCode 错判为JSON,那括号着色就完全失效。右下角点一下语言名手动切回来,比调配置更快。











