HTML Preview First

.html ファイルを開いたとき、ソースコードより先に Microsoft 公式 Live Preview のプレビューを表示する VS Code 拡張機能です。プレビューには VS Code の Integrated Browser を使います。

必要な拡張機能

• Microsoft Live Preview (ms-vscode.live-server)

extensionDependencies に登録されているため、VS Code Marketplace からのインストール時に依存関係として案内されます。Live Preview が未インストール、無効、または起動に失敗した場合は日本語のエラーメッセージを表示します。

動作

• Explorer などから .html を開くと、自動的に Live Preview を開始します。
• Live Preview が一時的に作る右側のエディターグループは残さず、プレビューを元の HTML と同じタブ列へ移動します。Markdownや他のファイルも同じ場所に別タブとして並びます。
• 一時的に開いた未変更の HTML ソースタブは、プレビューを確認してから閉じます。未保存変更があるタブは閉じません。
• 複数の HTML は、それぞれ固定された別の Integrated Browser タブで保持します。
• プレビュー右上の $(code) 「.htmlを表示」 を押すと元のソースを表示します。この操作で開いたソースは、その1回だけ自動プレビューの対象外になるため、すぐプレビューへ戻されません。
• HTML ソース右上の $(open-preview) 「.htmlをプレビュー」 で明示的にプレビューへ戻れます。
• HTML、CSS、JavaScript、画像などの変更検知、ローカルサーバー、再読み込み、セキュリティ処理はすべて Live Preview に委譲します。この拡張機能は HTML を実行・配信せず、独自 Webview、独自 HTTP サーバー、ファイル監視を持ちません。

Live Preview が Integrated Browser に作成したタブの URL を、同じ Live Preview サーバー上のファイル固有 URL に切り替えることで、次の HTML を開いたときのタブ再利用対象から外しています。Live Preview 自体のライブ更新用スクリプトはそのまま利用されるため、参照する CSS や JavaScript の変更も Live Preview により反映されます。

設定

livePreview.useIntegratedBrowser は、ユーザーが明示的に設定していなければ true を使用します。ユーザーが明示的に変更した値は上書きしません。

明示的に false にした場合はその選択を優先し、Live Preview 標準の Embedded Preview を使用します。この場合は Integrated Browser 固有の複数タブ分離は適用されません。

適さない場合

React、Vue、Angular など、独自の開発サーバーやルーティング、ビルド処理を持つアプリには必ずしも適しません。その場合はアプリ側の開発サーバーと通常のブラウザー起動手順を利用してください。

互換性と内部コマンド依存

Live Preview 0.5.2026072301 と VS Code 1.133.0 の実装を確認しています。Live Preview の公開コマンド livePreview.start.internalPreview.atFile（利用できない旧版では livePreview.start.preview.atFile）を使います。

Integrated Browser の公開 Extension API には URL を指定して個別タブを生成・再選択する API や、TabGroups API にはタブを別グループへ移動する API がありません。そのため、Live Preview 自身も利用している VS Code 内部コマンド workbench.action.browser.open に加え、workbench.action.unlockEditorGroup、workbench.action.moveEditorToPreviousGroup、workbench.action.moveEditorToNextGroup を使用します。プレビュータブの再利用防止には workbench.action.keepEditor、表示条件には自作 context key htmlPreviewFirstLive.isTrackedPreviewActive を使います。これらの内部コマンドは将来の VS Code で変更される可能性があります。タブの検出とクローズには公式の TabGroups API を使用します。

プライバシーと常駐処理

この拡張機能はテレメトリを送信しません。常駐中は HTML エディターの切り替えと TabGroups の変更イベントだけを購読します。setInterval、継続ポーリング、独自ファイル監視は行いません。Live Preview 起動直後に限り、実際のローカルポートを特定するため localhost の候補ポートへ有限回の確認を行い、プレビューを閉じた後は処理を続けません。

開発

npm.cmd install
npm.cmd run check
npm.cmd run package

ライセンス

MIT