Macアプリ

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)で設定します。

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

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

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

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

rootマウント設定(Mount)

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

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

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

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

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

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

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

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

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

ポート設定(Port)

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

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

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

プロキシ設定(Proxy)

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

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

Root設定(Root)

VSCodeのワークスペースのルートを変更する設定。

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

ステータスバー表示設定(Show On Statusbar)

スタータスバーにLive Serverのボタンを表示するかの設定。

デフォルトでは表示する(チェックあり)に設定されています。

表示なし(チェックなし)にした場合ステータスバーにLive ServerのGo Liveというボタンが無くなります。(設定の反映にはVSCodeの再起動が必要)

ブラウザ使用設定(Use Browser Preview)

プレビューでブラウザを使用するかの設定。ブラウザを使用しないと設定した場合はVSCodeのブラウザでプレビューが表示されます。

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

VSCodeのブラウザプレビューイメージ。

ローカルIP使用設定(Use Local Ip)

ホストにローカルIPアドレスを使用するかの設定。

デフォルトではローカルIPアドレスを使用しない(チェックなし)に設定されている。

Use Web Ext

PHPなどの動的ページを使用する場合は、拡張機能のインストールが必要っていう感じですかね・・・。すいません分かりません。

ライブラリロード時の待ち時間設定(Wait)

デフォルトでは100に設定されています。(単位はミリ秒)

注意事項

Live Serverを使用する場合はファイルを開くのではなく、フォルダを開く必要があります。ファイルを開くと下のように「Go Live」のボタンが出てこないんですよね。

フォルダで開くと問題ないです。(例として挙げてるスクショはそれっぽいフォルダになってますが、フォルダ名の決まりとかはなさそうです)

恐らく開いたフォルダをLive Serverのルートとするからですかね。

この問題についてもうちょっとだけ詳しく書いてます。
【VSCode】live serverが表示されない時の対処方法

まとめ

・自分のPCをサーバーにして、ブラウザでプレビューする場合は、設定は特に変更せずにOK。

・VSCodeでhtmlファイルを開く場合は、ファイルではなくフォルダから開く。

・プレビューの起動方法は過去の記事に記載してるので、そちらを参照ください。

初心者が模写コーディングを開始するための準備まとめProgateのHTM&CSSコースは一通りやったので、Webページの模写コーディングに取り掛かりました。 参考にさせて頂いたサイ...
ABOUT ME
Jyu2
【PC1台で稼ぐブロガー兼Webエンジニアを目指し中】IT情報やWebサービス、アプリなどの情報を発信/SIerで10年以上勤務→ストレスMAXで休職中→ブログとWebの学習を行い脱サラ計画中/ #30DAYSトライアル 1st完了→2nd実施中 / 日々の学習内容をブログにアウトプット / まずは月収5万円を目指す