【注目記事】2020/01/14 で Windows 7 がサポート終了!使い続けたらダメな理由

Visual Studio Code で簡単にブラウザ表示プレビューさせる方法(拡張機能を利用)

About Visual Studio Code

高機能で軽くて使い勝手の良い、無料のコードエディタ「Visual Studio Code」ですが、デフォルト状態だと制作中の HTML ページをブラウザプレビューすることができません。

Dreamweaver では F12 キーを押せば簡単にブラウザプレビューできていただけに、ここだけはちょっと使い勝手が悪いのです。

しかし、「Live HTML Previewer」という拡張機能をインストールすることによって、簡単に製作中の HTML ページをブラウザプレビューできるようになります。

今回は「Visual Studio Code で簡単にブラウザ表示プレビューさせる方法」を紹介します。

拡張機能「Live HTML Previewer」インストール手順

  1. まずは Visual Studio Code を起動します。
  2. Visual Studio Code で簡単にブラウザ表示プレビューさせる方法
    サイドメニューの「Extensions」アイコンをクリックします。
  3. Visual Studio Code で簡単にブラウザ表示プレビューさせる方法
    拡張機能検索フォームに「Live HTML Previewer」を入力またはコピペします。一番上に目的の拡張機能が表示されるので「Install」ボタンを押します。
  4. Visual Studio Code で簡単にブラウザ表示プレビューさせる方法
    画面がこの表示になればインストール完了です。

Live HTML Previewer でブラウザプレビューをする手順

  1. Live HTML Previewer でブラウザプレビューをする手順
    Visual Studio Code で HTML ファイルを開いて、右クリックをすると、メニュー内に「Open in browser」があります。これをクリックします。
  2. Live HTML Previewer でブラウザプレビューをする手順
    すると、利用しているメインブラウザが起動して、Visual Studio Code で表示している HTML ファイルのプレビューがブラウザ上で表示されます。

あとがき

Visual Studio Code を快適に利用するなら、ブラウザプレビューは必須だと思います。これ系の拡張機能はいくつかあります。

いろいろ使ってみた中では、今回紹介した「Live HTML Previewer」が一番使い勝手が良いかな?と個人的には感じます。

本記事の内容はなかなかニッチなのですが、一握りの困った方のお役に経てば幸いです。