環境構築
🖥️ Live Serverが起動しない
Live Server 拡張機能が正しく動作していない
😰 こんな症状
VS Code で「Go Live」ボタンを押しても、ブラウザが開かない。Live Serverを初めて使うときに起きやすいよ。
🔍 原因
HTMLファイルを開いていない状態で起動しようとしている、またはポート番号が他のアプリと競合しているよ。Live ServerはHTMLファイルが開かれている状態でないと起動できないんだ。また、デフォルトのポート5500が別のアプリに使われていると起動に失敗するよ。
❌ エラーが起きるコード
$ npx live-server
# ブラウザが開かない✅ 直し方
1. HTMLファイルを開いた状態で右下の「Go Live」をクリックする。 2. 動かない場合はVS Codeを再起動する。 3. ポート競合なら設定でliveServer.settings.portを5501等に変更する。 4. 出力パネル（Output）でLive Serverのエラーメッセージを確認する。
✅ 修正後のコード
$ npx live-server --port=8080
# ポートを指定して起動この解決法は役立ちましたか？
🔗 関連するエラー
- Live Serverが起動しない（ポート競合） — ポートが他のプロセスに使われている
- VS Code拡張が動かない — 拡張機能が正しくインストールされていない
- VS Code拡張が動かない（再起動必要） — 拡張機能のインストール後に再起動していない
- Failed to save: Unable to write file (NoPermissions) — ファイルに書き込み権限がない
- Live Serverで日本語ファイル名が文字化けする — ファイル名に日本語を使っている
🔗 別カテゴリの関連エラー
📖 この問題を学べるレッスン
📝 関連ブログ記事
- プログラミングのエラーメッセージの読み方 — エラーの読み方を基礎から解説
- VS Codeのインストール方法 — インストールと初期設定を図解で解説
- プログラミング初心者が最初にやるべきこと5選 — 目的を決めて環境構築から