vscode1.62原生代码块边缘导轨着色与Bracket Pair Colorizer的对标和差异化（附配置）

前言

听闻 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 的效果：

这个着色导轨（Improved bracket pair guides）到了 < 1.62 版本的 vsc 中时，即开启了 editor.guides.bracketPairs 后代码缩进异常时会有很丑陋的交错现象发生。

那么到了 vsc 1.62 是怎么解决的呢？

现状

到了 vsc 1.62 官方开始采取了一种 “差异化” 方案，不再是完美对标：

↑ 可以看到新 vsc 里， Improved bracket pair guides 将是会被代码块所带着移动的！

而这一行为在 Bracket Pair Colorizer 是固定不变的。

其实各有各的好坏：

1. 认为以前就很清真画个条条框框有点颜色区分就够了，那自然认为 Bracket Pair Colorizer 插件好。

2. 认为确实需要严格的包裹 代码块 的边缘导轨，即使尾括号缩进异常，也要真正履行包裹区分的，自然觉得 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 的原生支持系列功能，拥抱变化才是王道。