WebDesigner's Memorandumウェブデザイナーの備忘録

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

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」にします。

「Bracket Pair Colorization」と「Bracket Pairs」の設定

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

使用した状態の確認

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

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

「Bracket Pair Colorization」と「Bracket Pairs」の設定による表示の変化

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

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

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

サポート終了の表示

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

著者について

プロフィール画像

サイトウ マサカズ@31mskz10

1997年生まれ。2016年から専門学校でデザインについて勉強。卒業後は神戸の制作会社「N'sCreates」にウェブデザイナーとして入社。このブログでは自分の備忘録も兼ねて、ウェブに関する記事や制作環境を効率的に行うための記事を書いています。

Twitterをフォロー Facebookでいいね