0
1

More than 1 year has passed since last update.

VS CodeでHTML/CSSを作成後、プレビューができない時の対処法

Posted at

問題:
VSCodeにてHTML/CSSのプレビューが以下のようになり、上手くできませんでした。
・拡張機能LiveServerを用いて開いた場合
コードを変えてもリアルタイムで反映されず、ブラウザを更新しても'Live Reload is not possible as body or head tag or defined tag is missing in HTML'とエラーメッセージが表示され、更新されない
・HTMLテキストをブラウザで直接開いた場合
ブラウザを更新しても更新されない

対処法:
VSCodeの設定を開き、Auto Saveの項目をafterDelayに変える

以上でいずれの場合も解決しました。ブラウザで直接開いた場合も更新されなかったため、HTMLテキストが変更されるたびに保存されていないのでは?と考え設定を確認したところ、案の定Auto Saveがデフォルトではoffになっていたので設定を変えてみたところ問題が解決しました。

ひとこと:
YouTubeのチュートリアル動画を見様見真似でいじっていたのですが、動画と同じように動作せず、この問題に対する対処法を説明している記事等も日本語・英語のいずれでも見かけなかったため、初の寄稿をする運びとなりました。記事がもっと読みやすくなるレイアウトや、検索に引っかかりやすい工夫等あると思うのですが、その辺は後々勉強ということで:v:

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1