VSCode でHTML&CSS のプレビューを表示する方法

簡単に

「⌘⬆︎X」で拡張機能を表示。「HTML Preview」と検索窓に打ち込み、出てきたものをダウンロード。

プレビューしたいものを開いて、「⌘K」→「V」の順に押すとプレビューが表示される。

詳しく

拡張機能から「HTML Preview」と検索し、以下のものをダウンロードします。

次に表示したいhtmlファイルを開いて、「⌘K」→「V」の順に押すだけでプレビューが出ます。「V」はコマンドを押さずに押してくださいね。

これだけで画面が2分割されてプレビューが表示されました。

※Progate のコードを拝借しています。

ただ、場合によってはCSSのコードが適用されない場合があります。

これを解決するには、全てのファイルを保存したのち、メニューバーの右にあるファイルに右矢印がついたようなマーク(Show Source)をクリックすることで反映されるようです。

まとめ

いかがでしたでしょうか？簡単に出来上がりのページを確認するには便利な拡張機能だと思います。