効率化 2026年4月16日

VSCodeの設定・拡張機能おすすめ15選【現役SEの実際の設定を公開】

VSCodeは拡張機能の数が多すぎて、何を入れればいいかわからなくなる。

「とりあえず人気ランキングを全部入れる」→「重くなる」→「整理が面倒でそのまま放置」という流れを経験したエンジニアは多いはずだ。

この記事では、現役SEが実際に毎日使っている拡張機能と設定を厳選して紹介する。入れるだけで効果を感じられるものに絞った。

拡張機能：開発効率アップ系（6選）

1. GitHub Copilot（有料・月約10ドル）

AIコード補完の定番。コメントや関数名から次のコードを予測して提案してくれる。

慣れると「書く」というより「選ぶ」感覚になる。繰り返しのボイラープレートコードや、テストコードの生成に特に威力を発揮する。有料だが、使い始めると元を取れると感じる人がほとんど。

// コメントを書くと実装を提案してくれる例
// ユーザーIDを受け取ってデータベースからユーザー情報を取得する関数

2. Error Lens（無料）

エラーや警告をコードの行末にインライン表示してくれる拡張機能。デフォルトでは「Problems」タブを開かないと気づかないエラーが、コードを書きながらリアルタイムで見える。

インストールするだけで設定不要。エラーを見逃すことが大幅に減る。

3. GitLens（無料）

Gitの情報をエディタ内で確認できるようにする拡張機能。

最も使っている機能：

Blame表示：カーソルを当てた行を「誰が・いつ・どのコミットで書いたか」を行末に表示
File History：ファイルの変更履歴をグラフで確認

「このコードなぜこう書いてあるの？」という疑問がすぐ解決できる。

4. Auto Rename Tag（無料）

HTML/JSXの開きタグを変更したとき、対応する閉じタグも自動で変更してくれる。地味だが、HTML編集のストレスが大きく下がる。

5. Path Intellisense（無料）

ファイルパスを入力するときに補完してくれる拡張機能。import文でパスを書くときのタイポを減らせる。

6. Todo Tree（無料）

コード内の TODO: や FIXME: コメントを一覧で確認できるようにする拡張機能。サイドバーにツリー表示されるので、放置された未対応箇所を見逃しにくくなる。

拡張機能：言語・フレームワーク別（5選）

7. ESLint / Prettier（無料）

JavaScriptを書くなら必須の2つ。ESLintはコードのルール違反を検出し、Prettierは自動フォーマットをかける。

セットで使い、保存時に自動フォーマットが走るように設定するのが基本。

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

8. Pylance（無料）

Python開発者向け。型チェック・補完・ドキュメント表示が強化される。Pythonを書くなら必須レベル。

9. Thunder Client（無料）

VSCode内でHTTPリクエストを送れるREST APIクライアント。PostmanをVSCodeに統合したようなイメージ。API開発中にブラウザやPostmanを切り替えなくて済む。

10. Docker（無料）

Docker公式の拡張機能。コンテナ・イメージ・ネットワークをサイドバーで管理できる。docker ps をターミナルで叩かなくても状態確認ができて便利。

11. YAML（無料）

YAMLファイルのシンタックスハイライト・バリデーション・補完を提供する。GitHub ActionsやKubernetesのマニフェストを書くときにミスを減らせる。

拡張機能：見た目・UX改善系（2選）

12. indent-rainbow（無料）

インデントを色分け表示してくれる。ネストが深いコードで現在のインデントレベルを視覚的に把握しやすくなる。

13. Material Icon Theme（無料）

ファイルの種類に応じてアイコンを変えてくれる。.json・.ts・.md などが一目でわかるようになり、ファイルツリーが見やすくなる。

実際のsettings.json（主要な設定のみ）

{
  // フォント設定
  "editor.fontFamily": "'JetBrains Mono', 'Fira Code', monospace",
  "editor.fontLigatures": true,
  "editor.fontSize": 14,
  "editor.lineHeight": 1.8,

  // 保存時の自動フォーマット
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",

  // インデント
  "editor.tabSize": 2,
  "editor.insertSpaces": true,

  // ミニマップ非表示（邪魔なので）
  "editor.minimap.enabled": false,

  // ファイルツリー
  "explorer.compactFolders": false,

  // ターミナル
  "terminal.integrated.fontSize": 13,

  // 自動保存
  "files.autoSave": "onFocusChange",

  // Emmet（JSXで使う場合）
  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
  }
}

フォントのおすすめ

コーディングフォントも生産性に地味に影響する。

フォント	特徴	価格
JetBrains Mono	視認性が高い。リガチャ対応	無料
Fira Code	定番コーディングフォント	無料
0xProto	モダンでシャープな見た目	無料

"editor.fontLigatures": true を設定すると != が ≠ のように合字表示される。慣れると読みやすい。

まとめ：まず入れるべき3本

全部一気に入れるより、まず以下の3本だけ入れると即効果を感じられる。

拡張機能	効果
Error Lens	エラーを見逃さなくなる
GitLens	コードの変更履歴が追いやすくなる
Material Icon Theme	ファイルツリーが見やすくなる

この3本はすべて無料で、設定不要で動く。まず試してみて、気に入ったら他も追加していくのがおすすめ。

#VSCode#拡張機能#効率化#エディタ#ツール