VSCodeでHTMLファイルをプレビューする拡張機能【2選】

VSCode（Visual Studio Code）のHTMLプレビューを行う拡張機能（プラグイン）をいつも迷うのでメモ。

「HTML Preview」は非推奨らしいので、「Live Preview」か「Live Server」を使う。

両方ともファイルを更新すると自動的に変更が反映される。便利！

評価も高く最終更新日も最近なので安心できる。

Live Preview

• VSCodeのUI上でプレビューを行う。
• 手軽だが、ちょっと狭い。
• 説明文に「この拡張機能はまだ開発中です！」とか書かれているけど気にしない。
• 評価も高く最終更新日も最近なので安心できる。

使い方

htmlファイルを開き、編集タブの右上の虫眼鏡のついた分割アイコンをクリック。

分割ウィンドウとしてプレビューが開く。

右上のハンバーガーメニューからDevtoolsウィンドウを開ける。

Live Server

• ブラウザを立ち上げてプレビューを行う。
• 広くて見やすいが、ウィンドウの切り替えが必要。
• ウィンドウの切り替えはショートカット「alt＋tab」を使うと便利。
• ダウンロード数も多く最終更新日も最近なので安心できる。

使い方

htmlファイルを開き、エディタ右下の「Go Live」をクリック。

別途ブラウザが立ち上がり、プレビューが表示される。

「Go Live」の部分にはポート番号が表示される。

この記事が参考になったら下の「参考になった！」ボタンをお願いいたします。

では、良いVSCodeライフを～