金曜日, 8月 22, 2025

VS CODEでHTMLプレビューを表示させる

質問がありましたので・・・
VS Codeならブラウザーを使うことなくVS Code上に表示かつサブモニターに配置することもできるので、その手順を整理しました。

まず、編集したいファイルを読み込みます。個々で拡張機能を開きます。

Windows版
[ファイル]>[ユーザー設定]>[拡張機能]

macOS版
[Code]>[基本設定]>[拡張機能]
または、
[表示]>[拡張機能]

拡張機能が表示されたら[Live Preview]を検索&インストールします。

インストールが完了したら・・・

画面右上の[Show Previeew]をクリックすれば・・・

プレビュー画面が表示されます。

通常のファイルと同様に切り離すことも出来るので、サブモニターに移動させることも出来ます。もちろん修正箇所はライブで反映されます。