Visual Studio Codeで簡易的なローカルサーバーを起動して、コード保存時に自動でブラウザをリロードする拡張機能「Live Server」

ちょっとしたコードを書くときに、わざわざ別のツールを使うこと無くローカルサーバーを起動し、さらにライブリロード機能（コード保存時に自動的にブラウザリロードをする機能）にも対応しているVisual Studio Codeの拡張機能が「Live Server」です。

今回はこのLive Serverに関してまとめておきます。

Live Server

marketplace.visualstudio.com

Live Server - Visual Studio Marketplace

https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

Extension for Visual Studio Code - Launch a development local Server with live reload feature for static & dynamic pages

Live Serevrの特徴は下記の通りです。

• ローカルサーバーを簡単に起動できる
• ライブリロード機能に対応

HTMLを書く場合であれば、人によっては直接HTMLファイルをブラウザに読み込んで確認しているかもしれませんが、それだと実際にサーバーにアップしたときと動きが異なる可能性があります。

ローカルサーバーを使う意味

その例の1つが「ルート相対パス」です。
下記のようなパスを指定してCSSファイルを読み込みたい場合、サーバー上であれば「example.com/assets/css/style.css」を読み込みにいきますが、直接HTMLファイルをブラウザに読み込んでいる場合は、PCの最も上位にある「assets」フォルダ内を見に行ってしまい、正しく読み込まれません。

<link rel="stylesheet" href="/assets/css/style.css">

ローカルサーバーを起動すると、指定したフォルダをルートとしてファイルを読み込むので、正しく読み込まれます。

HTMLファイルをブラウザに読み込んでいる場合は、下記のように最初に.（ピリオド）を付けて、通常の相対パスにすることで正しく読み込まれるようになります。

<link rel="stylesheet" href="./assets/css/style.css">

このように、ルート相対パスはローカルサーバー上でないと正しく読み込まれません。
可能な限り最終的にアップするサーバーと同じ環境にすることで、予想外のトラブルを早く発見できます。

ライブリロード機能

通常、コードを変更して保存したあとはブラウザに移動してリロードする必要があります。
しかし、ライブリロード機能（ホットリロード機能と呼ぶ場合もあります）を使うと、コード保存時に自動でブラウザをリロードしてコードを反映してくれます。

デュアルディスプレイで作業している人にとってかなり便利な機能で、片方の画面にVisual Studio Code、もう片方の画面にGoogle Chromeなどのブラウザを配置しておいて、コードを書いて保存すれば、すぐ横の画面でリロードされて確認できます。

非常に細かいことですが、積み重ねで時間の節約になりますし、小さなストレスがなくなります。

基本的な使い方

Live Serverをインストールすると、Visual Studio Codeの画面右下に「Go Live」というメニューが追加されます。

フォルダをVisual Studio Codeで開いた状態であれば、このメニューをクリックするとブラウザが起動して、ローカルサーバーで表示されます。

ローカルサーバーが起動すると「Port : ○○○○」という表示に切り替わって、もう1度メニューをクリックして終了できます。

エクスプローラーからページを開く

サイドバーの［エクスプローラー］で、ファイルを右クリックすると「Open with Live Server」という項目が表示されます。
これを選択すると、選択したファイルをローカルサーバー上で開いてくれます。

もしくは、ファイルを開いた状態でcommand + Lを押したあとにcommand + Oを押しても、開いているファイルがローカルサーバーで開かれます。

設定の変更

Visual Studio Codeの設定を変更したり、settings.jsonファイルにコードを追加することで、さらに便利にカスタマイズできます。

デフォルトブラウザの変更

「liveServer.settings.CustomBrowser」でデフォルトブラウザの変更ができます。

{
  "liveServer.settings.CustomBrowser": "chrome"
}

設定できる値は下記の通りです。

ローカルサーバー起動時にブラウザを起動しない

「Go Live」をクリックした時に、ブラウザを起動させたくない場合は「liveServer.settings.NoBrowser」を「true」にします。

{
  "liveServer.settings.NoBrowser": true,
}

特定ディレクトリをルートに指定する

現在開いているワークスペースのフォルダをルートにするのではなく、指定した特定のフォルダをルートに指定したい場合は「liveServer.settings.root」を使います。

例えばプロジェクトフォルダの中に「dist」フォルダを作って、そこにコンパイルされたファイルを格納している場合に使えます。

{
  "liveServer.settings.root": "/dist"
}

スマホから表示確認でいるアドレス形式に変更する

Live Serverで起動したローカルサーバーは、同じWi-Fi環境下であればスマホからでも確認できます。

「liveServer.settings.useLocalIp」を「true」にすると、表示されるURLが「192.168.0.185:5500」のようなIPアドレス形式に変わります。

{
  "liveServer.settings.useLocalIp": true,
}

このIPアドレスを、同じWi-Fi環境下のスマホのブラウザで開くと表示されます。

MacとiPhoneを使っている人であれば、スマートコピーを使うと簡単にiPhoneにIPアドレスをコピーできます。