VS Code拡張機能 厳選15選 2026｜カテゴリ別に選ぶ開発効率化ツール
開発ツール New

VS Code拡張機能 厳選15選 2026｜カテゴリ別に選ぶ開発効率化ツール

2026年版VS Code拡張機能ガイド。GitHub Copilot・Continue・Error Lens・GitLensなど、AI支援・コード品質・Git連携・言語別サポートの4カテゴリから厳選15個を紹介。入れすぎによるパフォーマンス低下を防ぐ選定基準とプロファイル活用法も解説する。

VS Code 開発ツール AI 拡張機能 生産性

VS Code拡張機能 厳選15選 2026｜カテゴリ別に選ぶ開発効率化ツール

VS Codeの拡張機能は5万件を超える。Marketplace で「おすすめ」を検索すると無数のリストが出てくるが、実際に使い続ける拡張機能は10個前後に落ち着くものだ。

本記事では「入れるべき理由が明確」な15個をカテゴリ別に厳選した。選定基準は3つ——動作が軽い、代替が少ない、設定なしで効果が出る。

拡張機能の選定基準

拡張機能を入れすぎると、VS Codeの起動時間とメモリ消費量が増加する。実測では、拡張機能30個で起動時間が約2倍になるケースも確認されている。

選定の3原則

  1. 起動コストが低い: Activation Event が限定的で、常時ロードされない
  2. 機能の重複がない: 既存の拡張機能やVS Code標準機能と被らない
  3. メンテナンスが継続している: 直近6ヶ月以内にアップデートがある

拡張機能の起動コストは、コマンドパレットで Developer: Show Running Extensions を実行すると確認できる。Activation Time が 100ms を超える拡張機能は見直し候補だ。

カテゴリ1: AI支援（3選）

2026年のVS Code開発において、AI支援は選択肢ではなく前提になった。ここでは用途が異なる3つを紹介する。

1. GitHub Copilot

AI コード補完の事実上の標準。Tab キーで候補を受け入れるだけの操作性が定着率の高さにつながっている。

  • 月額: $10（Individual）/ $19（Pro、2025年12月〜）
  • 対応言語: ほぼすべて（TypeScript、Python、Go、Rust で特に精度が高い）
  • 注目機能: Copilot Chat（エディタ内でコードについて質問）、Copilot Edits（複数ファイルの一括編集提案）

Copilot ProではClaude、Gemini、GPT-4oなど複数モデルを切り替え可能。モデルごとの得意領域を使い分けられる点が2026年の大きな進化だ。

2. Continue

オープンソースのAIコーディングアシスタント。Copilotとの最大の違いは、ローカルLLM（Ollama経由）を含む任意のモデルを接続できる点にある。

  • 価格: 無料（OSS）
  • 特徴: モデル選択の自由度、コンテキスト管理のカスタマイズ性
  • 向いている人: プライバシーを重視する開発者、社内LLMを活用したいチーム

設定ファイル .continue/config.json でモデルの切り替えやプロンプトテンプレートを制御できる。

3. Cody（Sourcegraph）

リポジトリ全体を理解した上でコードを提案するAIアシスタント。個別ファイルではなく、プロジェクト横断の文脈を把握する点が特徴だ。

  • 価格: Free（個人）/ Pro $9/月
  • 特徴: リポジトリ全体のインデックス化、大規模コードベースでの精度
  • 向いている人: 数百ファイル以上の大規模プロジェクトに携わる開発者

AI拡張機能の選び方

条件推奨
チーム開発で統一したいGitHub Copilot
ローカルLLMを使いたいContinue
大規模リポジトリで精度重視Cody

3つすべてを入れる必要はない。チーム方針に合わせて1つ選ぶのが現実的だ。

カテゴリ2: コード品質（5選）

4. Error Lens

エラーと警告をエディタ上にインライン表示する。Problems パネルを開かなくても、該当行の右端にエラーメッセージが赤文字で表示される。

  • 効果: エラー発見までの時間を体感で3-5秒短縮
  • 設定不要: インストールするだけで動作
  • 注意点: 情報過多に感じる場合は errorLens.enabledDiagnosticLevels で Warning を非表示にする

5. ESLint

JavaScript / TypeScript のリンター。コードスタイルの統一と潜在的なバグの早期発見を担う。

  • 前提: プロジェクトに .eslintrc または eslint.config.js が必要
  • 推奨設定: "editor.codeActionsOnSave": { "source.fixAll.eslint": "explicit" } で保存時自動修正
  • 注意点: Flat Config（eslint.config.js）への移行が2026年の標準。.eslintrc 形式は非推奨

6. Prettier - Code formatter

コードフォーマッター。ESLintがロジックの品質を担い、Prettierが見た目の統一を担う。役割は明確に分かれている。

  • 推奨設定: "editor.defaultFormatter": "esbenp.prettier-vscode" + "editor.formatOnSave": true
  • ESLintとの共存: eslint-config-prettier を使って競合ルールを無効化
  • 対応形式: JS/TS/CSS/HTML/JSON/YAML/Markdown

7. Import Cost

import 文のバンドルサイズをインラインで表示する。moment.js（72KB）のような重いライブラリの混入を、コードレビュー前に気づける。

  • 表示: import dayjs from 'dayjs' → 行末に 2.9K (gzipped) と表示
  • 活用場面: ライブラリ選定時の判断材料
  • 類似拡張: Bundle Size も同等の機能を持つ

8. Todo Tree

コード内の TODO、FIXME、HACK、BUG コメントをツリービューに集約表示する。散在する技術的負債を一覧できる。

  • カスタマイズ: todo-tree.general.tags で検索対象タグを追加可能
  • 活用例: PR作成前に FIXME が残っていないか確認
  • 表示: サイドバーにファイル別・タグ別でグルーピング

カテゴリ3: Git連携（3選）

9. GitLens

VS Code標準のGit機能を大幅に拡張する。各行の最終変更者と日時がインラインで表示される Current Line Blame が最も使用頻度が高い。

  • 主要機能: Blame表示、ファイル履歴、ブランチ比較、コミットグラフ
  • 無料範囲: 個人利用はほぼ全機能無料
  • パフォーマンス: 大規模リポジトリ（10万ファイル超）では起動が遅くなる場合がある

10. Git Graph

コミット履歴をグラフで視覚化する。ブランチの分岐・マージの流れを直感的に把握できる。

  • 使い方: ソース管理パネルの「Git Graph」ボタンをクリック
  • GitLensとの棲み分け: GitLensはインライン情報、Git Graphは全体俯瞰

11. Conventional Commits

コミットメッセージを feat: fix: refactor: などの規約に沿って入力するUIを提供する。

  • 操作: ソース管理パネルのコミットメッセージ欄で起動
  • 効果: チーム全員のコミットメッセージ形式を統一
  • 設定: conventionalCommits.scopes でプロジェクト固有のスコープを定義可能

カテゴリ4: 言語・フレームワーク別（4選）

12. Astro（Astro開発者向け）

Astroフレームワークの公式拡張機能。.astro ファイルのシンタックスハイライト、型チェック、コード補完を提供する。

  • 必須度: Astroプロジェクトでは事実上必須
  • 機能: TypeScript統合、コンポーネントpropsの補完、Frontmatter内の型チェック

13. Tailwind CSS IntelliSense（Tailwind開発者向け）

Tailwind CSSのクラス名補完、ホバープレビュー（実際のCSSプロパティを表示）、リント機能を提供する。

  • 必須度: Tailwind CSSプロジェクトでは事実上必須
  • 注目機能: クラス名のソート（tailwindCSS.experimental.classRegex でカスタムパターンにも対応）

14. Prisma（データベース開発者向け）

Prismaスキーマファイル（.prisma）のシンタックスハイライト、補完、フォーマットを提供する。

  • 機能: モデル定義の補完、リレーション先のジャンプ、スキーマの自動フォーマット
  • 代替: Drizzle ORM利用者は「Drizzle ORM」拡張機能を検討

15. REST Client

エディタ内からHTTPリクエストを送信できる。.http ファイルに記述したリクエストを Send Request で実行し、レスポンスが隣のタブに表示される。

  • Postmanとの違い: テキストベースのため、Gitで管理できる
  • 活用場面: API開発時の動作確認、チーム共有用のリクエスト集
  • 記法例:
GET https://api.example.com/users
Authorization: Bearer {{token}}

###

POST https://api.example.com/users
Content-Type: application/json

{
  "name": "test"
}

プロファイル機能で拡張機能を整理する

VS Codeのプロファイル機能（2023年〜）を使うと、プロジェクト種別ごとに有効化する拡張機能を切り替えられる。

プロファイル設定の手順

  1. コマンドパレットで Profiles: Create Profile を実行
  2. プロファイル名（例: Frontend, Backend, Writing）を入力
  3. 必要な拡張機能のみを有効化

プロファイル例

プロファイル有効化する拡張機能
FrontendCopilot, ESLint, Prettier, Tailwind, Error Lens, GitLens
BackendCopilot, ESLint, Prettier, Prisma, REST Client, GitLens
WritingMarkdown All in One, Grammarly, Git Graph

プロファイルはウィンドウ単位で切り替え可能。フォルダを開く際に自動適用する設定もある。

パフォーマンスを維持する管理術

定期的な棚卸し

四半期に一度、以下を確認する。

  1. Developer: Show Running Extensions で Activation Time を確認
  2. 使っていない拡張機能を無効化（アンインストールでなく無効化で十分）
  3. 類似機能の重複がないか確認（例: 複数のフォーマッター）

拡張機能の数の目安

拡張機能数起動への影響推奨度
10個以下ほぼなし理想的
11-20個軽微許容範囲
21-30個体感できる見直し推奨
31個以上明確に遅い要整理

まとめ

拡張機能は「足し算」ではなく「引き算」で考える。VS Codeの標準機能は年々強化されており、以前は拡張機能が必要だった機能（ブラケットペアの色分け、スティッキースクロールなど）が標準搭載されるケースも多い。

本記事で紹介した15個は、2026年2月時点で「標準機能では代替できない」ものに絞っている。この中から自分の開発スタイルに合うものを選び、プロファイル機能で管理すれば、軽量かつ効率的な開発環境が構築できる。

あわせて読みたい