高機能で軽くて使い勝手の良い、無料のコードエディタ「Visual Studio Code」ですが、デフォルト状態だと制作中の HTML ページをブラウザプレビューすることができません。
Dreamweaver では F12 キーを押せば簡単にブラウザプレビューできていただけに、ここだけはちょっと使い勝手が悪いのです。
しかし、「Live HTML Previewer」という拡張機能をインストールすることによって、簡単に製作中の HTML ページをブラウザプレビューできるようになります。
今回は「Visual Studio Code で簡単にブラウザ表示プレビューさせる方法」を紹介します。
拡張機能「Live HTML Previewer」インストール手順
- まずは Visual Studio Code を起動します。
サイドメニューの「Extensions」アイコンをクリックします。
拡張機能検索フォームに「Live HTML Previewer」を入力またはコピペします。一番上に目的の拡張機能が表示されるので「Install」ボタンを押します。
画面がこの表示になればインストール完了です。
Live HTML Previewer でブラウザプレビューをする手順
Visual Studio Code で HTML ファイルを開いて、右クリックをすると、メニュー内に「Open in browser」があります。これをクリックします。
すると、利用しているメインブラウザが起動して、Visual Studio Code で表示している HTML ファイルのプレビューがブラウザ上で表示されます。
あとがき
Visual Studio Code を快適に利用するなら、ブラウザプレビューは必須だと思います。これ系の拡張機能はいくつかあります。
いろいろ使ってみた中では、今回紹介した「Live HTML Previewer」が一番使い勝手が良いかな？と個人的には感じます。
本記事の内容はなかなかニッチなのですが、一握りの困った方のお役に経てば幸いです。
こちらもいかがですか？
