Microsoftのプログラミングエディター「Visual Studio Code」の拡張機能「Live Server」のプレビューがリアルタイムで反映されない問題でお困りのあなた。
この記事を読めば一発で解決しますよ。
Live Serverがリアルタイムで反映されない時の対処法
結論、「Live Serverの使用を諦めましょう」。
僕も色々と解決策を探っていましたが、結局は解決に至らず…。
そこで僕は「別のプラグインに乗り換える」という行動を選択。
これで「リアルタイムでプレビューが反映されない問題」は解決したので、Live Serverの代わりにおすすめなプラグインをご紹介します。
設定0でリアルタイムプレビューができる「Live Preview」
Live Previewの特徴は以下の通り。
- VS Code内でプレビュー表示が可能
- 上書き保存せずにリアルタイムでプレビューが更新される
これで十分ですよね。Live Serverの設定方法で四苦八苦する必要なんてなかったんだ…。
プレビューを開始するには、エディター右上にあるアイコンをクリックすればOKです。

特に設定も要らずにリアルタイムプレビューができるので、とりあえずリアルタイムプレビューできればいいやって場合は「Live Preview」で解決ですね。
ブラウザでプレビューを表示させる方法
Live Serverのようにブラウザでプレビューを表示させることもできます。



これでブラウザプレビューができます。
ここで開くブラウザはパソコンで設定されている「既定ブラウザ」に依存するので、ブラウザを変更したい場合は既定ブラウザの設定を変えましょう。
Windowsでのやり方は→Windows 10 で既定のブラウザーを変更する
Macでのやり方は→Mac でデフォルトの Web ブラウザやメール App を変更する – Apple サポート (日本)
それでは、以上です。
快適なプレビューライフをお楽しみください。
「Live Server」のプレビューがリアルタイムで反映されないんですが、どう設定したらいいですか?