インストール
拡張機能は「Live Server - Visual Studio Marketplace」の「Install」ボタン、またはエディタのメニューにある「拡張機能」からインストールでき、エディタ上でインストールする場合は Live Server と検索すれば該当の拡張機能が出てくると思います。
その後、エディタを再起動させればインストール完了になります。
使い方
サーバーの起動
拡張機能の有効化後、ワークスペース内にあるファイルを開くとエディタ右下に画像のような「Go Live」という文字がアイコンとともに表示されるので、これをクリックすればhttp://127.0.0.1:5500でブラウザが起動し、ファイル更新を行うと自動でブラウザが更新されるのを確認できます。
もしくは下記いずれかの方法でも起動させることができます。
- ワークスペース内のファイルを右クリックで表示されるメニューで「Open with Live Server」を選択。
- エディタ上を右クリックで表示されるメニューで「Open with Live Server」を選択。
- Mac：command + L, command + O、 Win：Alt + L, Alt + Oのショートカットキーを続けて入力。
- F1 または Mac：command + shift + P、 Win：Ctrl + Shift + Pで表示されるコマンド表示内で、
Live Server: Open with Live Serverを実行。
サーバーの停止
サーバーを停止させる場合は、先ほど「Go Live」となっていた部分が起動後に「Port: 5500」という表示に変わっているので、これをクリックすることで停止させることができます。
もしくは下記いずれかの方法でも停止させることができます。
- エディタ上を右クリックで表示されるメニューで「Stop Live Server」を選択。
- Mac：command + L, command + C、 Win：Alt + L, Alt + Cのショートカットキーを続けて入力。
- F1 または Mac：command + shift + P、 Win：Ctrl + Shift + Pで表示されるコマンド表示内で、
Live Server: Stop Live Serverを実行。
各種設定
サイトのセッティングページに詳しく掲載されていますが、settings.jsonに記述することで「Live Server」の各種設定を自分好みに設定をすることができます。
（GUI設定画面なら「拡張機能 > Live Server Config」で該当項目が確認・変更できます。）
例えば、デフォルトのポート番号は5500に設定されていますが、これを任意の番号にしたい場合はliveServer.settings.portで下記のように記述することで変更できます。（コードは3000にしたい場合）
settings.json
"liveServer.settings.port": 3000
もうひとつ例をあげると、デフォルトでは起動するブラウザはマシンで設定しているデフォルトブラウザが選択されるようになっていますが、これをliveServer.settings.CustomBrowserを用いて下記のように記述すれば、デフォルトブラウザが他に選択されていた場合でもChromeで起動させることができます。
また、chrome:PrivateModeのように記述すれば、プライベートモード（シークレットモード）で開くことも可能です。
settings.json
"liveServer.settings.CustomBrowser": "chrome"
上記以外にもルート変更・ブラウザ起動の有無を設定・変更を無視するファイルの指定・リロード前の遅延数値などいろいろと用意されており、それらについてはデフォルト値とあわせて下記ページで確認することができます。
普段からBrowsersyncとかwebpack-dev-serverを使っている人からしたら不要だと思いますが、開発環境を用意していないとか用意するまでもない簡易的な作業時にブラウザを自動リロードさせたいときには便利です。
同じようにライブリロード機能を使えるようにする拡張機能は他にもありますし全部試したわけではないですが、イメージ付きで使い方の説明もあってわかりやすく、セッティング項目も多数用意されていたりで、現時点だといくつか試した中ではこれが一番良かった印象でした。
拡張機能のインストールや詳細については以下より確認できます。