
今回は、Visual Studio Codeで
かっこの組み合わせをわかりやすくする方法について紹介します。
1. 概要
Visual Studio Code(以下、VSCodeとする)では、
Bracket Pair Colorizerという拡張機能を使うことで、かっこ表示をわかりやすくすることができます。
この拡張機能を使うことで、かっこ毎に色を振り分けられ、
以下のように「開きかっこと閉じかっこの組み合わせ」が視覚的にわかるようになります。
Bracket Pair Colorizerなし

Bracket Pair Colorizerあり

といった感じで、かっこに対して色がつきます。
最初、多くの色が使われて、逆にわかりづらくなると思っていましたが、
ソースコードが見やすくなって、作業効率が上がった感じはありました。
今回は、そのBracket Pair Colorizer拡張機能の使い方について解説していきます。
2. Bracket Pair Colorizerのインストール
以下のようにインストールします
1. 拡張機能のアイコンを選択
2. 「Bracket Pair Colorizer」と検索します。
検索したら、一番上の表示を選択
3.
install
をクリックするとインストールすることができます。

3. Bracket Pair Colorizerの使い方
本拡張機能は、かっこ表示が視覚的にわかるだけではなく、カーソルを合わせると
「開きかっこと閉じかっこの組み合わせ」に対して、
補助線が表示されます。
例1

例2

Visual Studio Code実践ガイド
![]() |
