VSCodeでサイトのプレビュー画面が見れる。
ファイル保存をせずに、リアルタイムでプレビューを更新してくれる。
JavaScript開発で便利なデバッグモードプレビューが可能。
プレビューをどこに表示させるかを設定
・「Ctrl + ,」で設定を開く→設定の検索で「Open Preview Target」を検索
(または、設定 → 拡張機能 → Live Preview → Open Preview Target)
・Live Preview: Open Preview Target プレビューの優先ターゲット。
のプルダウンから以下を選択
Embedded Preview:エディタ内 or エディタ内 & 外部ブラウザ両方
External Browser: 外部ブラウザのみ
プレビューする
・HTMLファイルの右上にあるプレビューアイコンを押すと、指定した場所にプレビューが表示される
※phpでは使えない
ファイルを更新するタイミングを設定
・「Ctrl + ,」で設定を開く→設定の検索で「Auto Refresh Preview」を検索
(または、設定 → 拡張機能 → Live Preview → Auto Refresh Preview)
・Live Preview: Auto Refresh Preview プレビューを自動的に更新する頻度。
のプルダウンから以下を選択
On All Changes in Editor(デフォルト):保存してもしなくても更新
On Changes to Save Files:保存したときのみ更新
Never:更新しない
停止方法
Live ServerはVSCode内で動くローカル開発サーバーなので、使用後は停止する必要がある
・ステータスバー内(画面右下)に表示されている「ポート:3000」(Port:3000)をクリック
・コマンドパレット(画面上部)から「ライブプレビュー:サーバーの停止」(Live Preview:Stop Server)を選択
(または、直接コマンドパレット(F1キー)を開いて停止もできる)