vsCode Live Serverの設定

vsCodeの拡張機能であるLiveSeverの初期設定を疎かにしたままなんとなく扱ってきたため、一旦整理する。

Liveserverインストール

(1) 拡張機能からliveserverと検索し、インストール
(2) インストール後、HTMLファイルを選択したまま右下の「Go live」を押すとリアルタイムでブラウザに表示される
(3) 「Port: ~」をもう一回押すと接続は解除される

補足
ctrl+sなどでファイルを保存すれば自動でブラウザも更新してくれる。

ワークスぺースからJSONを選択

(1) 左下の歯車アイコンから、設定をクリック
(2) ワークスペース欄を選択し、右上の「設定(JSON)を開くを選択」
(3) 「workspace.json」が開かれる

注意
ワークスペース欄が選択されていないと、別の設定ファイルが開かれてしまう

基本的な設定

{
    "liveServer.settings.port": 5500, // サーバが使用するポート。デフォルト値
    "liveServer.settings.CustomBrowser": "chrome", // 起動するブラウザの設定
    "liveServer.settings.host": "127.0.0.1", // ローカルのホストアドレスを設定
    "liveServer.settings.multiRootWorkspaceName": "main" // ワークスぺースからルートディレクトリを指定
  }

その他にも、設定→ワークスペース→「liveserver」と検索すると様々な設定項目が出てくる