Visual Studio Code(VSCode)にてライブリロードを行ってくれる拡張機能 Live Server のLocalhostとの連携をご紹介します。
まず必要なもの
- Live Server 拡張機能
- Live Server Web Extension(Google Chromeの拡張機能)
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]を選択してください。