Localhost(xampp等)で拡張機能Live Serverを使う方法

Visual Studio Code(VSCode)にてライブリロードを行ってくれる拡張機能 Live Server のLocalhostとの連携をご紹介します。

まず必要なもの

Step 1. Live Server Web Extensionの設定

Chromeウェブストアから拡張機能をダウンロードして追加後、以下の画面のように設定してください。

次にVSCodeの設定を開き、Live Serverの設定画面まで移動します。

Live Server Configを選択しProxy設定の項目を探します。
そのすぐ下にある [settings.jsonで編集] をクリックします

Proxyのデフォルト設定が左側に出てくるので、鉛筆のアイコンをクリックし、[設定をコピー]をクリックします。

するとワークスペースの設定に移動するので、こちらを編集していきます。

Proxyの設定内容は以下のように行ってみてください。

{
  "liveServer.settings.proxy": {
    "enable": true,
    "baseUri": "/",
    "proxyUri": "http://localhost:80/project"
  }
}

[2018-11-27修正]enableの値が間違っていましたので修正しました。ただしくはtrueです。

ProxyUriの項目は自分のアドレスに置き換えてください。

アドレスがlocalhostで作業ディレクトリがprojectの場合は、
http://localhost:80/project
のようにします。

ここで再びLive Serverの設定に戻り、Step3と同じ流れで今度は[Use Web Ext]という項目を見つけます。

見つかったらチェックを入れます。

以上で設定は完了です。
設定ファイル類は閉じてOKです。

あとはLive Serverを起動して正しくライブリロードされるかチェックしてください。

Live Serverの起動はステータスバーにあるGo Liveボタンをクリックするか、なぜかたまにそのボタンが消えていることがあるので、メニューから[表示]>[コマンドパレット]を開き、Live Serverの項目から[Open with Live Server]を選択してください。