【2026年最新】VS Code必須拡張機能30選｜生産性を爆上げするおすすめ

「VS Codeをもっと便利に使いたい」「おすすめの拡張機能を知りたい」

VS Code（Visual Studio Code）は、拡張機能で無限にカスタマイズできるのが魅力です。この記事では、2026年現在おすすめの拡張機能をカテゴリ別に厳選して紹介します。

AI・コード補完

GitHub Copilot（有料: $10/月）

AIによるコード補完の決定版。コメントやコードの文脈から次のコードを予測して提案します。

// ユーザーの年齢から成人かどうかを判定する関数
// ↓ Copilotが自動で提案
function isAdult(age) {
  return age >= 18;
}

特徴:

リアルタイムコード提案
複数言語対応
チャット機能でコード解説

Codeium（無料）

Copilotの無料代替。個人利用なら十分な性能です。

特徴:

完全無料
70以上の言語対応
高速なレスポンス

Tabnine（無料/有料）

ローカルモデルも選べるAI補完ツール。

コーディング効率化

Prettier - Code formatter

コードを自動で整形。チーム開発には必須です。

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

ESLint

JavaScriptの静的解析ツール。バグを未然に防ぎます。

// settings.json
{
  "eslint.validate": ["javascript", "typescript", "vue"]
}

Auto Rename Tag

HTMLタグを編集すると、閉じタグも自動で変更。

<!-- 開始タグを編集すると -->
<div> → <section>
<!-- 閉じタグも自動で -->
</div> → </section>

Auto Close Tag

HTMLタグを自動で閉じてくれます。

Path Intellisense

ファイルパスを自動補完。

import Component from './components/B  // ← 候補が表示される

IntelliCode

Microsoftが提供するAI支援コード補完。

Git連携

GitLens

Gitの履歴を可視化する最強拡張機能。

主な機能:

行ごとのコミット履歴表示
ファイル履歴の可視化
ブランチ比較
コミット検索

各行の右側に最終変更者と日時が表示される:
const name = "John";  // John Doe, 2 days ago

Git Graph

ブランチをグラフィカルに表示。コミット履歴が一目でわかります。

Git History

ファイルやラインの履歴を詳細に確認。

言語別拡張機能

JavaScript / TypeScript

拡張機能	用途
ES7+ React/Redux snippets	Reactスニペット
TypeScript Hero	import自動整理
JavaScript (ES6) code snippets	ES6スニペット

Python

拡張機能	用途
Python	公式拡張機能
Pylance	高速な言語サーバー
Black Formatter	コード整形

HTML / CSS

拡張機能	用途
HTML CSS Support	クラス名補完
CSS Peek	CSS定義へジャンプ
Tailwind CSS IntelliSense	Tailwindクラス補完

その他言語

拡張機能	言語
Go	Go言語
rust-analyzer	Rust
PHP Intelephense	PHP
Vetur / Volar	Vue.js

デバッグ・テスト

Thunder Client

VS Code内でAPIテスト。Postmanの代替として使えます。

特徴:

軽量で高速
コレクション管理
環境変数対応

REST Client

HTTPリクエストをファイルから実行。

### ユーザー取得
GET https://api.example.com/users/1
Authorization: Bearer {{token}}

### ユーザー作成
POST https://api.example.com/users
Content-Type: application/json

{
  "name": "John",
  "email": "john@example.com"
}

Console Ninja

console.logの結果をエディタ内に表示。

Error Lens

エラーや警告を行内に表示。

const x = 1
const x = 2  // ← 行内に「'x' is already declared」と表示

見た目・テーマ

One Dark Pro

Atom由来の人気ダークテーマ。

Dracula Official

美しいダークテーマ。多くの開発者に愛用されています。

Material Icon Theme

ファイルアイコンをカラフルに。ファイル種別が一目でわかります。

Bracket Pair Colorizer 2

※ 現在はVS Code標準機能になりました。

// settings.json
{
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": "active"
}

indent-rainbow

インデントを色分け表示。Pythonなどに便利。

生産性向上

Live Server

HTMLファイルをローカルサーバーで起動。変更が自動反映されます。

リアルタイムで共同編集。ペアプログラミングに最適。

Code Spell Checker

コード内のスペルミスを検出。

TODO Highlight

TODO、FIXMEなどのコメントをハイライト表示。

// TODO: あとで修正する ← 目立つ色で表示
// FIXME: バグがある ← 目立つ色で表示

Bookmarks

コード内にブックマークを設置。大規模プロジェクトの移動に便利。

リモート開発

Remote - SSH

SSHでリモートサーバーに接続して開発。

Remote - Containers

Docker コンテナ内で開発。開発環境の統一に最適。

Dev Containers

開発コンテナの定義と起動。チーム開発の環境構築を自動化。

// .devcontainer/devcontainer.json
{
  "name": "Node.js",
  "image": "mcr.microsoft.com/devcontainers/javascript-node:18",
  "features": {
    "ghcr.io/devcontainers/features/github-cli:1": {}
  }
}

Markdown

Markdown All in One

Markdown編集に必要な機能をまとめて提供。