VSCodeのプレビュー画面表示について。

Question

VisualStudioCodeでReactの学習をしています。

Live Previewをインストールした上で、Index.htmlのコードを表示した際に右上に出てくる、虫眼鏡アイコンをクリックし、VisualStudioCode内でプレビューを確認していたのですが、昨日から毎回ブラウザが立ち上がる様になりました。
コードを変えた際に直ぐに反映されなくなり、不便な状態です。

何処か設定を触ってしまった可能性もありますが、該当箇所を見つける事ができず質問致しました。

同様の症状になった事が有る方、詳しい方、解決方法知っていましたらよろしくお願いします.

Answer 1

2023/11/24追記

.vscodeディレクトリ（フォルダ）内のsettings.jsonの中に、

  "livePreview.openPreviewTarget": "External Browser"

という記載はありませんか？
どうやらvscode自体の設定変更よりもsettings.jsonの設定が優先されていそうでしたので、
もし記載があれば、その設定を削除する or Embedded Previewに変更することで解消するかと思います。

試したこと

手元の環境（Mac Ventura 13.4）で以下を試したところブラウザで表示されました。

• vscodeの設定画面からLivePreviewの Open Preview TargetをEmbedded Previewにする
• .vscode/settings.json内に"livePreview.openPreviewTarget": "External Browser"を記入し保存する
• 任意のhtmlファイルをプレビュー表示する

---

軽く調べてみたところ、以下のような記事がヒットしました。

https://creating-homepage.com/archives/8813#toc1

こちらの、

初期設定を変更して、直接ブラウザに表示する方法

というところが設定されてしまっているということはありませんか？

Comments

[ice930]

回答ありがとうございます。

こちら確認し、「Embedded Preview」を設定していますが、毎回ブラウザが起動される状態です。
他に確認すべき設定等ありましたらよろしくお願いします。

[uky]

返信遅くなりました。

なるほどです、フィードバックありがとうございます！
もう少し調べてみます

[uky]

ice930さん

回答を編集し、別の回答を追記いたしましたので試してみていただけますか？

[ice930]

その後無事に表示されました！
ありがとうございます！！