VSCodeは、そのままでも十分すごいのですが、拡張機能（Extensions） を足すことで、もっと便利にできます。アプリに“追加のアプリ”を入れるイメージ。ここでは初心者が入れておくと快適になる定番を、まとめて紹介します。
拡張機能の入れ方（共通の手順）
- VSCodeの左端にある、四角が4つのアイコン（Extensions）をクリック
- 上の検索ボックスに、入れたい拡張機能の名前を打つ
- 目的のものの Install ボタンを押す
これだけ。あとは下の名前をそのまま検索欄にコピーすれば、迷わず入れられます。
入れておきたい拡張機能
上から順に「まず入れると効果が大きい」順に並べています。ぜんぶ一度に入れなくても大丈夫。まずは日本語化から、あとは使いながら「これ欲しいな」と思ったものを足していきましょう。
1. Japanese Language Pack（日本語化）
メニューや設定を日本語にしてくれます。英語のままだと最初はつらいので、いちばん最初に入れるのがおすすめ。入れたあと「再起動しますか？」と聞かれたら、再起動すると日本語に切り替わります。
2. Live Server（自動プレビュー）
HTMLファイルを右クリック → Open with Live Server で、ブラウザに自動表示。保存した瞬間に画面が更新されます。「書く → 見る」のくり返しが劇的にラクになる、練習の相棒です。
3. Prettier（コードの自動整形）
ガタガタになったインデント（字下げ）や空白を、保存するだけでピシッと整えてくれます。見た目がそろうと、まちがいにも気づきやすくなります。
4. Auto Rename Tag（閉じタグを自動で追従）
<div> を <section> に書き換えると、対になる閉じタグ </div> も自動で一緒に変わります。閉じタグの直し忘れは初心者がいちばんやりがちなミス。それをまるごと防いでくれます。
5. indent-rainbow（入れ子を色で見やすく）
インデントの深さに応じて色がつき、入れ子（タグの中のタグ）の深さがひと目で分かるようになります。「あれ、いまどの中身を書いてるんだっけ？」が減ります。
6. zenkaku（全角スペースを見える化）
日本語で書いていると、うっかり紛れ込む「全角スペース」。見た目はふつうの空白なのに、コードの中にあると動かない原因になり、しかも目では見つけられません。この拡張機能は、全角スペースを色付きの四角で見える化してくれます。日本語で書く人ほど効きます。
7. Color Highlight（色コードに色をプレビュー）
CSSで #ff6699 のような色コードを書くと、その文字の背景が実際の色になって表示されます。「このコード、何色だっけ？」といちいち確かめなくても、ひと目で分かります。色をたくさん使うCSSの練習で大活躍します。
8. Material Icon Theme（ファイルにアイコン）
サイドバーのファイル名の横に、種類ごとのアイコンが付きます。HTMLファイル・CSSファイル・画像ファイルがひと目で見分けられるようになり、フォルダの中が一気に分かりやすくなります。
9. Path Intellisense（ファイルのパス補完）
画像やCSSを読み込むときのファイルの場所（パス）を打つと、候補を出してくれます。フォルダ名やファイル名のタイプミスによる「読み込めない！」を防げます。
10. Code Spell Checker（スペルミス検出）
widht や heigth のような英単語のつづりまちがいに、波線で気づかせてくれます。英語のスペルミスは動かない原因になりがちなので、書いているそばから直せるのは心強い味方です。
11. Error Lens（エラーをその場に表示）
まちがいのある行に、エラーの内容をその場で赤く表示してくれます。ふだんは小さくしか出ない警告が、行のとなりに文章で出るので、「どこが・なぜダメか」がすぐ分かります。原因さがしの時間がぐっと減ります。
まとめ
- Extensionsアイコンから、検索 → Installで拡張機能を入れられる
- 日本語化・Live Server・Prettier を軸に、必要になったらAuto Rename Tagなどを足していく
- 拡張機能は“あとから足せる”ので、入れすぎず少しずつでいい
道具が整うと、練習そのものが気持ちよくなります。