Visual Studio Codeで対応する括弧に色を付けて見やすくする環境設定

コーディングをしていると、括弧の入れ子が増えてきがちです。
そんなときに、どこの括弧とどこの括弧が対応しているのか分かりやすくなっていると、ズレて余計なミスをしなくなってきます。

昔は「Bracket Pair Colorizer 2」という拡張機能がありましたが、2021年のVisual Studio Codeのアップデートで標準機能として実装され、現在は拡張機能のサポート・メンテナンスが終了しています。

Bracket Pair Colorizerの設定

Visual Studio Codeのメニューバーの［Code］→［基本設定］→［設定（command + ,）］を選択して設定画面を開いて検索窓に「Bracket」と入力します。

「Bracket Pair Colorization」にチェックを入れて、「Bracket Pairs」は「true」か「active」にします。

ちなみに「active」にすると、フォーカスが当たっているコードを囲む括弧のペアのみガイドを表示します。
これで設定は完了です。

使用した状態の確認

設定できたら、すぐコードに反映されます。
「Bracket Pair Colorization」にチェックが入っていると、対応する括弧に同じ色がつくようになります。

「Bracket Pairs」が「active」になっていると、フォーカスが当たっているコードを囲む括弧のペアの左に色付きガイドが表示されます。
「true」の場合は、複数行にまたぐ対応する括弧すべての左側に色付きガイドが表示されます。

これだけでかなりコードが見やすくなりますし、ミスが起こりにくくなるので設定しておきましょう。

Bracket Pair Colorizer 2はサポート終了なので無効化しておく

昔からVisual Studio Codeを使っている人は「Bracket Pair Colorizer 2」をインストールして、そのままにしているかもしれません。

無効化して、もう使わないのでアンインストールしておきましょう。