開発者やテクニカルライターにとって、Visual Studio Code（VS Code）でのプレビュー機能は作業スピードを左右する中核機能の一つです。Markdownによる仕様書作成からHTML/CSSのリアルタイムレンダリング、SVGや画像アセットの確認まで、エディタ内で即座に視覚化できる環境は日々の生産性を大きく引き上げます。
しかし現場では、「ショートカットを押してもプレビューが表示されない」「画面が真っ白のまま更新されない」「スクロールが連動しない」といったトラブルに直面することも少なくありません。本記事では、不具合の即時解決策から、作業効率を劇的に改善する拡張機能や最新設定までを体系的に解説します。
📌 【この記事の重要ポイントまとめ】- 要点1：プレビューの白紙化や非表示トラブルは、ワークスペースのセキュリティ制限や拡張機能の競合、Webviewキャッシュのクリアで即座に対処可能。
- 要点2：MarkdownやHTMLの分割表示・スクロール同期をショートカット1つで制御し、エディタ内レンダリング環境を極限まで最適化できる。
- 要点3：Live ServerやMarkdown Preview Enhancedなど最新プラグインの連携により、ブラウザレスな高速開発・執筆ワークフローが完成する。
【トラブル解決】VSCodeのプレビューが表示されない・白紙になる原因と対処法
作業中に突然プレビューが真っ白になったり、編集内容のリアルタイム更新が反映されなくなったりするトラブルは、エディタの描画エンジン（Webview）やセキュリティ設定に起因することが大半です。代表的な原因と現場で即効性のある対処手順をまとめました。
まず疑うべきはワークスペースの信頼モード（Restricted Mode）です。セキュリティ保護のため、未信頼のフォルダではスクリプト実行やリッチプレビューが自動的に遮断されます。ウィンドウ左下の盾アイコンをクリックし、「Trust Workspace（ワークスペースを信頼）」に切り替えることで表示が復旧します。
次に多いのが、エディタ内部のWebviewキャッシュ破損や拡張機能同士の競合です。以下の手順でプロセスをリフレッシュすると解決します。
【プレビュー復旧のチェックリスト】
- ウィンドウの再読み込み：コマンドパレット（Ctrl + Shift + P / Cmd + Shift + P）を開き、「Developer: Reload Window」を実行。
- 競合拡張機能の切り分け：MarkdownやHTML関連の拡張機能が重複して有効化されていないか確認し、一度無効化して標準プレビューの挙動をテスト。
- 設定の競合解消：settings.json 内で markdown.preview.openMarkdownLinks やスクリプト実行制限のカスタム設定が意図せず干渉していないか見直す。
【作業効率UP】Markdownプレビューの基本ショートカットと画面分割テクニック
ドキュメント執筆時に最も多用するMarkdownプレビューは、適切なキーバインドを身体に覚え込ませるだけで作業の手戻りが激減します。標準で用意されているショートカットキーは、OSごとに以下のように割り当てられています。
【Markdownプレビューの主要ショートカット一覧】
- プレビューを横（サイド）に並べて開く：
Windows / Linux: Ctrl + K を押した後に V
Mac: Cmd + K を押した後に V - 現在のタブをプレビューに切り替える：
Windows / Linux: Ctrl + Shift + V
Mac: Cmd + Shift + V - ソースコードとプレビューのフォーカス切り替え：
Ctrl + 1（エディタ側） / Ctrl + 2（プレビュー側）
作業効率を高める上で欠かせないのが、エディタとプレビューの自動スクロール連動（同期スクロール）です。長文のドキュメントをスクロールした際、プレビュー側が追従しない場合は、設定画面（Ctrl + , / Cmd + ,）で以下の項目が有効になっているか確認してください。
・Markdown > Preview: Scroll Editor With Preview（プレビュー操作時にエディタを同期）
・Markdown > Preview: Scroll Preview With Editor Selection（エディタのカーソル位置にプレビューを同期）
