Visual Studio Code HTML・CSSリアルタイムプレビュー

コードエディタ「Visual Studio Code」に拡張機能「Live HTML Previewer」を追加する手順を説明します。

Visual Studio Code | Marketplace

Visual Studio Codeの拡張機能は、「Marketplace」から探すことができます。500以上(記事執筆時点)の拡張機能が登録されています。

Marketplaceのフォームからキーワード検索し様々な拡張機能を見つけることができる。

Marketplaceのフォームからキーワード検索し様々な拡張機能を見つけることができる。

https://marketplace.visualstudio.com/

拡張機能 Live HTML Previewer | HTMLプレビュー

Visual Studio Codeの拡張機能「Live HTML Previewer」HTMLプレビューを見るためのプラグインです。

拡張機能「Live HTML Previewer」の追加方法

Visual Studio Codeを起動して、左側の拡張機能アイコンをクリック > 検索フォームに「Live HTML Previewer」を入力 >  インストールボタンをクリックします。緑のインストールボタンが「有効になりました」と表示されたらOKです。