【VS Code】プラグイン「Live Preview」の設定方法

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キー)を開いて停止もできる)


スポンサーリンク
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次