vscodeの設定でつまずいてしまいました。

前提

vscodeを開きHTMLのファイルとcssのファイルを開き、左のバーの実行とデバックを開いて実行とデバックと書かれた青いボタンを押すとはじめは正常に選んだブラウザが開かれ実行できるのに、cssファイルに変更を加えて、再度同様の手段で実行してみるとsetting.jsonという名前のファイルが開かれてしまいます。
さらにそこからもう一度実行とデバックの青いボタンを押すと「'JSON with Comments' をデバッグするための拡張機能がありません。Marketplace に 'JSON with Comments' の拡張機能があるかどうかを検索しますか?」という表示が出て実行ができません。
cssに変更を加えたときのみに出る現象のようで、同時に開いているhtmlに変更を加えてもこのようにはなりません。
似たような質問をC#の環境でしている方がいましたがそちらを見ても解決できませんでした。
どうしたらよいでしょうか？

発生している問題・エラーメッセージ

'JSON with Comments' をデバッグするための拡張機能がありません。Marketplace に 'JSON with Comments' の拡張機能があるかどうかを検索しますか?

行動規範の内容に同意します

回答1件

ベストアンサー

発生している現象についての説明

「実行とデバッグ」ボタンは、「現在VSCodeで表示されている(アクティブなタブの)ファイル」に対して、実行とデバッグを試みます。

HTML文書を書き替えた直後は(HTML文書が表示されているので)HTML文書の実行とデバッグを試みます。VSCodeの初期設定では、特に何も設定しなくてもHTML文書に対しては既定のブラウザーがデバッガーとして選択されています。このため、「実行とデバッグ」ボタンを押すと、既定のブラウザーが開いてローカルなWebページが表示されます。

いっぽう、CSS文書を書き替えた直後は(CSS文書が表示されているので)CSS文書の実行とデバッグを試みます。ところが、VSCodeには「どのWebページを表示すればいいかわからない」(なぜなら、CSS文書は通常複数のHTML文書から参照される)ため、デバッガーの選択が必要です。このため、CSS文書で初めて「実行とデバッグ」を押したときには、ウィンドウ上部中央に選択肢が表示され、選択した項目に応じた内容のlaunch.jsonというファイルが、VSCodeで開いているフォルダーの.vscodeフォルダー以下に作成されます。

ちなみに、launch.jsonが表示された状態で「実行とデバッグ」ボタンを押すと、(コメント付きの)JSON文書の実行とデバッグを試みます。「拡張機能が～」というメッセージが出るのはそれが理由です。今回はJSON文書の実行とデバッグをしたいわけではないので、無視してください。

解決策

あなたが行ないたいことは、「作成中のHTML文書とCSS文書の変更に応じて、それらで構成されるWebページの表示を確認したい」ということではないかと想像します。

そうであれば、(まだ導入していないなら)拡張機能のLive Previewを導入してください。そして、HTML文書の置かれたフォルダーをVSCodeの「フォルダーを開く」で開いている状態で、編集中のHTML文書を右クリックし、「プレビューの表示」を選択します。すると、ウィンドウの右半分にプレビューが表示され、左半分で編集しているHTML文書やCSS文書の変更点が即時に反映されるようになります。

Live Previewは、作業中のフォルダーをドキュメントルートとするWebサーバーを起動することで実現しているため、ローカルファイルを直接表示するよりも実際のWebサーバーに近い環境で確認できます。なお、プレビューでは外部へのリンクなどが機能しないため、それらを確認するときには、プレビュー右上のボタンから「ブラウザーで開く」を選択するとか、コマンドパレットから「ライブプレビュー: デバッグプレビューの表示(外部ブラウザー)」を選択してください。

投稿2023/03/06 01:34

編集2023/03/14 23:45