VSCodeのLive Previewでプレビューをブラウザに表示する方法


Visual Stadio Codeで、html & css & JavaScriptのプレビュー確認に便利なMicrosoft純正の拡張機能Live Previewを使っていますか?

初期設定のままだと、プレビューが、エディタ内部に表示されるので『ブラウザに表示させたい』という人も、多いのではないでしょうか?

ということで今日は、Visual Stadio Codeの拡張機能Live Previewで、プレビューをスグにブラウザに表示する方法を説明しますね。

プレビューをブラウザに表示する設定方法


拡張機能Live Previewで、プレビューをブラウザに表示させる方法は、以下のとおりです。(上の動画でも同じことやっています。)

  1. (画面右アクティビティバーにある)[管理]をクリックし、
  2. [設定]を選択し、
  3. [拡張機能]を選択し、
  4. [Live Preview]を選択し、
  5. [Open Preview Target]を、External Browser にする。

これで、htmlファイルの画面右上にあるアイコンをクリックすると、

プレビュー画面が、すぐにブラウザに表示されます。

ちなみにこの時点で、拡張機能Live Previewがローカル開発サーバーとして動き出します。

最終的にプレビューをやめる時の方法

作業が終わり、最終的にプレビューをやめる時には、(拡張機能Live Previewの)ローカル開発サーバーを停止する必要があります。ブラウザーを閉じただけでは、ローカル開発サーバーは停止していません。


ローカル開発サーバーの停止は、以下の手順でおこいます。(上の動画でも同じことやっています。)

  1. VSCode(画面下の)ステータスバーに表示されている [Port:3000] をクリックし、
  2. コマンドパレットからLive Preview: Stop Server を選択。

(画面下の)ステータスバーに、[Port:3000] が表示されていなければ、停止しています。

もちろん直接(Ctrl + Shift + p で)コマンドパレット呼び出して、Live Preview: Stop Server を選択することもOKです。

エディタ内部に表示後、さらにブラウザ表示も可能

実は、(初期設定のまま)プレビューをエディタ内部に表示しておき、さらにブラウザに表示することも可能です。


エディタ内にプレビュー表示した後に、


プレビュー表示の右上アイコンをクリックし、Open in Browserを選択すると、外部ブラウザにも表示されます。

ちなみに、プレビューを初期設定のエディタ内部に戻すには、[管理] → 設定 → 拡張機能 → Live Preview → Open Preview Target で Embedded Preview を選択します。

表示するブラウザの種類を変更するには


表示するブラウザの種類を変更するには、Windowsの 設定 → アプリ → 既定のアプリ の[Webブラウザー]で、変更します。

まとめ

ということで今日は、Visual Stadio Codeの拡張機能Live Previewで、プレビューをスグにブラウザに表示する方法を説明しました。

いちおう、拡張機能Live Previewについて、いろいろとまとめた記事も以前つくってあります。ちょっと盛り込みすぎて、わかりづらいかもしれませんが、よかったらどうぞ。

VSCodeのLive Preview インストール方法・特徴・使い方
Visual Studio Codeに、html & css & JavaScriptのプレビュー確認に便利なMicrosoft純正の拡張機能Live Previewが、公開されました。インストール方法に加えて、特徴・使い方を簡単にご紹介!

コメント

タイトルとURLをコピーしました