はじめに
VScodeでHTMLやCSSを編集する際、編集のたびに保存してブラウザを開いて確認をするのって面倒ですよね。そこでオススメな拡張機能を記載します。
Live Preview とは？
Live Previewは、VS Code内でリアルタイムにHTMLファイルのプレビューを表示できる拡張機能です。この拡張機能を使うと、ブラウザを別ウィンドウで開く必要がなく、エディタ内で直接Webページの見た目や動作を確認できます。
使い方
VSCodeを開き、サイドバーの「拡張機能」で「LivePreview」を検索してダウンロードします。
編集しているHTMLファイルを右クリックして「プリビューの表示」を選択するか、右上の「プリビューの表示」アイコンを押すとプリビュー画面を確認できます。
HTMLやCSSを変更するとリアルタイムでプリビュー表示されます。
使った感想
HTMLやCSSの変更がリアルタイムで分かるのは編集する際にすごく便利に感じます。
ただし、htmlの拡張子でしかプレビュー画面を見ることができないようです。