VSCode拡張機能Live Server設定内容まとめ

先日紹介したVSCodeの拡張機能の各設定内容をまとめました。

とはいっても自分のPCをサーバーにして、ブラウザでプレビューする場合はデフォルトの設定で良いんですけどね。

設定内容
注意事項
まとめ

設定内容

起動するブラウザの設定(Advance Custom Browser Cmd Line)

Live Serverで起動するブラウザを直接（フルパスで)設定します。Custom Browserに起動したブラウザが存在しない場合に使用する。

デフォルトは使用しない(false)に設定されています。

設定ファイル(setting.json)で設定します。

Chromeのデバッグ機能設定(Chrome Debugging Attachment)

Chromeでプレビューする場合にデバッグが使用できるようになります。(別途Debugger for Chromeをインストールする必要あり)

デフォルトは使用しない(false)に設定されています。

設定ファイル(setting.json)で設定します。

起動するブラウザの設定(Custom Browser)

Live Serverで起動するブラウザを選択できます。デフォルト値であるnullの場合はデフォルトのブラウザが起動します。

それ以外の設定は以下の通りです。

Chrome
Chrome:PrivateMode
FireFox
FireFox:PrivateMode>
microsoft-eadg
blisk

上記に設定が存在しない場合は、dvance Custom Browser Cmd Lineで直接ブラウザを指定する。

情報メッセージ表示設定(Donot Show Info Msg)

デフォルトでは情報メッセージを表示する(チェックなし)。

情報メッセージはサーバー停止した時などに出るポップアップです。

タグのチェック設定(Donot Verify Tags)

Live Server起動時にhead、bodyタグの存在チェックと、存在しなかった場合の警告ポップアップを表示する設定。

デフォルトでは警告メッセージを表示する(チェックなし)となっています。

警告メッセージは以下のようなイメージです。

エントリポイント設定(File)

エントリポイントを相対パスで設定すると、404時に設定したファイルが実行される雰囲気ですが、自分はなんかうまくいきませんでした・・・。

ファイル再読み込み設定(Full Reload)

ファイルのの変更時に全ファイルを読み込むかの設定。

デフォルではCSSへの変更部分のみ読み込む(チェックなし)となっています。

ホスト設定(Host)

ローカルサーバーを起動するサーバーのIPアドレスを入力します。

デフォルトでは127.0.0.1(localhost)になっています。

https設定(Https)

設定ファイル(setting.json)で設定します。

"liveServer.settings.https": {
    "enable": false,                    // httpsの無効(false)、有効(true)
    "cert": "C:\\https\\server.cert",   // 証明書のフルパス
    "key": "C:\\https\\server.key",     // 秘密鍵のフルパス
    "passphrase": "12345"               // パスフレーズ
},

"liveServer.settings.https": {

"enable": false, // httpsの無効(false)、有効(true)

"cert": "C:\\https\\server.cert", // 証明書のフルパス

"key": "C:\\https\\server.key", // 秘密鍵のフルパス

"passphrase": "12345" // パスフレーズ

ファイル変更監視除外ファイル設定(Ignore Files)

ファイル変更のリアルタイム監視から除外するファイルの設定。

デフォルトでは*.scss & *.sassのファイルが除外設定されています。

設定ファイル(setting.json)で設定します。

rootマウント設定(Mount)

指定したパスをrootにマウントする設定です。

デフォルトでは設定されていません。

設定ファイル(setting.json)で設定します。

{
     "liveServer.settings.mount：" [
         ["/"、 "/ path1"]、
         ["/"、 "/ path2"]、
         ["/ root"、 "/ dist"]
     ]
}

{

"liveServer.settings.mount：" [

["/"、 "/ path1"]、

["/"、 "/ path2"]、

["/ root"、 "/ dist"]

]

}

Rootワークスペース設定(Multi Root Workspace Name)

VSCodeで複数フォルダを開いている場合のエントリポイントの設定。

デフォルトでは設定されていませんが、設定しなくてもLive Serverが判断してくるようです。

ブラウザ起動設定(No Browser)

Live Server起動時にブラウザを起動するかの設定。

デフォルトではブラウザを起動する(チェックなし)に設定されています。

ポート設定(Port)

Live Serverが使用するポートの設定。

デフォルトでは5500に設定されており、0を設定することで使用するポートがランダムで選択されます。

設定ファイル(setting.json)で設定します。

プロキシ設定(Proxy)

設定ファイル(setting.json)で設定します。

デフォルトは使用しないに設定されています。

"liveServer.settings.proxy": {
    "enable": false,        // プロキシを使用るかどうか。(true:使用する、false:使用しない)
    "baseUri": "/",                         
    "proxyUri": "http://localhost/php/"     // 実際の環境によって修正する。
},

"liveServer.settings.proxy": {

"enable": false, // プロキシを使用るかどうか。(true:使用する、false:使用しない)

"baseUri": "/",

"proxyUri": "http://localhost/php/" // 実際の環境によって修正する。