実質，拡張機能をインストールしなくても対応する括弧に色づけすることが出来るようになったよという話． 本記事では VSCode に Built-in で実装された Bracket Pair Colorization について確認したい．
この機能を有効にすると以下のようになる．
前提として，本記事は VSCode October 2021 (ver.1.62) 以上を利用していることとする．
- VSCode with built-in Bracket Pair Colorization
対応する括弧を色づける拡張機能として有名な拡張機能といえば，Bracket Pair Colorizer だろう． この拡張機能には，無印と "2" の 2 つがある．
- coenraads.bracket-pair-colorizer - VSCode Marketplace
- coenraads.bracket-pair-colorizer-2 - VSCode Marketplace
無印と "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 に近い実装を実現している．
August 2021 (ver.1.60) 以降では Bracket Pair Colorizer 2 に相当する Bracket Pair Colorization が実装されている．（この機能は Built-in 拡張機能ではないようだ） 更新を追うたびにこれらの機能は拡充されている．
以下に Bracket Pair Colorization に関するリリースノートを参照しておく．
- August 2021 (ver.1.60) # High performance bracket pair colorization
- September 2021 (ver.1.61) # Bracket pair guides
- October 2021 (ver.1.62) # Improved bracket pair guides
- March 2022 (ver.1.66) # Bracket pair colorization
- April 2022 (ver. 1.67) # Bracket pair colorization enabled by default
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 と等価）
| 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 は次を確認してほしい．
Request:
隣り合った括弧の色を循環して変える設定は実装されていないようだ．
Bracket Pair Colorizer では次のように実装されていた．
~.forceUniqueOpeningColor
~.forceIterationColorCycle
cf. CoenraadS/Bracket-Pair-Colorizer-2: Bracket Colorizer Extension for VSCode - README
Request:
カーソルが括弧内にあるとき，ガター（行番号の左側）に括弧を表示させる．
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": [
["「", "」"]
]
}対応する括弧を発見するためのアルゴリズムが 10,000 倍早くなったらしい．興味のある人は以下の公式ブログを参照してほしい．
cf. How We Made Bracket Pair Colorization 10,000x Faster In Visual Studio Code
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 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
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+\ によって対応する括弧へのジャンプが出来る．
実は，Bracket Pair Colorizer でも同じようなコマンドが用意されている．
キーバインドで括弧内のみを選択することも出来る．
例えば，Alt+A で括弧内の文字を選択するキーバインドを以下のように作成する．
{
"key": "alt+a",
"command": "editor.action.selectToBracket",
"args": {
"selectBrackets": false // boolean
},
"when": "editorTextFocus"
},selectBrackets |
Description |
|---|---|
true |
括弧を含む |
false |
括弧を含まない |
場合によっては，selectBrackets が true のコマンドと false のコマンドをそれぞれ作成しておいても有用だろう．
この他に，デフォルトの Shift+Alt+→ を利用しても良いだろう．
ver.1.62 では対応する括弧の色付けは Built-in の Bracket Pair Colorization 機能でほとんど十分になってしまった． また，Bracket Pair Colorizer に実装されているいくつかの機能も Built-in で実装される可能性が高い． これらが実装されれば，グッバイ Bracket Pair Colorizer が加速することになるだろう．
ほとんどの機能を VSCode 本体に吸収されてしまった Bracket Pair Colorizer に今後立つ瀬はあるのだろうか． リポジトリの issue でも Bracket Pair Colorization との違いがあるのか議論が散見された．しかし，# 検討されているリクエスト にあるような未実装の機能の有無のみが違いとなるようだ．
CoenraadS/Bracket-Pair-Colorizer-2: Bracket Colorizer Extension for VSCode - GitHub
リポジトリは 2021 年を以て更新を停止している．