VS Codeおすすめ拡張機能15選｜用途別に紹介

VS Codeは拡張機能を追加することで機能を大幅に強化できます。しかし拡張機能の数が多すぎて、何を入れればよいか迷う方も多いでしょう。この記事では実際に役立つ拡張機能をPython、JavaScript、Git連携、デバッグ支援など用途別に紹介します。

拡張機能のインストール方法

拡張機能は、VS Codeのサイドバーにある拡張機能パネルからインストールします。

基本的なインストール手順

サイドバーの拡張機能アイコンをクリック（Ctrl+Shift+X / Cmd+Shift+X）
検索欄にパッケージ名を入力
「Install」ボタンをクリック

コマンドラインからのインストール

# ターミナルからインストールすることもできる
code --install-extension ms-python.python
code --install-extension esbenp.prettier-vscode

全般的に役立つ拡張機能

Prettier - Code formatter

コードを自動で整形してくれるフォーマッターです。HTML、CSS、JavaScript、TypeScript、JSON、Markdownなど多くの言語に対応しています。

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

保存時に自動でフォーマットされるため、コードスタイルの統一に役立ちます。

indent-rainbow

インデントに色をつけて視覚的にわかりやすくする拡張機能です。特にPythonのようにインデントが構文に影響する言語で便利です。ネストが深い箇所も色で判別しやすくなります。

Error Lens

エラーや警告をコードの横にインライン表示する拡張機能です。通常はエラー箇所に波線が引かれるだけですが、Error Lensを使うとエラーメッセージがその行に直接表示されるため、問題をすぐに把握できます。

Code Spell Checker

変数名やコメントのスペルミスを検出してくれる拡張機能です。英語のスペルチェックを行い、疑わしい単語に波線を表示します。変数名のタイポによるバグを予防できます。

Python向け拡張機能

Python（Microsoft公式）

Pythonの開発に必要な機能を一通り提供する公式拡張機能です。コード補完、デバッグ、Linter連携、テスト実行、仮想環境の自動検出などが含まれます。

// Python開発の推奨設定
{
  "python.languageServer": "Pylance",
  "python.analysis.typeCheckingMode": "basic"
}

Pylance

Microsoftが提供するPythonの言語サーバーです。Python拡張機能と組み合わせて使うことで、高速なコード補完、型チェック、コードの参照元検索などが利用できます。

Jupyter

VS Code上でJupyter Notebookを開いて実行できる拡張機能です。.ipynbファイルの作成・編集・実行がVS Codeだけで完結します。

autoDocstring

関数やクラスのdocstring（説明文）を自動生成する拡張機能です。関数の下で"""と入力してEnterキーを押すと、引数や戻り値のテンプレートが生成されます。

def calculate_total(items, tax_rate):
    """_summary_

    Args:
        items (_type_): _description_
        tax_rate (_type_): _description_

    Returns:
        _type_: _description_
    """

JavaScript / TypeScript向け拡張機能

ESLint

JavaScriptとTypeScriptのコードの問題点を自動検出してくれるLinterです。構文エラーだけでなく、未使用変数やよくないパターンも指摘してくれます。

// settings.json に追加
{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  }
}

保存時に自動でESLintの修正が適用されるように設定できます。

Auto Rename Tag

HTMLやJSXの開始タグを変更すると、対応する終了タグも自動で変更される拡張機能です。<div>を<section>に変更すると、</div>も自動で</section>に変わります。

Path Intellisense

ファイルパスの入力を補完してくれる拡張機能です。import文やHTMLのsrc属性でファイルパスを入力するときに、候補が自動表示されます。

Git連携の拡張機能

GitLens

Gitの機能を大幅に強化する拡張機能です。以下のような機能があります。

各行がいつ誰によって変更されたかを表示（Git Blame）
コミット履歴をビジュアルに確認
ファイルやブランチの比較
コミット間の差分を確認

Git Graph

Gitのブランチとコミット履歴をグラフィカルに表示する拡張機能です。コマンドパレットから「Git Graph: View Git Graph」を実行すると、ブランチの分岐やマージの関係が視覚的にわかります。

デバッグ支援の拡張機能

Thunder Client

VS Code内でAPIリクエストを送信できるツールです。PostmanのようなHTTPクライアント機能をVS Codeの中で使えます。

GET  https://api.example.com/users
POST https://api.example.com/users
  Body: { "name": "Alice", "email": "[email protected]" }

画面上でHTTPメソッド、URL、ヘッダー、ボディを設定してリクエストを送信し、レスポンスを確認できます。

REST Client

.httpファイルにHTTPリクエストを記述して実行できる拡張機能です。リクエストをファイルとして保存できるため、チームでの共有に便利です。

### ユーザー一覧を取得
GET https://api.example.com/users
Content-Type: application/json

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

{
  "name": "Alice",
  "email": "[email protected]"
}

「Send Request」をクリックするだけでリクエストが送信されます。

拡張機能の管理

拡張機能の無効化と削除

使わなくなった拡張機能は無効化または削除しましょう。拡張機能が多すぎるとVS Codeの動作が重くなる原因になります。

# インストール済みの拡張機能一覧を表示
code --list-extensions

# 拡張機能をアンインストール
code --uninstall-extension 拡張機能ID

ワークスペース別の設定

拡張機能の有効/無効はワークスペース単位で設定できます。Python プロジェクトではPython関連のみ有効、JavaScriptプロジェクトではJavaScript関連のみ有効、というように使い分けるとパフォーマンスが向上します。

まとめ

VS Codeの拡張機能は用途に合わせて選ぶことが大切です。全般的にはPrettier、indent-rainbow、Error Lensが便利で、言語に応じてPythonやESLintを追加します。Git連携にはGitLensやGit Graphが役立ちます。入れすぎると動作が重くなるため、本当に使うものだけをインストールするようにしましょう。