Visual Studio Code（VS Code）は、Microsoftが提供する無料のコードエディタです。豊富な拡張機能によって自分好みの開発環境を作れるのが魅力で、世界中のエンジニアに利用されています。
この記事では、開発効率を高めてくれるおすすめの拡張機能を紹介します。
コーディング効率アップ系
Prettier — Code formatter
コードを保存するだけで自動的にフォーマットしてくれます。インデントや改行のスタイルを統一でき、チーム開発では必須とも言える拡張機能です。
ESLint
JavaScriptやTypeScriptのコードを静的解析し、潜在的なバグやスタイルの問題を指摘してくれます。Prettierと組み合わせて使うのが定番です。
Auto Rename Tag
HTMLのタグを変更すると、対応する閉じタグも自動的にリネームされます。地味ですが、手動で両方を修正する手間がなくなり快適です。
Path Intellisense
ファイルパスを入力する際に候補を自動補完してくれます。import文を書くときに特に便利です。
見た目・ナビゲーション系
Material Icon Theme
ファイルやフォルダのアイコンを分かりやすいデザインに変更します。ファイルの種類がひと目でわかるようになります。
GitHub Copilot活用ガイドも参考にしてください。
Bracket Pair Colorizer（内蔵機能）
VS Codeには括弧のペアを色分けする機能が標準搭載されています。設定からEditor: Bracket Pair Colorizationを有効にしましょう。
ターミナル入門も参考にしてください。
indent-rainbow
インデントレベルを色分け表示します。Pythonのようなインデントが重要な言語で特に役立ちます。
Git関連
GitLens
Git操作を強力に支援する拡張機能です。各行の変更履歴をインライン表示したり、ファイルの変更者を確認したりできます。
Git Graph
Gitのブランチ構造をグラフィカルに表示します。マージやリベースの状況を視覚的に把握できます。
言語・フレームワーク別
ES7+ React/Redux/React-Native snippets
Reactの定型コードをスニペットで素早く入力できます。rafceと打つだけでコンポーネントの雛形が生成されます。
Python
Python開発に必要な機能（IntelliSense、リンター、デバッガー）がまとめて入っています。Python開発をするなら必須です。
Thunder Client
VS Code内でAPIリクエストを送信・テストできます。Postmanの代替として軽量で使いやすいです。
設定のポイント
拡張機能を入れすぎると起動が遅くなることがあります。使わない拡張機能は無効化し、プロジェクトごとに必要な拡張機能だけを有効にするのがおすすめです。
関連記事：プログラミングPC選び方で開発環境全体を整えましょう。Git・GitHub入門もあわせてご覧ください。
まとめ
VS Codeの拡張機能を活用すれば、コーディングの効率が大幅に向上します。まずは基本的なものから導入し、エンジニアリモートワーク環境の記事も参考にしながら、自分に合った環境を構築しましょう。
