VS Codeで入れておきたいおすすめ拡張機能15選｜初心者から上級者までの便利ツール

プログラミング・IT

「Visual Studio Code（VS Code）を使い始めたけど、どの拡張機能を入れたら便利なのか分からない」「とりあえずおすすめが知りたい」

そんな人は多いはず。

VS Codeは拡張機能（Extension）を入れることで、自分だけの超便利な開発環境にカスタマイズできます。

この記事では、以下のカテゴリ別におすすめの拡張機能を紹介します：

  • コード編集を快適にする基本ツール
  • 構造を見やすくする視覚化ツール
  • プロジェクト管理を効率化するツール
  • 開発環境を強化するツール
  • 特定言語に特化したツール

初心者からプロのエンジニアまで幅広くおすすめできる定番の拡張機能をまとめました。

スポンサーリンク

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

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

  1. VS Codeを開く
  2. 左サイドバーの拡張機能アイコン（四角が4つ）をクリック
  3. 検索ボックスに拡張機能名を入力
  4. インストールボタンをクリック

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

# 例：Prettierをインストール
code --install-extension esbenp.prettier-vscode

コード編集を快適にするおすすめ拡張機能

Prettier – Code formatter

何ができる？

コードをきれいに自動整形してくれる定番ツール。保存するだけでインデントや空白を揃えてくれるので、コードレビューでも好印象です。

対応言語 JavaScript、TypeScript、HTML、CSS、JSON、Markdown、Vue、Reactなど

おすすめ設定

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

使い方のコツ

  • プロジェクトルートに .prettierrc ファイルを作成してチーム設定を統一
  • editor.formatOnSave を有効にして保存時に自動整形

ESLint

何ができる？ JavaScript/TypeScriptのLint定番拡張。構文エラーや未使用変数をリアルタイムで検知し、赤波線で教えてくれます。

メリット

  • VueやReactなど、ほとんどのJSフレームワークとも相性抜群
  • コーディング規約の統一
  • バグの早期発見

おすすめ設定

{
  "eslint.enable": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

IntelliCode

何ができる？ AIを活用した高度なコード補完機能。よく使われるパターンを学習して、最適な候補を上位に表示してくれます。

対応言語 Python、JavaScript、TypeScript、Java、C#など

メリット

  • 文脈を理解した賢い補完
  • 開発効率の大幅向上
  • 初心者でもプロのようなコードが書ける

構造を見やすくする視覚化ツール

Auto Rename Tag

何ができる？ HTMLやXML、Vueファイルなどで、開始タグを変更すると自動で閉じタグも追従してくれる便利ツール。

使用例

<!-- 開始タグを変更 -->
<div> → <section>

<!-- 自動で閉じタグも変更される -->
</section>

対応ファイル HTML、XML、JSX、Vue、Angular、PHP

Bracket Pair Colorizer 2

何ができる？ カッコの対応を色で表示する拡張。複雑な入れ子構造も一目瞭然になります。

注意点 現在は VS Code本体に Bracket Pair Colorization が組み込まれていますが、細かく色設定したい場合はこの拡張が便利です。

有効化方法

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

Indent Rainbow

何ができる？ インデントレベルを色分けして表示。深い入れ子構造でも階層が分かりやすくなります。

メリット

  • Python、YAML、JSONファイルで特に有効
  • インデントエラーの早期発見
  • コードの構造把握が簡単

プロジェクト管理を効率化するツール

GitLens

何ができる？ Gitの履歴や変更箇所をコード上で詳細に確認できます。

主な機能

  • いつ誰が書いた行かをソースの横に表示
  • コミットメッセージの確認
  • ファイルの変更履歴を可視化
  • ブランチの比較

チーム開発では必須レベルの機能です。

Path Intellisense

何ができる？ ファイルパスを補完してくれる拡張。

使用例

import x from '../src/
// ↑ここまで打つと自動で候補を一覧表示

メリット

  • タイプミスの防止
  • 開発速度の向上
  • 大規模プロジェクトでのファイル探索が楽

Auto Import – ES6, TS, JSX, TSX

何ができる？ 使用している関数やコンポーネントのimport文を自動で追加してくれます。

対応言語 JavaScript、TypeScript、JSX、TSX

使用例

// Reactコンポーネントを使用
<Button />

// 自動でimport文が追加される
import { Button } from './components/Button';

開発環境を強化するツール

Docker

何ができる？ VS Code内でDockerコンテナを操作・管理できる拡張。

主な機能

  • コンテナ一覧の表示
  • イメージの作成と管理
  • logsやexecをGUIで実行
  • Dockerfileの構文ハイライト

使い方 左サイドバーにDockerアイコンが追加され、GUIでDockerを操作できます。

Remote – SSH

何ができる？ リモートサーバにSSHで接続し、そのままVS Codeで編集やデバッグが可能になります。

メリット

  • ローカルと同じ操作感でリモート開発
  • 重い処理をサーバで実行
  • セキュアな開発環境

使用場面

  • クラウドサーバでの開発
  • 本番環境での緊急対応
  • 高性能サーバでの重い処理

Live Server

何ができる？ 静的なHTMLファイルをローカルサーバで簡単に表示。ファイルを保存すると自動でブラウザが更新されます。

メリット

  • フロントエンド開発の効率化
  • リアルタイムプレビュー
  • CORS問題の回避

使い方 HTMLファイルを右クリック → “Open with Live Server”

特定言語に特化したツール

Python

何ができる？ Python開発に必要な機能をすべて提供する公式拡張。

主な機能

  • シンタックスハイライト
  • デバッグ機能
  • Jupyter Notebook対応
  • 仮想環境の自動認識

おすすめ設定

{
  "python.defaultInterpreterPath": "./venv/bin/python",
  "python.linting.enabled": true,
  "python.linting.flake8Enabled": true
}

Thunder Client

何ができる？ VS Code内でREST APIのテストができる拡張。Postmanのような機能をエディタ内で使えます。

メリット

  • 別ツールを開く必要がない
  • APIドキュメントとコードを同時に確認
  • レスポンスの保存と管理

使用場面

  • API開発
  • サードパーティAPIの動作確認
  • デバッグ作業

Markdown All in One

何ができる？ Markdownのプレビュー、ショートカット、テーブル自動生成などが詰まった統合拡張。

主な機能

  • リアルタイムプレビュー
  • 目次の自動生成
  • テーブルのフォーマット
  • 数式の表示

ブログやドキュメントを書くなら絶対に入れておきたい拡張です。

さらに便利になる追加ツール

Todo Tree

何ができる？ コード内のTODOコメントを一覧表示して管理できます。

使用例

// TODO: この関数を最適化する
// FIXME: バグを修正
// HACK: 一時的な対応

これらのコメントがサイドバーに一覧表示されます。

言語・フレームワーク別おすすめ拡張

React開発者向け

  • ES7+ React/Redux/React-Native snippets – Reactの便利なスニペット
  • Auto Import – ES6, TS, JSX, TSX – 自動import
  • Bracket Pair Colorizer 2 – JSXの構造把握

Vue.js開発者向け

  • Vetur – Vue.js公式拡張
  • Vue VSCode Snippets – Vueスニペット
  • Auto Rename Tag – テンプレート編集

Python開発者向け

  • Python – 公式Python拡張
  • Pylance – 高性能な言語サーバ
  • Python Docstring Generator – ドキュメント自動生成

フロントエンド開発者向け

  • Live Server – ローカルサーバ
  • Auto Rename Tag – HTML/CSS編集
  • CSS Peek – CSSクラスの定義ジャンプ

インストール後の設定のコツ

基本設定の最適化

settings.jsonでの設定例

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },
  "files.autoSave": "afterDelay",
  "workbench.iconTheme": "material-icon-theme"
}

拡張機能の無効化

プロジェクトごとに不要な拡張機能は無効化できます：

  1. 拡張機能を右クリック
  2. “無効にする（ワークスペース）”を選択

パフォーマンスの最適化

多くの拡張機能を入れるとVS Codeが重くなる場合があります：

  • 使わない拡張機能は無効化
  • 定期的に不要な拡張機能をアンインストール
  • Reload Windowで設定を再読み込み

トラブルシューティング

拡張機能が動作しない場合

  1. 再起動 – VS Codeを再起動
  2. アップデート確認 – 拡張機能とVS Code本体を最新に
  3. 設定確認 – settings.jsonで正しく設定されているか確認
  4. コンフリクト確認 – 同じ機能の拡張機能がコンフリクトしていないか

よくあるエラーと解決方法

Prettierが動作しない

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

ESLintが反応しない

{
  "eslint.workingDirectories": ["./"],
  "eslint.validate": ["javascript", "typescript"]
}

まとめ

VS Codeは拡張機能を入れることで、以下の作業が一気に効率化します：

  • コード補完と自動整形 でコーディング速度向上
  • Git管理の可視化 でチーム開発を円滑に
  • デバッグとテスト の統合環境構築
  • Docker・SSH連携 でインフラ作業も効率化
  • Markdown編集 でドキュメント作成も快適

まず入れるべき必須の5つ

初心者の方は、まず以下の5つから始めることをおすすめします：

  1. Prettier – コード自動整形
  2. ESLint – JavaScript/TypeScriptの品質管理
  3. GitLens – Git操作の可視化
  4. Auto Rename Tag – HTMLタグの効率編集
  5. Path Intellisense – ファイルパスの自動補完

Youtube

神話・歴史・伝承の解説チャンネル

スポンサーリンク

コメント

タイトルとURLをコピーしました