VSCode で括弧に分かり易く色を付ける拡張機能 Bracket Pair Colorizer

ryomatsu

5年前

JavaScript のような言語を記述していると、{ や ( などのカッコを沢山使う機会があると思うが、より入り組んだコードを書くと括弧開きに対してどの括弧閉じが対応するのかがわかりにくくなることがある。

自分が現在利用している VSCode では括弧にカーソルを置くとソレに該当するもう片方の括弧をハイライトする機能が標準で搭載されているが、一々カーソルを動かすのも面倒だし、複数の括弧があるとあまり使いやすいとは言えない。

VSCode では Bracket Pair Colorizer という拡張機能を導入することで { や ( などの括弧に色をつけ、対応する括弧をわかりやすく表示することができる。

現在 Bracket Pair Colorizer 2 のベータ版が公開されている。

1 と 2 の違いだが、FAQ によるとブラケットの解析を行うエンジンを VSCode と同じものとしたバージョンのようだ。これによりより正確且つ動作も素早くなるとのことだ。

この拡張機能を導入すると、以下のように括弧に色がつくようになる。

ぱっと見でどの括弧がどれに対応するのかがわかりやすい。

色は設定により変更することができる。例えば以下のような感じだ。

"bracket-pair-colorizer-2.colors": [
    "Red",
    "Blue",
    "Green"
]

設定は他にも色の付け方のルールをいくつか選択することができる。詳しくは上記拡張機能のページを参照してほしい。

非常に便利な拡張機能なので入れておくことをオススメする。