初心者エンジニア必見！VSCode拡張機能おすすめ15選【2026年版】

はじめに

**Visual Studio Code（VSCode）**は、世界中の開発者に愛用されている無料のコードエディタです。軽量でありながら強力な機能を持ち、豊富な拡張機能でカスタマイズできるのが最大の魅力です。

この記事では、エンジニアの生産性を劇的に向上させるおすすめVSCode拡張機能15選を紹介します。

VSCodeの基本設定

拡張機能を入れる前に、VSCode本体の基本設定を確認しましょう。

設定を開く

Mac: Cmd + ,
Windows: Ctrl + ,

必須級の拡張機能

1. Prettier - Code formatter

コードを自動整形してくれる拡張機能。保存時に自動フォーマットされるので、コードの見た目を気にせず書けます。

インストール方法:

拡張機能タブを開く（Cmd/Ctrl + Shift + X）
"Prettier"で検索
インストール

設定:

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

2. ESLint

JavaScriptのコード品質をチェック。エラーや警告をリアルタイムで表示します。

使い方:

プロジェクトに.eslintrc.jsを配置
保存時に自動修正する設定も可能

3. GitLens

Gitの履歴を行ごとに表示。誰がいつ書いたコードかが一目瞭然です。

主な機能:

コミット履歴の表示
ファイル履歴の可視化
Blame（誰が書いたか）の表示
ブランチ比較

4. Live Server

HTMLファイルをローカルサーバーで開き、変更を自動リロードします。

使い方:

HTMLファイルを右クリック
"Open with Live Server"を選択
ブラウザが自動で開く

5. Auto Rename Tag

HTMLタグの開始タグを変更すると、閉じタグも自動で変更されます。

<!-- <div>を<section>に変更すると -->
<section>
  コンテンツ
</section>
<!-- 閉じタグも自動で変更される -->

見た目・テーマ系

6. Material Icon Theme

ファイルやフォルダにわかりやすいアイコンを表示。視認性が大幅に向上します。

7. One Dark Pro

人気の配色テーマ。目に優しく、長時間のコーディングでも疲れにくいです。

その他おすすめテーマ:

Dracula Official
Night Owl
Tokyo Night

言語・フレームワーク別

8. ES7+ React/Redux/React-Native snippets

Reactの開発に必須。スニペットで爆速コーディングが可能です。

主なスニペット:

rafce → React Arrow Function Component Export
rfc → React Functional Component
useState → useStateのインポート

9. Volar

Vue.js 3の公式拡張機能。型チェックや補完が強力です。

10. Python

Pythonの開発に必須。インテリセンス、デバッグ、リント機能が使えます。

生産性向上系

11. Path Intellisense

ファイルパスを自動補完。インポート文やリンクを書くときに便利です。

import Header from './components/Header' // 自動補完される

12. Better Comments

コメントを色分けして見やすくします。

// ! 重要な注意事項
// ? 質問や疑問点
// TODO: 実装予定
// * ハイライト

13. Code Spell Checker

スペルミスをチェック。変数名やコメントのタイポを防げます。

14. Bracket Pair Colorizer 2

（注：VSCode組み込み機能になったため不要になりました）

括弧を色分けして対応関係を可視化します。

設定:

{
  "editor.bracketPairColorization.enabled": true
}

15. Todo Tree

コード内のTODOやFIXMEを一覧表示。タスク管理が楽になります。

拡張機能を入れすぎない

拡張機能は便利ですが、入れすぎると動作が重くなります。

ポイント

本当に使うものだけインストール
使わなくなったら削除
言語ごとにプロファイルを分ける

プロファイル機能

VSCode 1.75以降では、プロファイル機能で拡張機能を切り替えられます。

設定 > Profiles > Create Profile

例：

Webフロントエンド: React、Prettier、ESLint
Python: Python、Pylance
執筆: Markdown関連のみ

まとめ

VSCodeの拡張機能を活用すれば、開発効率が大幅に向上します。

最低限入れたい拡張機能

Prettier - コード整形
ESLint - コード品質チェック
GitLens - Git履歴表示
Path Intellisense - パス補完
Material Icon Theme - アイコン表示

拡張機能選びのコツ

評価が高いものを選ぶ（★4以上）
更新が頻繁なものを選ぶ（メンテナンスされている）
ダウンロード数が多いものを選ぶ（人気＝使いやすい）

まずは必須級の拡張機能から入れて、徐々に自分に合ったものを追加していきましょう。快適な開発環境を整えて、生産性を最大化しましょう！

関連ツール

はじめに

この記事では、エンジニアの生産性を劇的に向上させるおすすめVSCode拡張機能15選を紹介します。

VSCodeの基本設定

拡張機能を入れる前に、VSCode本体の基本設定を確認しましょう。

設定を開く

Mac: Cmd + ,
Windows: Ctrl + ,

必須級の拡張機能

1. Prettier - Code formatter

コードを自動整形してくれる拡張機能。保存時に自動フォーマットされるので、コードの見た目を気にせず書けます。

インストール方法:

拡張機能タブを開く（Cmd/Ctrl + Shift + X）
"Prettier"で検索
インストール

設定:

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

2. ESLint

JavaScriptのコード品質をチェック。エラーや警告をリアルタイムで表示します。

使い方:

プロジェクトに.eslintrc.jsを配置
保存時に自動修正する設定も可能

3. GitLens

Gitの履歴を行ごとに表示。誰がいつ書いたコードかが一目瞭然です。

主な機能:

コミット履歴の表示
ファイル履歴の可視化
Blame（誰が書いたか）の表示
ブランチ比較

4. Live Server

HTMLファイルをローカルサーバーで開き、変更を自動リロードします。

使い方:

HTMLファイルを右クリック
"Open with Live Server"を選択
ブラウザが自動で開く

5. Auto Rename Tag

HTMLタグの開始タグを変更すると、閉じタグも自動で変更されます。

<!-- <div>を<section>に変更すると -->
<section>
  コンテンツ
</section>
<!-- 閉じタグも自動で変更される -->

見た目・テーマ系

6. Material Icon Theme

ファイルやフォルダにわかりやすいアイコンを表示。視認性が大幅に向上します。

7. One Dark Pro

人気の配色テーマ。目に優しく、長時間のコーディングでも疲れにくいです。

その他おすすめテーマ:

Dracula Official
Night Owl
Tokyo Night

言語・フレームワーク別

8. ES7+ React/Redux/React-Native snippets

Reactの開発に必須。スニペットで爆速コーディングが可能です。

主なスニペット:

rafce → React Arrow Function Component Export
rfc → React Functional Component
useState → useStateのインポート

9. Volar

Vue.js 3の公式拡張機能。型チェックや補完が強力です。

10. Python

Pythonの開発に必須。インテリセンス、デバッグ、リント機能が使えます。

生産性向上系

11. Path Intellisense

ファイルパスを自動補完。インポート文やリンクを書くときに便利です。

import Header from './components/Header' // 自動補完される

12. Better Comments

コメントを色分けして見やすくします。

// ! 重要な注意事項
// ? 質問や疑問点
// TODO: 実装予定
// * ハイライト

13. Code Spell Checker

スペルミスをチェック。変数名やコメントのタイポを防げます。

14. Bracket Pair Colorizer 2

（注：VSCode組み込み機能になったため不要になりました）

括弧を色分けして対応関係を可視化します。

設定:

{
  "editor.bracketPairColorization.enabled": true
}

15. Todo Tree

コード内のTODOやFIXMEを一覧表示。タスク管理が楽になります。

拡張機能を入れすぎない

拡張機能は便利ですが、入れすぎると動作が重くなります。

ポイント

本当に使うものだけインストール
使わなくなったら削除
言語ごとにプロファイルを分ける

プロファイル機能

VSCode 1.75以降では、プロファイル機能で拡張機能を切り替えられます。

設定 > Profiles > Create Profile

例：

Webフロントエンド: React、Prettier、ESLint
Python: Python、Pylance
執筆: Markdown関連のみ

まとめ

VSCodeの拡張機能を活用すれば、開発効率が大幅に向上します。

最低限入れたい拡張機能

Prettier - コード整形
ESLint - コード品質チェック
GitLens - Git履歴表示
Path Intellisense - パス補完
Material Icon Theme - アイコン表示

拡張機能選びのコツ

評価が高いものを選ぶ（★4以上）
更新が頻繁なものを選ぶ（メンテナンスされている）
ダウンロード数が多いものを選ぶ（人気＝使いやすい）

まずは必須級の拡張機能から入れて、徐々に自分に合ったものを追加していきましょう。快適な開発環境を整えて、生産性を最大化しましょう！

関連ツール

はじめに

VSCodeの基本設定

設定を開く

おすすめ基本設定

必須級の拡張機能

1. Prettier - Code formatter

2. ESLint

3. GitLens

4. Live Server

5. Auto Rename Tag

見た目・テーマ系

6. Material Icon Theme

7. One Dark Pro

言語・フレームワーク別

8. ES7+ React/Redux/React-Native snippets

9. Volar

10. Python

生産性向上系

11. Path Intellisense

12. Better Comments

13. Code Spell Checker

14. Bracket Pair Colorizer 2

15. Todo Tree

おすすめショートカット

拡張機能を入れすぎない

ポイント

プロファイル機能

まとめ

最低限入れたい拡張機能

拡張機能選びのコツ

はじめに

VSCodeの基本設定

設定を開く

おすすめ基本設定

必須級の拡張機能

1. Prettier - Code formatter

2. ESLint

3. GitLens

4. Live Server

5. Auto Rename Tag

見た目・テーマ系

6. Material Icon Theme

7. One Dark Pro

言語・フレームワーク別

8. ES7+ React/Redux/React-Native snippets

9. Volar

10. Python

生産性向上系

11. Path Intellisense

12. Better Comments

13. Code Spell Checker

14. Bracket Pair Colorizer 2

15. Todo Tree

おすすめショートカット

拡張機能を入れすぎない

ポイント

プロファイル機能

まとめ

最低限入れたい拡張機能

拡張機能選びのコツ