対応する括弧に色をつける:Bracket Pair Colorizer2【VSCode拡張機能】
公開日：エディターでコードを書いていて、
カッコが何重にもなってわかりにくくなったり、
対応するカッコを探すのが大変だったりしますよね。
この記事では、対応するカッコに自動で色をつけてくれるVSCodeの拡張機能、【bracket pair colorizer2】を紹介します。
この拡張機能はカッコの対応が分かりやすくなるというだけですが、それだけでもコードを書くのが少し楽になりました。ぜひとも入れておきたい拡張機能の一つといっていいでしょう。
Bracket Pair Colorizer2
こんな感じです。
初期設定では深さごとに色分けされるようです。(設定で変えられます。)
隣り合うカッコは同じ色で、
内側にあるカッコは別の色で、区別されています。
初めの括弧と終わりのカッコが線で結ばれていて、これも結構わかりやすくていいですね。
カッコの範囲がどこからどこまでかが一瞬でわかります。(設定でなしにも出来ます。)
初期設定のままで使いやすかったので、自分は初期設定のままですが、
カスタマイズしたい！って方のために以下で設定について書いていきます。
設定の仕方
さて、設定の仕方は、拡張機能の【詳細(Overview)】のページに書かれていますが、
使いそうな設定を、一部解説します。
設定の変更の仕方
一応、拡張機能の設定のいじり方を説明しておくと、
VSCodeの【ファイル】→【基本設定】→【設定】で、設定の検索画面が出てきます。
そこで、これから紹介する、設定項目を検索してください。
設定ファイル(settings.json)に追記するタイプと、その場で変更するタイプがあります。
使う色を変更する： “bracket-pair-colorizer-2.colors”
使う色を自由に変えることができます。
外側のカッコから順に少しずつ暖色系の色に変えていく…とかいうこともできます。
自分でひとつひとつ色を指定しなければいけませんが。
"bracket-pair-colorizer-2.colors": [
"Gold",
"Orchid",
"LightSkyBlue"
]
このような形式でファイルに追加してください。
【色の名前】、【16進数コード】、【rgba()】での指定が可能です。
指定した色の数以上にカッコが深くなった場合は、交互に適用されていくようです。
横並びのカッコ(兄弟)も色分けする： “bracket-pair-colorizer-2.forceIterationColorCycle”
(){}←のように隣り合う状態のカッコは同じ色でしたが、これらが別の色で区別されるようになります。
"bracket-pair-colorizer-2.forceIterationColorCycle": true
上記のように指定することで有効になります。
色分けをカッコの種類で分ける： “bracket-pair-colorizer-2.colorMode”
デフォルトでは、()や{}などのカッコの種類に関係なく、深さだけを見て色分けされますが、
この設定で、カッコの種類で別々に色分けをすることができます。言葉で言ってもわかりずらいと思うので画像で用意しました。
{()}←こういう状態になっている場合にデフォルトでは別の色が使われていましたが、この設定では同じ色になります。
"bracket-pair-colorizer-2.colorMode": "Independent"
上記のように【”independent”】を指定することで有効になります。
まとめ
上記の設定は、VSCodeのMarketplaceのBracket Pair Colorizer2 のページでも確認できます。
カッコが見やすくなるだけで、結構変わりますね。
便利な拡張機能を使いこなして、コーディングの負担を減らせるといいですね。
