基本的な拡張機能はひと通り入れた。次は何を入れればいい？という段階の人向けに、知る人ぞ知る便利な拡張機能をまとめた。
初心者向けの定番拡張機能（Japanese Language Pack、Prettier、Live Serverなど）と重複しないものを厳選している。どれも地味に作業効率が上がるものばかりだ。
Error Lens
エラーや警告をコードの行末にインラインで表示してくれる拡張機能。通常はエラーが出ても赤いアンダーラインが引かれるだけだが、Error Lensを入れると「何が問題なのか」がその行のすぐ右に表示される。いちいちマウスをホバーしてエラー内容を確認する手間がなくなる。
REST Client
VSCode内でHTTPリクエストを送れる拡張機能。.httpという拡張子のファイルにリクエストを書いて実行するだけで、レスポンスがすぐ横のタブに表示される。PostmanやInsomniaを別途起動する必要がなくなり、リクエストの内容もファイルとして保存・管理できる。APIの動作確認をVSCodeだけで完結させたい人にオススメだ。
GET https://api.example.com/users
Authorization: Bearer your-token-hereこういった内容を.httpファイルに書いて「Send Request」をクリックするだけで動く。
Todo Tree
コード内のTODOやFIXME、HACKといったコメントをサイドバーにツリー形式でまとめて表示してくれる拡張機能。「あとで直す」と書いたコメントがどのファイルのどの行にあるかを一覧で把握できる。プロジェクトが大きくなると特に助かる。
CSS Peek
HTMLファイルのクラス名やIDにカーソルを合わせてCtrlキーを押しながらクリックすると、そのCSSの定義箇所にジャンプできる拡張機能。HTMLとCSSを行ったり来たりしてクラス名を検索する手間がなくなる。ファイルをまたいでも機能するのが便利だ。
Turbo Console Log
デバッグ用のconsole.log()を自動で挿入してくれる拡張機能。変数名を選択してCtrl+Alt+Lを押すだけで、変数名と値を出力するconsole.logがその下の行に自動挿入される。手打ちでconsole.logを書く手間が減り、挿入されたconsole.logをまとめて削除する機能もある。
Peacock
VSCodeのウィンドウ枠に色をつけられる拡張機能。複数のプロジェクトを同時に開いているとき、どのウィンドウがどのプロジェクトか一目で分かるようになる。フロントエンドのウィンドウは青、バックエンドは赤、といった使い方ができる。地味だが複数プロジェクトを掛け持ちしている人には刺さる拡張機能だ。
Project Manager
よく使うプロジェクトのフォルダをブックマークしておき、サイドバーから一発で切り替えられる拡張機能。Gitリポジトリを自動で検出してリスト表示する機能もある。プロジェクトが増えてきた人には特に便利だ。
Easy CodeSnap
コードをきれいなスクリーンショットとして保存できる拡張機能。背景のぼかしや影が自動でついて、SNSやブログに貼るとおしゃれに見える。コードを人に共有するときに使うと「どうやって撮ったの？」と聞かれることが多い。
Trailing Spaces
行末の不要なスペースをハイライト表示してくれる拡張機能。普段は気にしないかもしれないが、Gitでdiffを見るときに余分なスペースが差分として検出されて邪魔になることがある。Prettierで自動整形している場合は不要だが、整形できないファイル形式を触る機会が多い人には役立つ。
Import Cost
JavaScriptやTypeScriptでライブラリをimportした際に、そのパッケージのファイルサイズをインラインで表示してくれる拡張機能。「このライブラリを入れたらバンドルサイズがどれくらい増えるか」がコードを書きながら分かる。パフォーマンスを意識したWeb開発をしている人にオススメだ。
まとめ
- Error Lens — エラー内容をインライン表示
- REST Client — VSCode内でHTTPリクエスト
- Todo Tree — TODO/FIXMEを一覧管理
- CSS Peek — クラス名からCSS定義にジャンプ
- Turbo Console Log — console.logを自動挿入
- Peacock — ウィンドウに色をつけてプロジェクトを区別
- Project Manager — プロジェクトをブックマークして切り替え
- CodeSnap — コードをおしゃれなスクリーンショットに
- Trailing Spaces — 行末スペースをハイライト
- Import Cost — importライブラリのサイズを表示
どれも知名度はそこまで高くないが、使い始めると手放せなくなるものばかりだ。気になったものから試してみてほしい。
Add comment