前言
听闻 vscode1.62 已发布,相信聪明的 vscode 使用者已经在 vscode1.61 要升级为 1.62 ,或已升级为 1.62 ,虽然本次 1.62 的版本变化没有 awesome 级别的 feature ,但格外引人注意的就是与 Bracket Pair Colorizer 这个插件的对标和差异化。
对标
追溯古老的 vscode 1.60 版本,官方开始提供更好的正则引擎去识别括号并附加彩色着色,就已经开启了 Bracket Pair Colorizer 的对标时代,详情可见下文:
《 vscode1.60 原生高性能括号着色无缝迁移方案(等价Bracket-Pair-Colorizer) 》
虽然当时波及 Vetur 的 vue template 引发了一小波不兼容,但是随后的跟进(本人也参与到了其中 push),括号的问题就算是完美解决了从 Bracket Pair Colorizer 插件到 原生 vscode 着色 方案的无缝迁移替换。
但随后一些 Bracket Pair Colorizer 的忠实粉丝认为,vsc 在代码区块导轨着色方面做的不完美,以下是 Bracket Pair Colorizer 的效果:
![](https://i-blog.csdnimg.cn/blog_migrate/91c91869556cb55385ba7dda95539f41.png)
这个着色导轨(Improved bracket pair guides)到了 < 1.62 版本的 vsc 中时,即开启了 editor.guides.bracketPairs
后代码缩进异常时会有很丑陋的交错现象发生。
那么到了 vsc 1.62 是怎么解决的呢?
现状
到了 vsc 1.62 官方开始采取了一种 “差异化” 方案,不再是完美对标:
![](https://i-blog.csdnimg.cn/blog_migrate/53edb4d33133d3a9ea6a8db99beb1605.png)
↑ 可以看到新 vsc 里, Improved bracket pair guides 将是会被代码块所带着移动的!
而这一行为在 Bracket Pair Colorizer 是固定不变的。
其实各有各的好坏:
-
认为以前就很清真画个条条框框有点颜色区分就够了,那自然认为 Bracket Pair Colorizer 插件好。
-
认为确实需要严格的包裹 代码块 的边缘导轨,即使尾括号缩进异常,也要真正履行包裹区分的,自然觉得 vsc 实现的比较好。
可实际上这点小差异,我们应该能很快进行视觉适应,所以说了这么多,不多废话,直接上新的导轨着色迁移配置:
"workbench.colorCustomizations": {
"editorBracketHighlight.foreground1": "#ffd700",
"editorBracketPairGuide.activeBackground1": "#ffd7007f",
"editorBracketHighlight.foreground2": "#da70d6",
"editorBracketPairGuide.activeBackground2": "#da70d67f",
"editorBracketHighlight.foreground3": "#87cefa",
"editorBracketPairGuide.activeBackground3": "#87cefa7f",
"editorBracketHighlight.foreground4": "#ffd700",
"editorBracketPairGuide.activeBackground4": "#ffd7007f",
"editorBracketHighlight.foreground5": "#da70d6",
"editorBracketPairGuide.activeBackground5": "#da70d67f",
"editorBracketHighlight.foreground6": "#87cefa",
"editorBracketPairGuide.activeBackground6": "#87cefa7f",
"editorBracketHighlight.unexpectedBracket.foreground": "#ff0000",
},
// 开启原生括号着色
"editor.bracketPairColorization.enabled": true,
// 开启 active 时的代码块边缘导轨线着色(和 Bracket Pair Colorizer 行为一致)
"editor.guides.bracketPairs": "active",
其中新增的选项其实就是:
"editor.guides.bracketPairs": "active" // or true false
"editorBracketPairGuide.activeBackground{1...6}": "#da70d67f"
"editorBracketPairGuide.activeBackground{1,...,6}": "#da70d67f" // 一般用不到,你不会去更改背景的颜色
建议尽早放弃使用性能差的 Bracket Pair Colorizer 插件,快速适应 vsc 的原生支持系列功能,拥抱变化才是王道。