今回は、Bracket Pair Colorizerが非推奨になった代わりにvscode標準機能になったので、後者を使うようにしましょう記事です。
Bracket Pair Colorizerとは？
コードの括弧の色付けが入るvscodeの拡張機能の一つです。
コードの視認性が爆上がりする機能のためvscodeオススメ拡張機能の定番として、多くの人に愛されてきました。
非推奨になってからの流れ
※さっさと標準機能をオンする方法だけ見たい人はここの節は飛ばしてください。
ところがこの拡張機能、実は2021年6月に非推奨になっていたのをご存知でしょうか？
お知らせはこちらのコミットのCHANGELOG.mdから確認できます。このときはまだ標準機能が登場してなかったため代替の拡張機能が案内されていました。ただ案内されていた拡張機能の評判は乏しく結局使い続ける人が大多数だった記憶があります。
非推奨になった原因は定かではありませんが、拡張機能を有効化するとvscodeのパフォーマンスが悪化する問題を解決できなかったこと、それによってメンテナンスする意欲がなくなってしまったのではないかと推測されています。
この流れが続くのかと思われましたが2ヶ月後の8月、vscode公式から大ニュースが発表されました。
なんとBracket Pair Colorizerとほぼ同等の機能がvscode標準機能として搭載されること、そしてパフォーマンス改善がなされた上でというニュースでした。
そのあともバージョンアップを重ね現在進行系で改善が続いています。標準機能として搭載することになった経緯や改善秘話を詳しく知りたい人はこちらの記事が詳しいです。
vscodeで括弧の色付け機能をOnにする
vscodeバージョン1.67以降を使用している場合は、デフォルトでonになっているため対応不要です。
以下バージョン1.66以前使っている人向けの手順です。
cmd（windowsはctrl）+,で設定を開き、
検索ボックスにbracketと入力し、bracketPairColorizationにチェック/bracketPairsをactiveに変更
もしくはsetting.jsonを開いて以下を追加する形でも可能です。
{
+ "editor.bracketPairColorization.enabled": true,
+ "editor.guides.bracketPairs":"active"
}
するとこんな感じで設定されているはず。
コードを開いて、括弧を選択すると色付けされていてどこからどこまでネストされているかが見やすくなります。
※画像はtsxファイル
Bracket-Pair-Colorizer-2のREADMEでも先頭で親切に案内されています。
もうメンテナンスされていない拡張機能を使うのはあまりよろしくないのと、vscodeのパフォーマンス的に優しいので、これからは標準機能を使っていこうねっていう話でした。
今回は以上です。