VS Codeのライブプレビュー拡張機能 Live Previewが超便利

Live Previewとは

VS Code (Visual Studio Code)でWordspaceのプロジェクトをライブプレビューするための拡張機能。

別の拡張機能のLive Serverに似ているが、VS Code内にプレビューを表示できるのと、上書き保存せずにプレビューが確認可能な点が異なる。

VS Code拡張機能 Live Previewを使用している様子
Live Previewを使用している様子

Live Preview - Visual Studio Marketplace

Live Previewの使い方

Live PreviewをインストールしたらVS CodeのWorkspaceのプロジェクトフォルダ内のhtmlファイルを右クリックして「Live Preview: Show Preview」を選択すればVS Codeの右側に表示される。

VS Code Live Preview: Show Preview
Live Preview: Show Preview

プレビューの上に表示されるhttp://127.0.0.1:3000/〜のURLはブラウザのアドレスバーに貼り付ければブラウザからでも確認可能。

VS Code拡張機能 Live Previewを使用している様子
Live Previewを使用している様子

プレビューのURLのPort Numberはデフォルトだと3000だが拡張機能の設定で変更できる。

Live Serverのように表示する設定

Live PreviewはLive Serverとは違い「VS Code内にプレビュー表示」「上書き保存せずにリアルタイムで更新」だが、拡張機能の設定でLive Serverのように「ブラウザにプレビュー表示」「上書き保存時に更新」に変更することもできる。

やり方は以下の通り。

Auto Refresh PreviewをOn Changes to Saved Filesに変更
Auto Refresh PreviewをOn Changes to Saved Filesに変更
Open Preview TargetをExternal Browserに変更