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

この記事は約5分で読めます。
記事内に広告が含まれています

イメージ

こんにちは、さち です。

新年、あけましておめでとうございます。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」ファイルの記述を編集して設定いますが、VSCode の「設定」で同項目名で検索して変更することも可能です。

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

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

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 Preview VSCode の埋め込みブラウザーを使う
External Browser 外部のブラウザーを使う

VSCode では「開発者ツール(DevTools)」を使えますが、仕様上「Live Preview」で表示しているサイトは「iframe」内に描画されるため、一部制限がかかり使い勝手がよくありません。

外部ブラウザーで開けば通常どおり使えるため、「開発者ツール」をよく使う場合はこの設定を変更しておくと便利です。

コメント

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