プログラミング学習を始めたばかりの頃、最も時間を奪われるのは「コードを書くこと」ではなく、実は「思い通りに動かない原因（エラー）を探すこと」です。特に高機能なVSCodeを使っていると、エディタの設定なのか、自分のコードのミスなのか、あるいは拡張機能の不具合なのか、判断がつかず途方に暮れてしまうことも少なくありません。
本記事では、エンジニアの視点から、初心者がVSCodeで直面しやすいエラーとその解決方法を網羅的に解説します。あなたの「困った」を即座に解決するバイブルとなる内容をお届けします。
VSCodeでエラーが起こる主な原因
解決策に入る前に、まずは「なぜエラーが起きるのか」という全体像を整理しましょう。VSCodeで発生するトラブルの9割は、以下の4つのいずれかに集約されます。
- 保存ミス：変更したはずのコードがファイルとして確定されていない。
- パスミス：ファイルや画像の「場所（住所）」の指定が間違っている。
- 拡張機能の設定ミス：便利なツールが正しく動いていない、あるいは競合している。
- 記述ミス：タイピングミスや、プログラムの文法ルール（構文）を守れていない。
これらを知っておくだけで、闇雲に悩む時間は劇的に減ります。それでは、具体的なトラブル事例を見ていきましょう。
CSSが反映されない
「HTMLは表示されるのに、CSSで付けた色やデザインが変わらない」というのは、Web制作初心者が最も多く経験するトラブルです。
linkタグの記述ミス
HTMLからCSSを読み込むための <link> タグに間違いがないか、一文字ずつ確認してください。
- rel=”stylesheet” が rel=”style” になっていませんか？
- href 属性のスペルが間違っていませんか？
ファイル名のミス
VSCodeのエクスプローラーを確認してください。
- HTMLで指定した名前が style.css なのに、実際のファイル名が styles.css （複数形のsがついている）や stlye.css になっていませんか？
- 大文字と小文字も区別されます。 Style.css と style.css は別物です。
保存できていない
VSCodeのタブを見てください。ファイル名の横に「白い丸」が出ていませんか？
この白丸は「未保存」のサインです。保存（Ctrl + S / Cmd + S）するまで、ブラウザ側には古い状態しか伝わりません。
パス指定ミス
HTMLとCSSが同じフォルダにありますか？
もしCSSを css フォルダに入れているなら、パスは href=”css/style.css” と書く必要があります。パスの考え方に自信がない場合は、まずはすべてのファイルを同じ階層に置くことから始めましょう。
Live Serverが動かない
「Go Live」を押してもブラウザが立ち上がらない、あるいは右下に「Go Live」という文字自体が出てこない場合の解決策です。
拡張機能がインストールされていない
そもそも「Live Server」という拡張機能がインストールされ、「有効（Enable）」になっているか確認してください。無効になっている場合は、拡張機能タブから有効化ボタンを押す必要があります。
ファイルを開いていない
Live Serverは「フォルダ」を開いた状態で、その中の「HTMLファイル」を選択していないと正しく動作しません。VSCodeに単一のファイルをドラッグ&ドロップして開いているだけでは動かないことがあるため、必ず「フォルダーを開く」からプロジェクト全体を読み込ませてください。
ポート競合
他のソフトがLive Serverと同じ「ポート（通信の出入り口）」を使っているとエラーになります。右下に「Error: listen EADDRINUSE」といったメッセージが出た場合は、VSCodeを一度閉じて、他のブラウザやアプリを終了させてから再試行してください。
再起動で解決する場合
意外と多いのがこれです。拡張機能をインストールした直後などは、VSCodeを一度完全に終了させてから立ち上げ直すだけで、あっさり動くことがよくあります。
日本語化できない
日本語化パックを入れたのに、メニューが英語のままの場合の確認事項です。
- 拡張機能の確認： Japanese Language Pack がインストール済みになっているか。
- コマンドパレットの活用： Ctrl + Shift + P で「Display Language」と入力し、「Configure Display Language」を選択。そこで「ja」が選ばれているか確認します。
- 再起動の確認：設定変更後、右下のポップアップから「Restart」を押して再起動したか。
拡張機能が動かない
昨日まで動いていたPrettierやアイコンテーマが動かなくなった場合、以下の手順でチェックします。
無効化されている
何らかの拍子に「Disable（無効）」になっていることがあります。拡張機能の設定画面で、ボタンが「Enable（有効）」になっているか確認してください。
再インストール
一度アンインストール（Uninstall）してから、再度インストールし直すのが最も確実な解決策になることが多いです。設定ファイルが壊れている場合も、これでリセットされます。
アップデート確認
VSCode本体や拡張機能のバージョンが古すぎると、互換性の問題で動かなくなることがあります。拡張機能アイコンに数字のバッジが出ていたら、すべてアップデートしましょう。
HTML補完（Emmet）が動かない
! を打っても基本構造が出ない、 div と打ってもタグにならない場合の対策です。
- ファイル拡張子の確認：そのファイルの末尾は .html になっていますか？VSCodeは拡張子を見てEmmetを出すかどうか判断しています。
- 設定の確認：設定（Ctrl + ,）で拡張機能の中にあるEmmetから「Trigger Expansion On Tab」にチェックが入っているか確認してください。
- 言語モードの確認：画面右下に「PlainText」と出ていませんか？そこをクリックして「HTML」に変更すると解決します。
保存しても変更が反映されない
「保存もしたし、Live Serverも動いているのに、画面が変わらない！」という、非常にストレスの溜まる状況の解決策です。
- ブラウザキャッシュ：ブラウザが古いデータを記憶してしまっています。Ctrl + F5（Macは Cmd + Shift + R）でスーパーリロード（強制再読み込み）を試してみてください。
※VSCode上で行うのではなく、開いているブラウザ上で行いましょう。 - 編集しているファイルの間違い：似たような名前のファイルを複数作っていて、実は「別のファイル」を編集していた、というミスもあります。
- Live Serverの接続切れ：ブラウザを長時間開きっぱなしにしていると、接続が切れることがあります。「Go Live」を一度停止して、再度起動し直してください。
エラーを減らすために意識したいこと
エラーを「解決する力」も大切ですが、それ以上に「エラーを起こさない習慣」を身につけることが、脱・初心者への近道です。
こまめに保存する
1行書いたら保存、1つタグを追加したら保存。このリズムを体に覚えさせてください。VSCodeの「Auto Save（自動保存）」機能をオンにするのが、現代のエンジニアのスタンダードです。
ファイル名を統一する
「すべて半角小文字で書く」「スペースを使わずハイフン（-）で繋ぐ」といった自分なりのルールを決めてください。
- 良い例： about-us.html, main-style.css
- 悪い例： About-Us.html, メイン.css
拡張子を確認する
ファイル作成時に必ず .html や .css が正しく付いているか、スペルミスがないかを目視で確認する癖をつけましょう。
エラーメッセージを確認する
VSCodeの下部にある「出力」や「デバッグコンソール」、あるいはブラウザの「検証モード（F12）に出ている英語のメッセージは、宝の山です。読めない場合はそのままコピーして検索したり、翻訳にかけたりしてください。そこには必ず「どこが間違っているか」の答えが書いてあります。
まとめ
VSCodeで発生するエラーの多くは、実は非常にシンプルなミスから生まれています。
- HTMLとCSSをつなぐ設定（パス）は正しいか？
- ファイルは保存されているか？
- 拡張機能は有効になっているか？
これらを一つずつ確認する「デバッグの習慣」が身につけば、どんなに複雑なプログラムでも自力で解決できるようになります。
エラーが出ることは、失敗ではありません。エラーが出るたびに解決策を学び、あなたのエンジニアとしてのスキルは確実に積み上がっています。本記事の内容を参考に、一つ一つの壁を乗り越えて、楽しい開発ライフを送ってください！
