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

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

まず必要なもの

Step 1. Live Server Web Extensionの設定

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

Step 2. Visual Studio Codeの設定

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

Step 3. Live ServerのProxy設定

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

 

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

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

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
のようにします。

Step 4. Live Server Web Extensionの有効化

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

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

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

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

おまけ

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