# Bracket Pair ColorizerでVisual Studio Codeの括弧を色分けして見やすくする

URL: https://webrandum.net/vscode-bracket-pair-colorizer/
公開日: 2019-03-08
更新日: 2019-03-08
カテゴリー: コーディング
タグ: VisualStudioCode
出典: Webrandum（著者: サイトウ マサカズ）

SassやJavaScriptを書いていると括弧が多くて、どの括弧とどの括弧が対応しているのかパッと見で分かりにくくなってしまいます。

何とかならないかと探してみると「Bracket Pair Colorizer」というプラグインを見つけたので紹介します。

## Bracket Pair Colorizerのインストール

[![](https://www.google.com/s2/favicons?domain=marketplace.visualstudio.com)marketplace.visualstudio.com![](//webrandum.net/mskz/wp-content/uploads/pz-linkcard/cache/3e6927e4d21d88ad0966e718ff0d26a00607742971583edd2f98dd40e823980b.webp)Bracket Pair Colorizer - Visual Studio Marketplacehttps://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizerExtension for Visual Studio Code - A customizable extension for colorizing matching brackets](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer)

Visual Studio Codeの拡張機能で「Bracket Pair Colorizer」と検索するかマーケットプレイスでインストールが可能です。

ちなみに「Bracket Pair Colorizer」と「Bracket Pair Colorizer 2」があるのですが、何が違うのかイマイチ分かりませんでした。

インストールして再起動すると機能します。

## Bracket Pair Colorizerの表示

インストールすると、対応する括弧に色がついて、括弧内にカーソルがあると、括弧から括弧までに線が伸びるようになります。

![インストール前後の変化](https://webrandum.net/mskz/wp-content/uploads/2019/03/image_1-6.png)

最初は色が増えて落ち着かなかったのですが、慣れると対応する括弧がすぐ分かるので非常に便利です。

特にSassはネストが深くなると、どこから開始された括弧なのか分かりにくくなるのでオススメです。

### カーソルの位置による挙動の違い

1つ気になったのが、カーソルの位置がカーソルの右にある場合と、左にある場合で挙動が変わる点です。

カーソルが括弧の右側にある場合は、その括弧の1つ下の括弧を選択している状態となります（括弧の外側扱い）。

![カーソルが括弧の右側の場合](https://webrandum.net/mskz/wp-content/uploads/2019/03/image_2-6.png)

カーソルが括弧の左側にある場合は、その括弧を選択している状態となります（括弧の内側扱い）。

![カーソルが括弧の左側の場合](https://webrandum.net/mskz/wp-content/uploads/2019/03/image_3-5.png)

個人的には括弧の右側を選択した時は、「その閉じ括弧に対応する括弧の位置が知りたい」場合が多いのですが、現時点では気をつけるしかなさそうです。