拡張機能の数が多すぎて、何を入れるべきか迷っていませんか。
この記事では、How-To Geekが実務で使い続けているVS Code拡張機能10個を整理します。コード整形からリモート開発、リアルタイム共同編集まで、開発の現場で効くツールの役割と組み合わせ方がわかります。
この記事でわかること
- タスク管理・整形・Lint・デバッグに効く拡張機能の選び方
- PrettierとESLintをセットで使う理由
- リモートサーバーやペアプログラミングをVS Code内で完結させる方法
拡張機能が多すぎる問題
Visual Studio Code（VS Code）は、言語ごとの補完やデバッグを標準で備えたエディタです。一方で、マーケットプレイスには数万件の拡張機能があり、入れすぎると起動が重くなり、入れなさすぎると作業が遅くなります。
新規プロジェクトを開くと、Java向けのIntelliSenseやPython向けツールなど、言語特化の拡張をVS Codeが提案してくれます。ただし、言語に依存しない「実務の土台」となる拡張は、自分で選ぶ必要があります。ここでは、プロジェクトの種類を問わず効果が出やすい10個に絞ります。
Todo Treeで未完了タスクを一覧化する
大規模なコードベースでは、TODOやFIXMEのコメントがファイルのあちこちに散らばります。見落とすと、リリース直前に技術的負債が表面化しやすくなります。
Todo Treeは、TODO・FIXME・NOTEなどのコメントタグをハイライトし、サイドバーに一覧表示します。該当行へジャンプできるため、残タスクの洗い出しと優先順位づけが短時間で終わります。複数人で開発するプロジェクトほど、コメントベースのタスク管理を可視化する価値が高まります。
Prettierでコード整形を統一する
チーム開発でよく起きるのが、インデントやクォートの好みの違いです。レビューでスタイル議論に時間を取られると、本質的なロジックの確認が後回しになります。
Prettierは、コードを解析して独自ルールで再出力するフォーマッターです。JavaScript、TypeScript、JSON、CSS、HTML、Markdownなど幅広い言語に対応し、ショートカット一発で整形できます。マーケットプレイスでのインストール数は約6,960万回に達しており、事実上の業界標準と言えます。
プロジェクトのnode_modulesにPrettierが入っていれば、そのバージョンが優先されます。editor.formatOnSaveを有効にすると、保存のたびに整形が走り、手動での整形忘れを防げます。
Live Serverでブラウザ確認を即時化する
フロントエンド開発では、ファイル保存のたびにブラウザを手動リロードする作業が積み重なります。HTMLやCSSの微調整ほど、この往復がストレスになります。
Live Serverは、ローカル開発サーバーを立ち上げ、ファイル保存時にブラウザを自動更新します。ステータスバーの「Go Live」から起動でき、HTMLファイルを右クリックして開く方法もあります。静的ページだけでなく、PHPなどサーバーサイドのページにも対応しており、インストール数は約7,970万回と、Web開発者の定番ツールです。
ESLintでJavaScriptとTypeScriptの品質を守る
構文ミスや潜在的なバグは、実行して初めて気づくことも多いです。本番環境に届く前に検出できれば、修正コストは大幅に下がります。
ESLintは、JavaScriptとTypeScript向けのLintツールです。構文エラーの検出、コーディング規約の強制、問題のあるパターンの警告をエディタ内で行います。多くの開発者がPrettierと併用し、Prettierが見た目の整形、ESLintが論理面のチェックを担当する構成にしています。VS Codeのeditor.codeActionsOnSaveで両方を保存時に走らせる設定も、公式ドキュメントで推奨されています。
Error Lensでエラーを行内に表示する
VS Code標準のProblemsパネルは、エラー一覧を別ウィンドウで見る方式です。編集中の行とエラー内容が離れるため、確認のたびに視線を移す必要があります。
Error Lensは、エラーや警告のメッセージを該当行の横に直接表示します。ESLintやTypeScriptの診断結果とも連携するため、タイプしながら問題箇所を即座に把握できます。デバッグにかかる時間の短縮に直結する拡張です。
Code Spell Checkerで誤字を防ぐ
変数名やコメントのスペルミスは、検索やドキュメント参照の障害になります。英語以外の辞書が必要な場合も、見逃しがちです。
Code Spell Checkerは、コード内のコメントや識別子に対してスペルチェックを行います。英語以外の言語向けアドオン辞書も用意されており、チームで共有するコードベースほど、表記ゆれの防止に効果的です。
GitLensで変更履歴をエディタ内で追う
「この行は誰が、いつ、なぜ変えたのか」は、大規模チームでは頻繁に出る問いです。Gitのログをターミナルで追うと、調査だけで時間が溶けます。
GitLensは、VS Code標準のGit機能を拡張するツールです。行末にインラインブレーム（変更者と日時）を表示し、ファイル先頭にはCodeLensで直近の変更情報を出します。コミット履歴の探索や差分比較もエディタ内で完結します。インストール数は約5,090万回で、GitKrakenが開発・保守するオープンソース拡張です。無料のCommunity版でも、ブレーム表示やホバーによる詳細確認が使えます。
Gitignoreで.gitignoreを素早く作る
不要なファイルをGitに含めると、リポジトリが肥大化し、誤コミットのリスクも上がります。言語やフレームワークごとに除外ルールが異なるため、毎回ゼロから書くのは手間です。
Gitignore拡張は、Python、Node.js、Javaなど主要なスタック向けの.gitignoreテンプレートを数クリックで生成します。新規プロジェクトの初期設定を短縮でき、チーム全員が同じ除外ルールから始められます。
Remote – SSHでリモート環境をローカル感覚で操作する
クラウド上のサーバーや本番に近いLinux環境で開発する場合、ファイル転送とエディタの往復がボトルネックになります。ローカルとリモートで環境がずれると、「自分のPCでは動く」問題も起きます。
Remote – SSHは、SSH接続先のマシンをVS Codeの開発環境として開くMicrosoft公式拡張です。ソースコードはリモート側に置いたまま、補完・デバッグ・ターミナル操作をVS CodeのUIから行えます。Debian、Ubuntu、CentOS、Raspberry Pi、WindowsのOpenSSH Server、macOSなどがサポート対象です。インストール数は約3,560万回で、クラウド開発やインフラ寄りの作業に欠かせないツールです。
Live Shareで画面共有なしの共同編集を実現する
ペアプログラミングやコードレビューでは、画面共有に切り替えるたびに作業が止まります。参加者それぞれのエディタ設定やカーソル位置を維持したまま協業できれば、議論のテンポが上がります。
Live Shareは、Microsoftが提供するリアルタイム共同開発拡張です。ホストがセッションURLを共有すると、ゲストはリポジトリのクローンやSDKのインストールなしで参加できます。各人は自分のテーマやキーバインドを保ったまま編集でき、カーソル位置も個別に表示されます。デバッグセッション、ターミナル、localhost上のWebアプリの共有にも対応しており、インストール数は約2,370万回です。初回利用時はGitHubまたはMicrosoftアカウントでのサインインが必要です。
10個の拡張をどう組み合わせるか
入れる順番に決まりはありませんが、実務では次の層に分けると選びやすくなります。
品質の土台 — Prettier、ESLint、Error Lens、Code Spell Checker。保存時整形とLintを先に整えると、以降の作業でエラーに気づきやすくなります。
履歴とタスク — GitLens、Todo Tree、Gitignore。変更の追跡と残タスク管理をエディタ内に集約します。
環境と協業 — Live Server、Remote – SSH、Live Share。ローカルプレビュー、リモート開発、共同編集を用途別に使い分けます。
拡張を増やしすぎるとVS Codeの起動が重くなるため、まずは品質の土台4つと、自分の作業スタイルに直結するものを2〜3個から始めるのが現実的です。AI補完ツールを併用する場合も、整形やLintは専用拡張に任せた方が、生成コードの品質を安定させやすくなります。
VS Codeは単体でも強力ですが、用途に合った拡張を選ぶことで、デバッグ・整形・共同作業の往復が目に見えて減ります。自分のスタックに合わせて、まず1つ試し、効果を感じたものから順に足していくのがおすすめです。