VS CodeでHTMLを開いたのに、タグが表示されずブラウザのようにプレビューされて編集できない…。多くの場合、HTMLプレビュー系の拡張機能や「開くエディター」の関連付けが原因です。最短でテキストエディターに戻す手順と、再発しない設定をまとめます。
まずは切り分け：本当に「HTMLがレンダリング」されているか
VS Codeには「プレビュー」という言葉が2種類あります。ひとつは、単にタブが使い回されるプレビュータブ（コードは普通に表示されます）。もうひとつは、HTMLがブラウザのように描画されるHTMLプレビュー（コードが見えず、ページとして表示されます）。後者が今回のトラブルです。
| 見えている現象 | 画面の特徴 | 原因の候補 | 最初にやること |
|---|---|---|---|
| タブ名が斜体になるだけ | コードは表示される／タブが使い回される | VS Codeのプレビュータブ機能 | 設定「workbench.editor.enablePreview」を見直す |
| HTMLがページとして表示される | ブラウザ風の画面／クリックやスクロールが中心 | Live Preview、HTML Previewなどの拡張機能（カスタムエディター） | 「Reopen Editor With…」でText Editorに戻す／拡張機能を確認する |
結論：VS Code標準でHTMLをプレビュー表示する機能はない
公式ドキュメントでも、VS Codeは標準ではHTMLプレビューを提供しないと明記されています。HTMLがプレビュー表示されている場合は、拡張機能が追加した機能が動いている可能性が高いです。
原因の仕組み：拡張機能が「カスタムエディター」としてHTMLを引き受ける
VS Codeには、拡張機能が標準のテキストエディターの代わりに独自の画面（WebView）でファイルを開けるカスタムエディターという仕組みがあります。プレビュー系拡張はこの仕組みを使い、HTMLを「編集」ではなく「閲覧」寄りのUIで開くことがあります。
代表例がMicrosoft提供のLive Previewです。ローカルサーバーを立てて、HTMLを素早くプレビューできる拡張で、エディター右上のプレビューボタンやコンテキストメニューからHTMLを表示できます。便利な一方、設定や操作によっては「HTMLは常にプレビューで開く」状態になり、コード編集ができないように見えてしまいます。
最短で直す：今開いているタブを「Text Editor」に戻す
まずはいま開いているHTMLファイルを、標準のテキストエディターで開き直します。ポイントは「別タブで開く」のではなく、同じタブの表示方式を切り替えることです。
方法A：タブの表示を「Reopen Editor With…」で切り替える
- HTMLファイルを開いた状態で、コマンドパレット（Windows/Linux: Ctrl + Shift + P、Mac: Cmd + Shift + P）を開く
- View: Reopen Editor With… を検索して実行する
- 一覧から Text Editor（テキストエディター） を選ぶ
この操作で、同じファイルタブがプレビューからコード編集画面に戻ります。
方法B：エクスプローラーの「Open With…」からテキストエディターで開く
- 左側のエクスプローラーで対象の .html を右クリック
- Open With…（別のエディターで開く） を選ぶ
- Text Editor を選択
ついでに再発防止：HTMLはText Editorを既定にする
「毎回プレビューになる」のが困る場合は、Open With… の選択画面から既定のエディターをText Editorに設定します。UI上は「Configure default editor…」「Set as Default」「既定として構成」などの表現になっていることがあります。
| やりたいこと | 操作の入口 | 期待できる効果 |
|---|---|---|
| 今だけコード表示に戻す | Reopen Editor With… → Text Editor | 開いているタブが即座にコード編集画面になる |
| 今後も常にコードで開く | Open With… → 既定のエディター設定 → Text Editor | 次回以降もプレビューに戻りにくくなる |
| 拡張機能は残して使い分けたい | コードはText Editor／確認はプレビューを別タブ or 別ペインで開く | 編集と確認の両立ができる |
根本原因に対処：プレビュー系拡張機能を無効化する
「HTMLを開くたびにプレビューになる」「設定を変えても戻る」という場合、プレビュー拡張が強く関連付いている可能性があります。まずは該当拡張を一時的に無効化して挙動を確認しましょう。
無効化の手順
- 拡張機能ビューを開く（Windows/Linux: Ctrl + Shift + X、Mac: Cmd + Shift + X）
- 検索欄で live preview / html preview / preview などで検索する
- 心当たりのある拡張をDisable（無効化）する
- HTMLファイルを開き直して、コード表示に戻ったか確認する
公式ドキュメントでも、HTMLプレビューは拡張機能で提供されることが案内されています。
よくある拡張機能の例
- Live Preview（Microsoft）
- HTML Preview / Live HTML Previewer などのプレビュー拡張
設定で再発を止める：workbench.editorAssociations を確認する
拡張機能を無効化しても直らない場合は、VS Codeの設定で「どのファイルをどのエディターで開くか」が固定されていることがあります。これがworkbench.editorAssociationsです。VS Codeではこの設定で、特定の拡張子をカスタムエディター（プレビュー）で開くよう指定できます。
どこに設定が入っているか
同じ設定でも、保存場所によって優先順位が変わります。再発する人は、ワークスペース側（プロジェクト側）に設定が入っているケースが多いです。
| 保存場所 | ファイル例 | 影響範囲 | チェックの優先度 |
|---|---|---|---|
| ユーザー設定 | settings.json（ユーザー） | そのPCのVS Code全体 | 高 |
| ワークスペース設定 | .vscode/settings.json | そのフォルダー（プロジェクト）だけ | 最優先 |
設定の確認手順
- 設定（Settings）を開く（Windows/Linux: Ctrl + ,、Mac: Cmd + ,）
- 右上の「設定（JSON）を開く」から settings.json を開く
- workbench.editorAssociations を検索する
*.htmlや*.htmに関する行があれば、いったん削除（またはコメントアウト）して保存する- HTMLファイルを開き直し、Text Editorで開くか確認する
設定はいつでもリセットできます。設定画面から個別に戻す方法や、settings.jsonの該当行を削除して戻す方法が案内されています。
参考：workbench.editorAssociations の例
環境によって形式が異なります。以下は「関連付けが入っているときのイメージ」です（そのままコピペして設定するのではなく、まずは自分のsettings.jsonを確認してください）。
{
"workbench.editorAssociations": {
"*.html": "（ここにプレビュー系エディターのIDが入っている場合がある）"
}
}また、VS Codeには「開いているタブを別のエディターで開き直す（Reopen With）」機能があり、カスタムエディターとテキストエディターを切り替えられます。これはVS Codeのアップデート情報でも紹介されています。
それでも直らないときのチェックリスト
ここまでで大半は解決しますが、まだプレビュー表示になる場合は次を順に確認してください。
プロジェクト内の設定が上書きしていないか
.vscode/settings.jsonにworkbench.editorAssociationsが入っていないか- チーム開発で共有されている設定を、そのまま取り込んでいないか
拡張機能を「プロファイル」で切り替えていないか
VS Codeはプロファイル機能で拡張機能や設定のセットを切り替えられます。別プロファイルでは直る／あるプロファイルだけ再発する場合、原因はそのプロファイルに含まれる拡張や設定です。
HTMLと間違えやすい「プレビュータブ」設定ではないか
「コードは見えるが、タブが勝手に置き換わって消える」だけなら、HTMLプレビューではなくプレビュータブの挙動です。タブ見出しが斜体になるのが目印で、設定 workbench.editor.enablePreview などで制御できます。
おすすめ運用：編集はText Editor、確認はプレビューを使い分ける
プレビュー拡張を完全に消す必要はありません。むしろ「編集」と「確認」を分けると、VS CodeでのHTML作業はかなり快適になります。
Live Previewを使う場合のコツ
- HTMLは常にText Editorで開く（編集用）
- 必要なときだけLive Previewでプレビューを開く（確認用）
- プレビューは別ペインに出して、コードと並べる
Live Previewはローカルサーバーを立てて、エディター内で埋め込み表示や外部ブラウザ表示もできます。
| 確認方法 | 特徴 | 向いているケース | 注意点 |
|---|---|---|---|
| Live Preview（埋め込み） | VS Code内で確認でき、更新も追従しやすい | HTML/CSSの見た目調整、軽い静的ページ | 既定のエディター設定を変えると「編集できない」に見えることがある |
| Live Server（外部ブラウザ） | 普段のブラウザで表示確認、拡張も多い | ブラウザ拡張を使った検証、複数デバイス確認 | VS Code内に埋め込まれない（好みの問題） |
| ブラウザで直接開く | 最もシンプルで確実 | とにかく早く確認したいとき | 相対パスやルーティングが絡むと崩れることがある |
よくある質問とつまずきポイント
拡張機能を無効化したのに、まだプレビューになる
拡張機能が原因だった場合でも、workbench.editorAssociations に関連付けが残っていると、プレビューエディターで開こうとする動きが続くことがあります。設定を確認し、HTMLに関する関連付けを外してください。
Reopen Editor With… が見つからない
コマンドパレットで「Reopen」と検索すると候補が出ることが多いです。タブの右クリックメニューに表示されない場合でも、コマンドパレット経由なら実行できるケースがあります。
プレビューも使いたいが、編集に戻すのが面倒
おすすめは「HTMLはText Editorを既定に固定」したうえで、必要なファイルだけプレビューを開く運用です。プレビューは別タブ・別ペインで開いておくと、誤って編集タブがプレビューに置き換わる事故が減ります。
原因を特定するコツ：どの拡張機能がHTMLをプレビューで開いているか見抜く
「プレビューになって困る」といっても、入っている拡張機能が複数あると原因が分かりにくいことがあります。そんなときは“いま開いているHTMLタブが、どのエディターで開かれているか”を手がかりにすると早いです。
Reopen Editor With… の一覧を見て、怪しいエディター名を控える
HTMLをプレビュー表示している状態で View: Reopen Editor With… を実行すると、Text Editor以外にも選択肢が出ることがあります。その名前（例：Live Preview、HTML Preview など）が、そのまま原因の拡張機能名につながることが多いです。
拡張機能を一気に疑うなら「拡張機能なし」で起動して比較する
最短で切り分けたい場合は、VS Codeを拡張機能なしで起動して同じHTMLを開いてみてください。これで問題が再現しないなら、原因は拡張機能側にほぼ確定です。
code --disable-extensions| 確認方法 | メリット | デメリット | 向いている人 |
|---|---|---|---|
| 拡張を1つずつ無効化 | 確実に原因を特定できる | 時間がかかる | 拡張が少ない／慎重に直したい |
| 拡張機能なしで起動して比較 | 一瞬で「拡張が原因か」を判定できる | 原因の拡張名までは特定できない | まず切り分けだけしたい |
| Reopen Editor With… の候補名を見る | 原因の見当がつきやすい | 候補が表示されないこともある | すぐに当たりを付けたい |
再発しやすい落とし穴：ワークスペース設定がGitで共有されている
個人PCでは直ったのに、別のフォルダーや別PCでまた発生する場合、リポジトリ内の .vscode/settings.json に関連付けが入っていることがあります。特にチーム開発では、誰かが「便利だから」とプレビューを既定にしてコミットしてしまい、全員の環境で同じ症状が起きるケースが珍しくありません。
- プロジェクト配下の
.vscode/settings.jsonを開く workbench.editorAssociationsや*.htmlを検索する- 不要なら削除し、チームの方針として「HTMLの既定はText Editor」に揃える
プレビュー拡張を残す場合のおすすめ設定
「プレビューは便利だけど、既定で奪われるのは困る」という場合は、次の方針が安全です。
- HTMLの既定はText Editorに固定する
- プレビューは必要なときだけ開く（別タブ・別ペイン）
- 設定ファイルに
*.htmlのエディター関連付けを追加しない（もしくは追加してしまったら削除する）
これなら、コーディング中に突然「ブラウザ表示になって編集できない」と焦る場面がほぼなくなります。
まとめ：直す手順は「開き直す」→「関連付けを戻す」→「拡張を整理」
VS CodeでHTMLがコードではなくプレビュー表示される場合、ほとんどはプレビュー系拡張機能かエディター関連付け（workbench.editorAssociations）が原因です。まずはReopen Editor With…でText Editorに戻し、次に既定のエディターをText Editorへ固定、最後に設定と拡張機能を整理すると再発しにくくなります。
コメント