話題の記事

コードの視認性アップ!? VS Code 拡張機能「Bracket Lens」で閉じ括弧のスコープを見える化しよう

2020.10.23

はじめに

前回書いた VS Code 拡張機能「vscode-random」紹介記事がビックリするほどバズったので、今回もまた拡張機能の紹介します✌

今回紹介するのは10/21にリリースされたばかりの拡張機能の「Bracket Lens」です。v1.0.0 の出来立てほやほや拡張機能です。

https://marketplace.visualstudio.com/items?itemName=wraith13.bracket-lens

機能説明

ざっくり機能説明しますとタイトル通り「閉じ括弧のスコープを表示してくれる拡張機能」です。

下記のスクリーンショット(GitHub リポジトリより引用)の四角で囲まれた部分の閉じ括弧の後ろに、開始行の情報が付与されているのがお分かりいただけると思います。

bracket-lens-vscode-screenshot

これによりネストの深くなってしまい、コード後半が閉じ括弧まみれになってしまっても、スコープが見える化されるので安心ですね。(要リファクタリング!)

注意事項

ただし現状は一部の言語は対応していないそうです。

TypeScript や Java は特に設定なく使えます。 Ruby のような丸括弧を多用する言語は設定でなんとかできるようです。

Python のようなインデントでスコープされた言語に関しては非対応となっています。

関連するおすすめ拡張機能

私はインデントやブラケットに関わる拡張機能として、以下の2つを導入しています。

これらの拡張機能を導入することで視認性が高く賑やかなコーディング生活を送っています。

bracket-lens-vscode-screenshot2

コードは前回の CDK のサンプルコードです

最後に

VS Code は単体でも十分高機能ですが、拡張機能を組み合わせることでより快適になります。

ネストが深く対応する括弧をすぐ見失ってしまうような複雑なコードを読むのに Bracket Lens を用いてみてはいかがでしょうか。

(見た目が複雑ってことはコードが複雑なのでリファクタリングも頑張りましょう! ……頑張ります💪)