VS Codeにまず入れるべき拡張は？

日本語化、コード整形のPrettier、エラーがその行で分かるError Lens、GitのGitLens、学生なら無料のGitHub Copilot、あとは自分の言語の公式拡張（Pythonなら公式Python拡張、WebならLive Server）。まずこの5つくらいで十分。

VS Codeで保存したら自動でコードを整えるには？

settings.jsonで、保存時に自動整形する設定（editor.formatOnSave を true）と、整形にPrettierを使う設定（editor.defaultFormatter を esbenp.prettier-vscode）を入れる。これで保存するたびにインデントや改行が自動で整う。

Bracket Pair Colorizer（括弧の色分け）はまだ入れる？

いや、もう不要。括弧の色分けはVS Code本体に取り込まれ、editor.bracketPairColorization.enabled が既定で有効になっている。この拡張は非推奨・アーカイブ済みなので入れない。

VS Codeのおすすめ拡張機能と設定【2026・プログラミング初心者向け】

目次 / INDEX

VS Codeは、入れたままでも使えるけど、拡張機能と設定をちょっと足すだけで別物みたいに快適になる。ただ、初心者ほど「便利そう」で入れすぎて逆に重くする、というのもよくある。

この記事では、プログラミングをする学生・初心者向けに、**本当に入れておくべき拡張（実名つき）と、やっておくべき設定（コピペできる実例）**を絞ってまとめる。

結論まず入れるのは、日本語化・整形のPrettier・エラーが即分かるError Lens・GitLens・（学生は無料の）GitHub Copilot、そして自分の言語の公式拡張。設定は「保存時に自動整形」だけ入れれば体感が変わる。拡張は入れすぎると重くなるので、必要になってから足すのが正解。

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

本題の前に1つ。VS Code左端の四角いアイコン（拡張機能）から名前で検索して入れられるけど、似た名前の放置版・偽物が混ざることがある。確実なのは拡張ID（publisher.name の形式）で確認して入れること。以下、各拡張にIDを併記したので、これと一致するものを入れれば間違いない。

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

拡張名	拡張ID	何のため
Japanese Language Pack	`MS-CEINTL.vscode-language-pack-ja`	メニューや設定画面を日本語化。英語のままでいい人は飛ばしてOK
Prettier	`esbenp.prettier-vscode`	保存時にコードを自動整形（インデント・改行幅など）。「見た目」で悩まなくなる定番
ESLint	`dbaeumer.vscode-eslint`	JS/TSのバグや悪い書き方を書いてる最中に指摘。Prettierが見た目、ESLintが中身担当
Error Lens	`usernamehw.errorlens`	エラーや警告をその行の右にそのまま表示。「どこが赤いか」が一目で分かり、初心者の詰まる時間が激減する
GitLens	`eamodio.gitlens`	各行を「誰がいつ変更したか」表示、履歴や差分も。Gitの学習と、後から自分のコードを追うのに強い
Code Spell Checker	`streetsidesoftware.code-spell-checker`	変数名やコメントの英単語スペルミスを指摘。`recieve`→`receive` みたいなミスを拾う

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

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

やること	拡張名	拡張ID
Web（HTML/CSS/JS）	Live Server	`ritwickdey.LiveServer`
HTMLタグ編集	Auto Rename Tag	`formulahendry.auto-rename-tag`
Python	Python（公式・Pylance同梱）	`ms-python.python`
Jupyterノート	Jupyter	`ms-toolsai.jupyter`
API/バックエンドの確認	REST Client	`humao.rest-client`
C / C++	C/C++（公式）	`ms-vscode.cpptools`

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

AIアシスタント：GitHub Copilot

拡張名	拡張ID
GitHub Copilot ＋ Copilot Chat	`GitHub.copilot` / `GitHub.copilot-chat`

入力の途中で続きを提案してくれたり、チャットで「このエラー何？」と聞けたりする。学生は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）。

操作	Win/Linux	Mac	用途
コマンドパレット	`Ctrl+Shift+P`	`⇧⌘P`	全機能の入口。困ったらまずこれ
ファイルを名前で開く	`Ctrl+P`	`⌘P`	名前の一部を打つだけ。ツリーを辿らない
同じ単語を次々選択	`Ctrl+D`	`⌘D`	まとめて編集（マルチカーソル）
変数・関数をリネーム	`F2`	`F2`	使ってる全箇所を安全に一括改名
定義へジャンプ	`F12`	`F12`	関数の中身へ即移動
コメント切替	`Ctrl+/`	`⌘/`	選択行をまとめてコメント化
行を上下に移動	`Alt+↑/↓`	`⌥↑/↓`	切り取り＆貼り付け不要
全ファイル検索	`Ctrl+Shift+F`	`⇧⌘F`	文字列を横断検索
ターミナル開閉	Ctrl+`	⌃`	エディタ内でコマンド実行

F2 のリネームは特に覚えたい。手で文字列置換すると関係ない箇所まで変えてしまうけど、F2 なら「その変数」だけを安全に全部まとめて変えられる。

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

見た目は好みだけど、定番を挙げておく。カラーテーマは 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」で全部止めて、原因を切り分けられる。「便利そう」で増やすより、必要になってから足す方が結局快適だ。

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

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

Japanese Language Pack（日本語UIが欲しければ）
Prettier（esbenp.prettier-vscode）＝整形
Error Lens（usernamehw.errorlens）＝エラーが即分かる
GitHub Copilot（GitHub.copilot）＝学生は無料
自分の言語の公式拡張（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での開発環境まるごとの整え方は、こっちにまとめた。