VSCcode:作成中サイトをプレビューする「Live Preview」の使い方

この記事は約4分で読めます。

イメージ

こんにちは、さち です。

新年、あけましておめでとうございます。2022年最初のブログ更新です。本年もよろしくお願いします。

最近、ウェブサイトの作成に「Visual Studio Code(以下:VSCode)」を使っています。無料で使えるのに、動作も軽くて機能も追加できて便利なコーディングアプリです。

今回は、この VSCcode で、作成途中のウェブサイト(HTML, CSS, JavaScript)をプレビューでき「Live Preview」の使い方について書いていきます。

スポンサーリンク

「Live Preview」をインストールする

VSCode 自体にはプレビューする機能がないので、「拡張機能」を追加します。

プレビューを実装する「拡張機能」は何個かありますが、いろいろ使ってみた結果、Microsoft 純正のLive Preview」が一番簡単使いやすかったです。

難しい設定は不要ですぐ使えるので、VSCode 入門者にもおすすめです。

早速インストールしていきましょう。

  1. アクティビティバーにある「拡張機能」をクリック。(ショートカットキーは Ctrl + Shift + X
    拡張機能
  2. 検索バーに Live Preview と入力。
    検索バー
  3. Microsoft が制作した「Live Preview」を選びます。
    Live Preview
  4. インストール」ボタンをクリック。(必要な場合は、インストール後に VSCode を再起動する)
    インストール

プレビューする手順

「Live Preview」をインストールしたら、プレビューができるようになります。

VSCode 内でプレビューする

  1. HTML」ファイルを開き、エディター上で「右クリック」→「Live Preview: Show Previewと進みます。
    Live Preview: Show Preview
  2. 別のタブで、「プレビュー」が開かれます。
    プレビュー

HTML, CSS, JavaScript などページに関連するファイルの内容を変更すると、プレビューもリアルタイムで更新されます。

外部ブラウザーでプレビュー

  1. 前述の手順で VSCode 内でプレビューを開いておきます。
    プレビュー
  2. プレビューの右上にある「≡(メニュー)」アイコン→「Open in Browserの順にクリックします。
    Open in Browser
  3. 既定のウェブブラウザーで「プレビュー」が開きます。
    Firefox の表示

外部のウェブブラウザーを使う場合でも、HTML, CSS, JavaScript などの内容を変更すると、プレビューはリアルタイムで更新されます。

使うときの注意点

プレビューのリアルタイム更新は便利ですが、更新のタイミングがズレて中途半端な編集の状態でプレビューの更新が止まってしまうことがあります。

例えば、JavaScript などの編集が中途半端な状態(入力している途中)で反映されてしまい、プレビューにエラーが出てしまうのです。

この場合、エラーの発生は自分の記述ミスではないので、プレビューを更新するだけで直ります。

私はこの現象に気づかず、エラー箇所を必死に探してしまいました……。あなたは、時間を無駄にしないようにして下さい。

設定

「Live Preview」の設定を変更する方法についても書いておきます。

プレビューを自動更新するタイミング

自動更新のタイミングは、初期設定で「リアルタイム」になっていますが、「ファイルを保存した時」にもできます。

settings.json」に次のように追記します。

{
  "livePreview.autoRefreshPreview": "On Changes to Saved Files",
}

「設定(Ctrl + キー)」にある同じ名前の項目を変更することでも、同様の効果が得られます。

値は他にも指定でき、自動更新のタイミングを自分好みに変更できます。

On All Changes in Editorリアルタイムで自動更新
On Changes to Saved Filesファイルを保存した時に自動更新
Never自動更新しない(自分で更新)

 

プレビューを開く場所

プレビューを開く場所は、初期設定で「VSCode 内」になっていますが、「外部ブラウザー」にもできます。

settings.json」に次のように追記します。

{
  "livePreview.openPreviewTarget": "External Browser",
}

「設定」にある同じ名前の項目を変更することでも、同様の効果が得られます。

他の値にすることによって、更新タイミングを変更できます。

Embedded PreviewVSCode の埋め込みブラウザーを使う
External Browser外部のブラウザーを使う

コメント

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