VSCode with built-in Bracket Pair Colorization

実質，拡張機能をインストールしなくても対応する括弧に色づけすることが出来るようになったよという話．本記事では VSCode に Built-in で実装された Bracket Pair Colorization について確認したい．

この機能を有効にすると以下のようになる．

cf. https://code.visualstudio.com/assets/docs/editor/editingevolved/bracket-pair-colorization-on-off.drawio.png

前提として，本記事は VSCode October 2021 (ver.1.62) 以上を利用していることとする．

Visual Studio Code October 2021 (ver.1.62) Release Note

Installed 拡張

対応する括弧を色づける拡張機能として有名な拡張機能といえば，Bracket Pair Colorizer だろう．この拡張機能には，無印と "2" の 2 つがある．

無印と "2" の違いは以下のように説明されている．

v2 Uses the same bracket parsing engine as VSCode, greatly increasing speed and accuracy. A new version was released because settings were cleaned up, breaking backwards compatibility.

Quoted from CoenraadS/Bracket-Pair-Colorizer-2: Bracket Colorizer Extension for VSCode # F.A.Q.

本記事では特に断りなく Bracket Pair Colorizer という場合には "2" を意味することとする．

次に紹介する Built-in 機能による Bracket Pair Colorization では，Bracket Pair Colorizer に近い実装を実現している．

Built-in support

August 2021 (ver.1.60) 以降では Bracket Pair Colorizer 2 に相当する Bracket Pair Colorization が実装されている．（この機能は Built-in 拡張機能ではないようだ）更新を追うたびにこれらの機能は拡充されている．

以下に Bracket Pair Colorization に関するリリースノートを参照しておく．

ver.1.67 時点で提供されている Bracket Pair Colorization による機能は以下のようなものがある．

対応する括弧の色付け（最大 6 段階）
- 対応しない括弧への色付け：editor.bracketPairColorization.enabled (ver.1.60)
対応する括弧をつなぐガイドバー
- 垂直方向：editor.guides.bracketPairs (ver.1.61)
- 水平方向：editor.guides.bracketPairsHorizontal (ver.1.62)
括弧の種類ごとにカラープールのサイクルを分ける：editor.bracketPairColorization.independentColorPoolPerBracketType (ver.1.66)

設定

括弧の色付け

Settings	Value type (default)	Description
`editor.bracketPairColorization.enabled`	Boolean (`true`)	括弧の色付けを有効化
`editor.bracketPairColorization.independentColorPoolPerBracketType`	Boolean (`false`)	括弧の種類ごとにカラープールのサイクルを分ける

editor.bracketPairColorization.independentColorPoolPerBracketType は次のような設定となっている．（Bracket Pair Colorizer による bracketPairColorizer.colorMode と等価）

# Bracket pair colorization - Visual Studio Code March 2022

開き括弧から閉じ括弧までのガイドの表示

Settings	Value type (default)	Description
`editor.guides.highlightActiveBracketPair`	Boolean (`true`)	以下の 2 つの設定を有効化
`editor.guides.bracketPairs`	Boolean or `"active"` (`false`)	垂直方向のガイド表示の有効化
`editor.guides.bracketPairsHorizontal`	Boolean or `"active"` (`"active"`)	水平方向のガイド表示の有効化ただし，1 行内では表示されない

"active" の場合，カーソルが括弧の中にあるときのみにガイドが表示される．

設定例

設定例として以下のようにしてみる．

// provided in ver.1.60 or later
  "editor.bracketPairColorization.enabled": true,
// provided in ver.1.61 or later
  "editor.guides.highlightActiveBracketPair": true,
  "editor.guides.bracketPairs": "active",
// provided in ver.1.62 or later
  "editor.guides.bracketPairsHorizontal": "active",
// provided in ver.1.66 or later
  "editor.bracketPairColorization.independentColorPoolPerBracketType": false,

括弧の色

これらの色付けは editorBracketHighlight.foregroundN から階層ごとに指定することが出来る．（N は 1 から 6 まで）

Bracket Pair Colorizer 風にするならば，次のように設定すると良いだろう．これを設定しておけば，ガイドバーにも括弧と同じ色が適用される．（別々に設定することも可能）

  "workbench.colorCustomizations": {
    // "Gold"
    "editorBracketHighlight.foreground1": "#ffd700",
    // "Orchid"
    "editorBracketHighlight.foreground2": "#da70d6",
    // "LightSkyBlue"
    "editorBracketHighlight.foreground3": "#87cefa",
    // "Red"
    "editorBracketHighlight.unexpectedBracket.foreground": "#ff0000",
  },

この設定における色のサンプルは以下のとおりである．

Settings	Color name	Sample
`~.foreground1`	Gold
`~.foreground2`	Orchid
`~.foreground3`	LightSkyBlue
`~.unexpectedBracket.foreground` 括弧が対応しないもの	Red

この他にも括弧に関連する配色設定がある．以下のページを参照してほしい．

cf. Theme Color | Visual Studio Code Extension API # Editor colors

Bracket matches: の節

検討されているリクエスト

ver.1.62 時点でまだ実装されていないが，検討されている Bracket Pair Colorization に付随するリクエスト．

2 つのリクエストを確認することが出来た．

連続する括弧の色付け
ガターへの表示

今後のバージョンで実装される可能性があると思われる．

この他，Bracket Pair Colorization に関する issue は次を確認してほしい．

Issues label:bracket-pair-colorization · microsoft/vscode

連続する括弧の色付け

Request:

~~[Feature Request] Bracket Pair Colorization: Consecutive/independent color mode · Issue #131027 · microsoft/vscode - GitHub~~ Ver. 1.66 で実装済み

[Feature Request] Bracket Pair Colorization: Force unique opening color · Issue #131029 · microsoft/vscode - GitHub

隣り合った括弧の色を循環して変える設定は実装されていないようだ．

Bracket Pair Colorizer では次のように実装されていた．

~.forceUniqueOpeningColor

~.forceIterationColorCycle

cf. CoenraadS/Bracket-Pair-Colorizer-2: Bracket Colorizer Extension for VSCode - README

ガターへの表示

Request:

Bracket pair show bracket in gutter editor.bracketPairColorization.showBracketsInGutter · Issue #132320 · microsoft/vscode - GitHub

カーソルが括弧内にあるとき，ガター（行番号の左側）に括弧を表示させる．

Bracket Pair Colorizer では次のように実装されていた．

~.showBracketsInGutter

cf. CoenraadS/Bracket-Pair-Colorizer-2: Bracket Colorizer Extension for VSCode - README

新たな括弧の構成

cf. Visual Studio Code October 2021 (ver.1.62) # Customizable bracket pairs

特定のプログラミング言語のブラケットペアを構成することも出来る．

Settings	Description
`editor.language.brackets`	複数行にまたがる括弧にインデントを追加する括弧の組
`editor.language.colorizedBracketPairs`	対応する括弧に色付けする括弧の組

  // Settings example
  "[javascript]": {
    "editor.language.brackets": [
      ["[", "]"],
      ["(", ")"]
    ],
    "editor.language.colorizedBracketPairs": [
      ["[", "]"]
    ]
  }

拡張機能などでシンタックスハイライトが設定されている言語に関しては必要ないと思われるが，log ファイルなどの括弧にシンタックスハイライトが与えられていない言語に関して構成しておくと良い．

ただし，拡張機能で構成されている括弧を上書きすることに注意が必要になる．

また，Markdown 等では 「 」 を色付けてもおもしろいだろう．

  // Settings example
  "[markdown]": {
    "editor.language.colorizedBracketPairs": [
      ["「", "」"]
    ]
  }

Bracket Pair Colorization に関するブログ

対応する括弧を発見するためのアルゴリズムが 10,000 倍早くなったらしい．興味のある人は以下の公式ブログを参照してほしい．

cf. How We Made Bracket Pair Colorization 10,000x Faster In Visual Studio Code

Bracket Pair Colorization のデフォルト有効化 (ver.1.67)

Ver.1.67 において，Bracket Pair Colorization がデフォルトで有効になった．

# Bracket pair colorization enabled by default - Visual Studio Code April 2022

このような更新は，この括弧の色付け機能に消極的なユーザーにとって衝撃的であり，批判の的となってしまったようだ．

Bracket pair colorization should NOT be enabled by default · Issue #148977 · microsoft/vscode

issue のコメントを確認すると，次のような意見からデフォルトでの有効化が否定されているようだ．

更新によってユーザーの意図しない見た目の変化が強制されるべきではない
利用するテーマに沿わない
括弧がきちんと閉じているかを検証することはコードを確認することよりも重要度が低い
気が散る

そもそも，Installed 拡張で提供されていた機能であり，必要だと感じた人のみが導入していた機能であることを思えば，突如としてこの機能がデフォルトだとすることは不合理だと思われる．また，エディタの色味を少なくしたいユーザーにとっては邪魔以外の何物でもないだろう．

Bracket Pair Colorizer との併用

Bracket Pair Colorizer は実質的に必要なくなったが，いくつかの # 検討されているリクエストについては未実装である．この機能を利用したい場合にはやはり Bracket Pair Colorizer を有効にしておく必要がある．

このような場合であっても Bracket Pair Colorization の機能を有効にしておくべきだろう．もともと，editor.bracketPairColorization.enabled は Bracket Pair Colorizer のために追加された機能だからである．

We implemented this feature to address performance issues of the famous Bracket Pair Colorizer extension by CoenraadS.

Quoted from Visual Studio Code August 2021 # High performance bracket pair colorization

About for LaTeX

LaTeX Workshop を利用していることを前提とする．( james-yu.latex-workshop - VSCode Marketplace )

ver.1.61 以前では \left ~\right による括弧の色付けをした際に，ガイドバーが上手くいっていなかった．しかし，ver.1.62 以降ではこの問題も解決されており，Built-in で十分だと思われる．

その他

VSCode の括弧のハイライトやキーバインドについて．

対応する括弧を囲う

Visual Studio Code November 2019 # New bracket matching option

対応する括弧内にカーソルを置いた際にそれぞれの括弧を四角で囲うことも出来る．ちょっとだけ視認性を上げる気がする．

  "editor.matchBrackets": "always",

Value	Description
`always` (default)	常に枠線を表示
`near`	カーソルが括弧に接するか内側にあるときのみ枠線を表示
`never`	枠線を表示しない

この枠線の色を変更することも出来る．

  "workbench.colorCustomizations": {
    // "DarkOrange"
    "editorBracketMatch.border": "#ff8c00",
  },

対応する括弧へのジャンプ

Ctrl+Shift+\ によって対応する括弧へのジャンプが出来る．

cf. Code Navigation in Visual Studio Code

実は，Bracket Pair Colorizer でも同じようなコマンドが用意されている．

括弧内を選択する

キーバインドで括弧内のみを選択することも出来る．

New command, "Select to Bracket", that will select the text between ... · Issue #43371 · microsoft/vscode - GitHub

例えば，Alt+A で括弧内の文字を選択するキーバインドを以下のように作成する．

  {
      "key": "alt+a",
      "command": "editor.action.selectToBracket",
      "args": {
        "selectBrackets": false // boolean
      },
      "when": "editorTextFocus"
  },

`selectBrackets`	Description
`true`	括弧を含む
`false`	括弧を含まない

場合によっては，selectBrackets が true のコマンドと false のコマンドをそれぞれ作成しておいても有用だろう．

この他に，デフォルトの Shift+Alt+→ を利用しても良いだろう．

Conclusion

ver.1.62 では対応する括弧の色付けは Built-in の Bracket Pair Colorization 機能でほとんど十分になってしまった．また，Bracket Pair Colorizer に実装されているいくつかの機能も Built-in で実装される可能性が高い．これらが実装されれば，グッバイ Bracket Pair Colorizer が加速することになるだろう．

Bracket Pair Colorizer のその後

ほとんどの機能を VSCode 本体に吸収されてしまった Bracket Pair Colorizer に今後立つ瀬はあるのだろうか．リポジトリの issue でも Bracket Pair Colorization との違いがあるのか議論が散見された．しかし，# 検討されているリクエストにあるような未実装の機能の有無のみが違いとなるようだ．

CoenraadS/Bracket-Pair-Colorizer-2: Bracket Colorizer Extension for VSCode - GitHub

リポジトリは 2021 年を以て更新を停止している．

# 🎄 Christmas Notice ☃️ README.md CoenraadS/Bracket-Pair-Colorizer-2: Bracket Colorizer Extension for VSCode

yarakos95/BracketPairColorization.md