VS Codeのおすすめ拡張機能は？

✅ 回答

拡張機能は便利ですが、入れすぎるとVS Codeが重くなります。「今の自分に必要なもの」だけ入れるのが鉄則です。学習段階別に紹介します。

最初に入れる3つ（HTML/CSS学習中）

拡張機能	何をしてくれる？	入れる理由
Live Server	ファイル保存時にブラウザを自動更新	いちいちF5を押す手間がなくなる
Prettier	コードのインデントや改行を自動整形	見やすいコードが勝手にできる
Japanese Language Pack	メニューを日本語化	英語メニューで迷わなくなる

JavaScript学習に進んだら追加

拡張機能	何をしてくれる？
ESLint	JavaScriptの書き間違いを赤線で教えてくれる
Error Lens	エラー内容をコードの横にインライン表示

Git/GitHubを使い始めたら追加

拡張機能	何をしてくれる？
GitLens	各行を「誰がいつ変更したか」表示
GitHub Copilot	AIがコード補完してくれる（学生無料）

インストール方法

VS Code左側の四角アイコン（Extensions）をクリック → 検索バーに名前を入力 → 「Install」ボタンを押すだけです。

Live Serverの使い方（最初に覚えるべき操作）

インストール後、HTMLファイルを開いた状態で画面右下の「Go Live」ボタンをクリックします。ブラウザが自動で開き、以降はファイルを保存するたびに表示が更新されます。ポート番号（通常5500）が表示されるので、スマホからも同じWi-Fi内なら http://PCのIPアドレス:5500 で確認できます。学園祭サイトのスマホ表示チェックに便利です。

Prettierの設定（保存時に自動整形）

インストールしただけでは手動実行になります。VS Codeの設定で「Format On Save」をONにすると、Ctrl+S（Cmd+S）を押すたびに自動でコードが整形されます。チーム開発でコードの書き方を揃えるときにも必須の設定です。

「入れすぎ注意」の目安

拡張機能が20個を超えると起動が遅くなりがちです。使っていないものは定期的に無効化（Disable）しましょう。「何のために入れたか説明できない拡張機能」は消してOKです。

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

# コマンドパレット（Ctrl+Shift+P）から検索してインストールもできる
# または左サイドバーの四角アイコン（Extensions）をクリック