メンテナンスされなくなった Bracket Pair Colorizer 2 から VS Code に標準搭載の括弧記号色付け機能に乗り換えよう

Visual Studio Code 1.61 がリリースされました?

Bracket Pair Colorizer 2 使ってますか？

そして Bracket Pair Colorizer 2 がメンテナンス終了しているのはご存じでしょうか？

そしてそして先月リリースされた VS Code 1.60 で同様の括弧記号を色付けする機能が標準搭載されたのは記憶に新しいですよね？

そしてそしてそして今月リリースされた VS Code 1.61 でブラケットペアガイドも標準搭載されました。

というわけでメンテナンスされなくなった Bracket Pair Colorizer 2 から VS Code に標準搭載された括弧記号色付け機能に乗り換えてみました。

Bracket Pair Colorizer 2 とは

括弧記号を色付けする拡張機能です。

https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2

下記が Bracket Pair Colorizer 2 による括弧記号色付けです。

アンインストールする

Bracket Pair Colorizer 2 はアンインストールしましょう。

（無効化でもいいです）

VS Code の設定で括弧記号色付け機能を有効化する

設定画面で bracket と検索すれば簡単に見つけることができます。デフォルトでは無効化されていますのでチェックボックスを付け有効にしましょう。

setting.json で設定する場合は下記になります。

{
    "editor.guides.bracketPairs": true,
    "editor.bracketPairColorization.enabled": true
}

設定は以上です。

VS Code の括弧記号色付け機能を試す

Bracket Pair Colorizer 2 の説明で使用したコードを使い回し、VS Code の括弧記号色付け機能により装飾されたコードのスクリーンショットが下記になります。

違い分かりますか？　ほぼ一緒ですね。

ここでもう一度 Bracket Pair Colorizer 2 による色付けをみてよく比較してみましょう。

分かりましたか？

今回 VS Code 1.61 で搭載されたブラケットペアガイドを有効にすればフォーカスの当たっている括弧記号同士の縦線が色付けされます。

Bracket Pair Colorizer 2 は while の括弧記号同士の縦線が色付けされています。

ただし Bracket Pair Colorizer 2 はカスタマイズ性が高い

ここで使用した Bracket Pair Colorizer 2 は初期設定の状態です。

Bracket Pair Colorizer 2 はカスタマイズ性が高く行番号の左側にフォーカスの当たっている括弧記号を表示したり、括弧記号の色を自分で定義できたり様々なカスタマイズが可能です。

VS Code の標準機能はそういった機能が現時点では存在しません。もしカスタマイズ性を求めるならば拡張機能を色々探してみましょう。

ただし Bracket Pair Colorizer 2 自体はメンテ終了なので使い続けるのはお勧めしません。移行先として紹介されている Highlight Matching Tag や Blockman を調べてみてはいかがでしょうか。

さいごに

VS Code 1.60 の段階でこの記事を書いていたのですが、同様のことを記述しているブログ記事をいくつか見てしまい、乗り遅れたため泣く泣くお蔵入りにしてました。しかし VS Code 1.61 がリリースされ機能追加によってまた別の形で公開できてよかったです。

VS Code Meetup 主催の年次カンファレンス「VS Code Conference Japan 2021」が11/20(土) に開催予定です。VS Code に興味がある方は参加してみてはいかがでしょうか。