vscode1.60原生高性能括号着色无缝迁移方案（等价Bracket-Pair-Colorizer）

前言

我们的 vscode 真的是太厉害了，在最新的 v1.60 版本中原生支持了 高性能 的多层级括号彩色着色。

回顾历史，多层级括号着色由伟大的 Bracket-Pair-Colorizer 插件提供，由于匹配引擎低效的原因，作者从 v1 又开了一个新 repo 作为 v2 ，即使如此，v2 的问题 case 也频出，远远没有 v1 好用，所以我作为这个插件的忠实使用者也一直在用 v1 版本。

但现在不一样了，时代变了大人。

vscode 1.60 更新日志：August 2021 (version 1.60)

多层级括号着色说明：High performance bracket pair colorization

无缝迁移

直接上代码：

  // settings.json
  
  "editor.bracketPairColorization.enabled": true,
  "workbench.colorCustomizations": {
    "editorBracketHighlight.foreground1": "#ffd700",
    "editorBracketHighlight.foreground2": "#da70d6",
    "editorBracketHighlight.foreground3": "#87cefa",
    "editorBracketHighlight.foreground4": "#ffd700",
    "editorBracketHighlight.foreground5": "#da70d6",
    "editorBracketHighlight.foreground6": "#87cefa",
    "editorBracketHighlight.unexpectedBracket.foreground": "#ff0000"
  }

到这里为止，多层级彩色括号已经无缝迁移完成，卸载或者禁用 Bracket-Pair-Colorizer 插件即可。

对有兴趣的读者，下面我们细说来源。

对于 Bracket-Pair-Colorizer 插件来说，默认支持三层着色，默认值为：

  "bracket-pair-colorizer-2.colors": ["Gold" ,"Orchid", "LightSkyBlue"]

但 vscode 原生支持的 theme 主题括号配色方案只支持设定 rgb 格式，我们将其转为 rgb 即为：

  "Gold" -> "#ffd700"
  "Orchid" -> "#da70d6"
  "LightSkyBlue" -> "#87cefa"

对应 vscode theme 配置项为 workbench.colorCustomizations 下面的 editorBracketHighlight.foreground1 从 1 到 6 （ vscode theme color - Editor colors ）

我们重复两遍配置上即可，对于有个人 diy 的也可以按照这个循环配满 6 个。

而对于错误匹配不识别的括号，在 Bracket-Pair-Colorizer 中选项对应：

  "bracket-pair-colorizer-2.unmatchedScopeColor": "Red"

转换为新 vscode 支持配置即为：

  "editorBracketHighlight.unexpectedBracket.foreground": "#ff0000"

下面看实战对比演示。

对比演示

常规测试

1.6 原生

识别正常。

Bracket-Pair-Colorizer 插件

识别正常。

压力测试

打包产物超长单行代码

1.6 原生

速度：打开文件瞬间着色

Bracket-Pair-Colorizer 插件

速度：5 s 后才和 theme 一同着色，刚打开全白。

边缘测试

复杂深层多种类对象

1.6 原生

识别正常。

Bracket-Pair-Colorizer 插件

识别正常。

复杂多层级多种类模板字符串

1.6 原生

识别正常

Bracket-Pair-Colorizer 插件

模板字符串中套中套 + 换行，出现问题！

在这个 case 下，将导致后面的对象括号全部识别崩溃，造成大面积影响。

总结

不得不说原生支持的性能就是强大，而且不存在 corner case ，即刻起：