【VSCode】Sassが10倍見やすくなる「Bracket Pair Colorizer」

VSCodeの拡張機能「Bracket Pair Colorizer」の使い方をご紹介します。

「Sassが10倍見やすくなる」と書いてますが、

Sassってネスト（入れ子構造）が深くなりがちで、
どこからどこまでがカッコの中か、分かりにくくなることが多いと思います。

「Bracket Pair Colorizer」は、
SassやJavaScriptなどの、カッコの始まりと終わりを同じ色で表示してくれるようになるプラグインです。

こちらがscssファイルを開いている状態。

カーソルに合わせて、対応するカッコが同じ色のラインで表示されるのも見やすくていいですね。

カッコ同士がハイライトされるのは、VSCodeの標準機能としてあるのはあります。

しかしカッコにカーソルを合わせないといけないので、やや面倒です。

インストール方法

拡張機能の検索窓に「Bracket Pair Colorizer」を入力。

インストールをクリック。
再起動が必要な場合、再起動してください。

設定の変更方法

デフォルトのままでも大丈夫ですが、
それぞれ色を変えたり、HTMLでも使いたい場合の設定が可能です。

色を変更する

setting.jsonを開き、
“bracketPairColorizer.consecutivePairColors”を追加します。

“Green”、”Red”などの指定方法
“#f00″、”#aaa”などのカラーコードでも指定可能です。

HTMLに適用する

先ほどと同じ”bracketPairColorizer.consecutivePairColors”に
HTMLのタグのパターンを追加します。

[“<“, “</”],
[“<“, “/>”],

こちらをコピペで大丈夫です！

HTMLにも適用できました。

ただちょっとごちゃついた印象があるので、
個人的にはあまりおすすめしません。笑

慣れると手放せないぐらい便利なプラグインなのでお試しください。