HTMLやCSS、JavaScriptを書いているとき、保存するたびにブラウザを手で読み込み直すのは手間です。VS Codeの拡張機能「Live Server」を入れると、保存したときにブラウザが自動で更新されます。入れ方と、使っている設定のメモです。
Live ServerはHTMLやCSSなどのファイルをそのまま見せるだけで、PHPは動かせません。PHPを使うページはXAMPPで確かめ、HTMLとCSSだけのページはLive Serverで確かめる、と使い分けています。
Live Serverでできること
Live Serverは、VS Codeの中で小さなWebサーバーを動かす拡張機能です。開いているフォルダの中のファイルを、ブラウザで http://127.0.0.1:5500 のようなアドレスで見られるようにします。
ファイルを保存すると、ブラウザのページが自動で読み込み直されます。CSSだけを変えたときは、ページを読み込み直さずにCSSだけが差し替わります。
Live Serverを使うときは、ファイル1つではなく、フォルダを開いた状態にしておきます。
インストール
- VS Codeの拡張機能の画面（Ctrl + Shift + X）を開きます。
- 「Live Server」で検索し、作者が Ritwick Dey のものをインストールします。
- 画面右下のステータスバーに「Go Live」が出ていれば完了です。
起動と停止
起動する
- 見たいHTMLファイル（index.html など）を開きます。
- 画面右下の「Go Live」を押します。
- ふだん使っているブラウザが開き、http://127.0.0.1:5500/index.html のようなアドレスでページが出ます。
あとは、HTMLやCSSを直して Ctrl + S で保存するたびに、ブラウザの表示が変わります。
HTMLファイルの上で右クリックして「Open with Live Server」を選んでも起動できます。
初めて起動したときに、Windowsのファイアウォールの確認が出ることがあります。自分のパソコンの中だけで使うなら、プライベートネットワークだけを許可すれば大丈夫です。
停止する
起動中は、ステータスバーの「Go Live」が「Port : 5500」に変わります。ここを押すとサーバーが止まります。
使っている設定（settings.json）
設定は、設定の画面（Ctrl + ,）の右上にある「設定 (JSON) を開く」から、settings.json に書き足します。
開くブラウザをChromeにする
ふだん使っているブラウザに関係なく、Live ServerのページをChromeで開きます。
"liveServer.settings.CustomBrowser": "chrome"起動したときにブラウザを開かない
すでにブラウザでページを開いているときに、起動するたびに新しいタブが増えないようにします。
"liveServer.settings.NoBrowser": true読み込み直すまでの待ち時間を変える
保存してからブラウザを読み込み直すまでの待ち時間を、ミリ秒で指定します。最初は100ミリ秒です。保存してすぐ読み込み直されて、表示が古いままになることがあるときは、300 くらいに増やします。
"liveServer.settings.wait": 300CSSを変えたときもページ全体を読み込み直す
CSSだけの差し替えで表示がおかしくなるときは、毎回ページ全体を読み込み直すようにします。
"liveServer.settings.fullReload": truesettings.json では、設定と設定の間をカンマで区切ります。たとえば、上の2つを書くと次のようになります。
{
"liveServer.settings.CustomBrowser": "chrome",
"liveServer.settings.wait": 300
}うまく動かないとき
「Go Live」が出ない
ファイルを1つだけ開いていると出ないことがあります。「ファイル」→「フォルダーを開く」（Ctrl + K → Ctrl + O）で、HTMLファイルが入っているフォルダを開き直します。
保存してもブラウザが変わらない
- Ctrl + S で保存できているかを確かめます。タブのファイル名の横に「●」が出ているときは、まだ保存されていません。
- HTMLに body のタグがないと、自動で読み込み直されません。
- ファイアウォールの確認で「キャンセル」を押していたら、Windowsのファイアウォールの設定でVS Codeの通信を許可します。
コメント