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 を開始します。
• 一時的に開いた未変更の 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 がないため、Live Preview 自身も利用している VS Code 内部コマンド workbench.action.browser.open を使用します。プレビュータブの再利用防止には 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