doodle-on-web

自分で調べたことや、仕事の中で質問されたことなどをまとめています。

現場エンジニアが厳選したVSCode拡張機能15選

スポンサーリンク

コードの書式を直すだけのレビューコメント、もう終わりにしませんか？「インデントがズレてる」「クォートを統一して」——こうした指摘はツールで完全に自動化できます。今回は実際の開発現場で導入実績のあるVSCode拡張機能を、選定理由とともに厳選してご紹介します。

✅ この記事はこんな人におすすめ

  • VSCodeを使い始めたばかりで、何を入れればいいか迷っている人
  • なんとなく使っているけど、もっとサクサク書きたい中級者
  • チームに「まずこれを入れろ」と自信を持って言える根拠が欲しい人

迷ったらまずこの3つ：Error Lens・Prettier・GitLens この3つだけでも、今日から開発体験が変わります。

🔧 コーディング効率を上げる拡張機能

1. GitHub Copilot｜有料でも投資対効果が最も高いAI補完

AIがコードをリアルタイムで補完してくれる、現在最も実用レベルの高い拡張機能です。関数名やコメントを書くだけで実装コードをサジェストし、ボイラープレート作成・テストコード生成・コメントからの実装に威力を発揮します。

月額$10〜の有料プランですが、学生・OSSコントリビューターは無料で利用可能。「有料でも構わないのでとにかく補完精度を最大化したい」という人の第一選択肢です。

2. Tabnine｜コードを社外に送りたくない環境での最有力候補

GitHub Copilotの有力な代替ツール。最大の差別化ポイントはローカルモデルで動作できることです。コードが外部サーバーに送信されないため、セキュリティポリシーが厳しい企業・プロジェクトでも導入しやすい。無料プランでも実用レベルの補完が使えます。

選択基準： セキュリティ要件がある → Tabnine

3. IntelliCode｜まず無料で試したいならここから

Microsoftが開発したAI補完機能。完全無料で使えるうえ、VSCodeとの親和性が高く、既存のコードパターンを学習して文脈に合った補完を提供します。Python・JavaScript・TypeScript・Javaに対応。「AI補完を試してみたいが費用はかけたくない」という人の入門として最適です。

選択基準： まず無料で試したい → IntelliCode

4. Prettier｜「フォーマット議論」をチームから永久になくす

保存と同時にコードを自動整形する、フォーマッター界の定番。他のフォーマッターと一線を画すのは「設定ゼロでも即使える」点です。.prettierrc でチーム共通設定を管理すれば、インデントやクォートの統一問題が完全に解消されます。

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

5. ESLint｜Prettierと組み合わせて「品質」まで自動管理

JavaScript・TypeScriptのコードを静的解析し、バグになりそうな箇所を事前に検出します。Prettierが見た目を整えるのに対し、ESLintはロジックの品質を守る役割。この2つはセットで導入するのが現場の標準です。

6. Error Lens｜「これなしに戻れない」と感じる筆頭候補

エラーや警告を該当行にインライン直接表示してくれます。ターミナルやパネルに目を移す必要がなくなり、バグ発見から修正までのサイクルが圧倒的に短縮されます。他の類似機能と違い、ホバー不要でエラー内容が常時見えるのが大きな強みです。

🎨 UI・視認性を改善する拡張機能

7. One Dark Pro｜ダウンロード数1位が証明する目への優しさ

VSCode拡張機能の中でも最多ダウンロードクラスのカラーテーマ。長時間のコーディングでも目が疲れにくい配色設計が支持される理由で、複数のバリエーションから好みに合わせて選択できます。

8. Material Icon Theme｜大規模プロジェクトほど効果を実感

ファイルツリーのアイコンをMaterial Designベースに変更します。ファイルの種類が視覚的に一瞬でわかるようになり、ファイル数が多いプロジェクトでのナビゲーション速度が向上します。

9. indent-rainbow｜PythonやYAML書くなら入れて損なし

インデントレベルを色分け表示します。インデントが構文に直接影響するPythonやYAMLでは特に重要で、ネストが深いコードの読み解きが楽になります。他のインデント可視化ツールと違い、無効なインデントを赤くハイライトしてくれる点が実用上の差別化ポイントです。

10. Path Intellisense｜ファイルパスの入力ミスをゼロに

ファイルパスの入力中に候補を自動補完してくれます。import 文やHTML内のパスを手入力する際のタイポ・ミスが劇的に減ります。シンプルながら地味に効いてくる、導入必須の一本です。

💡 補足： 以前よく紹介されていた「Bracket Pair Colorizer 2」はVSCode本体に統合済みです。"editor.bracketPairColorization.enabled": true を settings.json に追加するだけで有効になります。拡張機能のインストールは不要です。

🛠 開発ワークフローを改善する拡張機能

11. GitLens｜「なぜこのコードがあるのか」を一瞬で解明

Gitの変更履歴をコードにオーバーレイ表示します。誰がいつその行を変更したか（git blame）がエディタ上で確認でき、コードレビューやデバッグ時の「なぜこう書いたのか」追跡が劇的に効率化されます。標準のGit連携と比べると情報量と操作性が段違いです。

12. REST Client｜Postmanを開く手間をなくす

.http ファイルにリクエストを書くだけでAPI テストが完結します。PostmanやInsomniaと違いリクエストをファイルとして管理・Gitで共有できるため、チーム全員が同じリクエスト定義を使い回せるのが最大の強みです。

GET https://api.example.com/users
Authorization: Bearer {{token}}

13. Docker｜コンテナ操作をGUIで完結させる

Dockerコンテナの起動・停止・ログ確認・アタッチをVSCode上のGUIで操作できます。docker コマンドを都度打つ手間がなくなり、コンテナを使った開発フローがスムーズになります。

14. Live Share｜リモートペアプロが「相手の環境構築ゼロ」で始まる

チームメンバーとリアルタイムでコードを共同編集できます。他のリモートペアプロツールと決定的に違うのは、相手が環境構築不要・ブラウザだけで参加できる点です。コードレビューや障害対応時の迅速なコラボレーションに即戦力となります。

15. Todo Tree｜散らばったTODOを「ゼロ見落とし」で管理

コード中の TODO や FIXME コメントをサイドバーに一覧表示します。スクロールして探す必要がなくなり、タスクの見落としが防げます。チェックボックス形式での管理もでき、個人・チーム開発どちらにも対応します。

💡 拡張機能を快適に使い続けるための3つのコツ

拡張機能を入れすぎるとVSCodeのパフォーマンスが低下します。長く快適に使うために以下を意識してください。

  1. 使っていない拡張機能は「無効化」で管理する ── 削除しなくていい。ワークスペース単位でオン/オフできる
  2. 言語ごとにワークスペース設定を分ける ── PythonプロジェクトではPython系だけ有効、など最適化できる
  3. 3ヶ月に一度は棚卸しする ── 「本当に使っているか」を定期的に見直すだけで動作が軽くなる

まとめ

カテゴリ 拡張機能 特に向いている人
AI補完 GitHub Copilot 有料OKで補完精度を最大化したい
AI補完 Tabnine セキュリティ要件がある
AI補完 IntelliCode まず無料で試したい
コード品質 Prettier / ESLint チーム開発・コードレビューを効率化したい
エラー確認 Error Lens 全員におすすめ
Git連携 GitLens コードの経緯を追う機会が多い
API開発 REST Client バックエンド・フルスタック開発者
チーム開発 Live Share リモートワーク中心のチーム

今すぐ始めるなら、まずこの3つを入れてください。

  1. Error Lens ── エラーが行に直接見えるようになる
  2. Prettier ── 保存するだけでコードが整う
  3. GitLens ── コードの「なぜ」が即座にわかる

拡張機能のインストールは Ctrl+Shift+X（Mac: Cmd+Shift+X）から。1つ入れるたびに開発体験が積み上がっていきます。