【VSCode】Live Server（Go Live）を導入・設定する手順

VScode

　HTML/CSS/JSのコーディング時に、ファイル保存と同時にブラウザを自動リロードさせるための開発サーバー（Live Server）の構築手順とおすすめ設定のメモ。

1. Live Server（Go Live）の概要

  • 機能: VSCode上でローカル開発サーバーを起動する拡張機能。
  • メリット: Ctrl + S でのファイル保存時にブラウザが自動更新されるため、手動リロードが不要になる。
  • 動作条件: 単一ファイルではなく、必ず「フォルダ」を開いた状態で起動する必要がある。

2.インストール手順

  1. VSCodeの左メニューから拡張機能（Ctrl + Shift + X）を開く。
  2. 検索窓に「Live Server」と入力。
  3. Ritwick Dey氏の開発した「Live Server」（紫色のアイコン）をインストールする。
  4. 完了後、画面右下のステータスバーに「Go Live」が表示されているか確認。

3. 基本操作（サーバーの起動と停止）

サーバーの起動

  • VSCodeでプロジェクトのルートフォルダを開く（Ctrl + K → Ctrl + O）。
  • 編集対象のHTMLファイル（index.html など）を開く。画面右下のステータスバーにある「Go Live」をクリック。
    • ショートカット: Alt + L を押した後に Alt + O
  • Windowsの既定ブラウザが自動起動し、ローカル環境（http://127.0.0等）でページが表示される。

変更を確認する

  • コード編集後、Ctrl + S で保存すれば即座にブラウザに反映される。

サーバーの停止

  • 画面右下のステータスバーにある「Port: 5500」をクリックして停止する。
    • ショートカット: Alt + L を押した後に Alt + C

4. カスタマイズ設定（settings.json）

設定画面（Ctrl + ,）の右上にある「設定(JSON)を開く」から、settings.json に必要に応じて以下を追記する。

① 起動ブラウザをGoogle Chromeに固定

既定のブラウザに関わらず、開発用サーバーをChromeで開く設定。

json

"liveServer.settings.CustomBrowser": "chrome"

② ファイル保存時の反映ディレイ調整

保存から自動リロードまでの遅延時間（ミリ秒）。PCの動作が重い場合は値を大きく（300等に）して安定させる。

json

"liveServer.settings.delay": 100

③ サーバー起動時に自動でブラウザを開かない

すでに起動済みのブラウザがある場合など、新しいタブが毎回開くのを防ぐ設定。

json

"liveServer.settings.NoBrowser": true

5. トラブルシューティング

  • 「Go Live」ボタンが出ない
    • ファイル単体で開いている可能性が高い。フォルダを開き直す（Ctrl + K → Ctrl + O）。
  • 自動更新（リロード）が動かない
    • Ctrl + S で確実に保存されているか確認。
    • Windows起動時にファイアウォールのブロック警告が出た場合は「アクセスの許可」が必要。

コメント