VS Codeのおすすめ拡張機能と設定【2026】

拡張は「拡張ID」で入れると確実

本題の前に1つ。VS Code左端の四角いアイコン（拡張機能）から名前で検索して入れられるけど、似た名前の放置版・偽物が混ざることがある。

確実なのは拡張ID（publisher.name の形式）で確認して入れること。以下、各拡張にIDを併記したので、これと一致するものを入れれば間違いない。

まず入れる拡張（全員向け）

補足として、昔の定番だった Bracket Pair Colorizer（括弧の色分け）は、機能がVS Code本体に取り込まれて非推奨・アーカイブ済み。今は入れない。「自動保存」系の古い拡張も、本体の設定で足りるので不要だ。

自分のやることに合わせて足す

Live Server は、HTMLを右クリック→Open with Live Server でローカルサーバーが立ち上がり、保存すると自動でブラウザが更新される。HTML/CSSを学ぶ最初の相棒だ。他の言語も「公式または定番1つ」を入れるのが原則（Goならgolang.go、Rustならrust-lang.rust-analyzer など）。

AIアシスタントのGitHub Copilot

入力の途中で続きを提案してくれたり、チャットで「このエラー何？」と聞けたりする。学生はGitHub Student Packで無料になるのが大きくて、詰まって進めない時間をかなり減らせる。

ただ1つだけ言うと、最初は答えを鵜呑みにせず「なぜこのコードなのか」を自分で追った方が、結局いちばん伸びる。

やっておくべき設定（settings.json）

コマンドパレット（Ctrl+Shift+P / Macは ⇧⌘P）で「Preferences: Open User Settings (JSON)」を開いて、以下を貼る。各行に何のためかコメントを付けた。

{
  // 保存まわり
  "files.autoSave": "afterDelay",          // 一定時間で自動保存（保存忘れ防止）
  "editor.formatOnSave": true,             // 保存時に自動整形（Prettierが動く）
  "editor.defaultFormatter": "esbenp.prettier-vscode", // 整形はPrettierに任せる
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"     // 保存時にESLintの自動修正も実行
  },

  // 見た目
  "editor.fontSize": 15,                   // 少し大きめが目に優しい（14〜16で好み）
  "editor.lineHeight": 1.6,                // 行間を広げて読みやすく

  // インデント・折り返し
  "editor.tabSize": 2,                     // JS/Web系は2が主流
  "editor.wordWrap": "on",                 // 長い行を画面幅で折り返す（横スクロール不要）

  // 補助表示
  "editor.minimap.enabled": false,         // 右のミニマップを消して画面を広く（好みでtrue）
  "editor.stickyScroll.enabled": true,     // 今いる関数名を上部に固定表示
  "files.trimTrailingWhitespace": true,    // 行末の無駄な空白を除去
  "files.insertFinalNewline": true,        // ファイル末尾に改行（Git差分が綺麗に）

  // 言語ごとの上書き
  "[python]": { "editor.tabSize": 4 },     // Pythonは4スペースが公式スタイル
  "[markdown]": { "files.trimTrailingWhitespace": false } // Markdownは行末スペースが意味を持つ
}

ひとつ落とし穴。files.autoSave を afterDelay（時間で自動保存）にして formatOnSave も入れると、「打つ→勝手に整形」で書きにくく感じる人もいる。その場合は autoSave を "onFocusChange"（別ファイルに移った時だけ保存）にすると快適だ。

覚えると速くなるショートカット

まずは太字の5つだけでいい（Windows/Linux ／ Mac）。

F2 のリネームは特に覚えたい。手で文字列置換すると関係ない箇所まで変えてしまうけど、F2 なら「その変数」だけを安全に全部まとめて変えられる。キー割り当てを変えたくなっても、カスタムするのは3つで足りる。

テーマとフォント（見やすさ）

見た目は好みだけど、定番を挙げておく。カラーテーマは One Dark Pro（王道ダーク）、Catppuccin（今人気の柔らかい系）、明るいのが好きなら GitHub Theme。アイコンは Material Icon Theme（PKief.material-icon-theme）を入れると、ファイルの種類が一目で分かる。

フォントは JetBrains Mono や Fira Code（無料）を入れると => などが綺麗に見える。適用はコマンドパレットの「Preferences: Color Theme」から。

拡張は入れすぎない

これが地味に大事。拡張は数が多いほど起動が遅くなるし、メモリも食う。特に整形系を複数入れると「どれが動くか」で競合する。

整形はPrettier 1本に絞って、上のように editor.defaultFormatter で明示するのがいい。動作が変になったら、コマンドパレットの「Extensions: Disable All Installed Extensions」で全部止めて、原因を切り分けられる。

「便利そう」で増やすより、必要になってから足す方が結局快適だ。

最低限これだけ（ミニマル構成）

まず動く環境を作りたいなら、これだけでいい。

1. Japanese Language Pack（日本語UIが欲しければ）
2. Prettier（esbenp.prettier-vscode）は整形用
3. Error Lens（usernamehw.errorlens）はエラーが即分かる
4. GitHub Copilot（GitHub.copilot）は学生なら無料
5. 自分の言語の公式拡張（Python なら ms-python.python、Web なら Live Server）

設定は最低限これだけ入れておけば十分。よく打つ定型文は、スニペットを自作すれば拡張なしで呼び出せる。

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "files.autoSave": "afterDelay",
  "editor.fontSize": 15,
  "editor.wordWrap": "on"
}

あとは書きながら「これ欲しいな」と思ったものを足していく。それくらいの温度がちょうどいい。Macでの開発環境まるごとの整え方は、こっちにまとめた。