コードの視認性アップ!? VS Code 拡張機能「Bracket Lens」で閉じ括弧のスコープを見える化しよう
はじめに
前回書いた VS Code 拡張機能「vscode-random」紹介記事がビックリするほどバズったので、今回もまた拡張機能の紹介します✌
今回紹介するのは10/21にリリースされたばかりの拡張機能の「Bracket Lens」です。v1.0.0 の出来立てほやほや拡張機能です。
https://marketplace.visualstudio.com/items?itemName=wraith13.bracket-lens
機能説明
ざっくり機能説明しますとタイトル通り「閉じ括弧のスコープを表示してくれる拡張機能」です。
下記のスクリーンショット（GitHub リポジトリより引用）の四角で囲まれた部分の閉じ括弧の後ろに、開始行の情報が付与されているのがお分かりいただけると思います。
これによりネストの深くなってしまい、コード後半が閉じ括弧まみれになってしまっても、スコープが見える化されるので安心ですね。（要リファクタリング！）
注意事項
ただし現状は一部の言語は対応していないそうです。
TypeScript や Java は特に設定なく使えます。 Ruby のような丸括弧を多用する言語は設定でなんとかできるようです。
Python のようなインデントでスコープされた言語に関しては非対応となっています。
関連するおすすめ拡張機能
私はインデントやブラケットに関わる拡張機能として、以下の2つを導入しています。
- インデントの空白を虹色で色分けしてくれる indent-rainbow
- 対応する括弧を色分けしてくれる Bracket Pair Colorizer 2
これらの拡張機能を導入することで視認性が高く賑やかなコーディング生活を送っています。
最後に
VS Code は単体でも十分高機能ですが、拡張機能を組み合わせることでより快適になります。
ネストが深く対応する括弧をすぐ見失ってしまうような複雑なコードを読むのに Bracket Lens を用いてみてはいかがでしょうか。
（見た目が複雑ってことはコードが複雑なのでリファクタリングも頑張りましょう！ ……頑張ります?）
