Live Serverがリアルタイムで反映されない時の対処法

「Live Server」のプレビューがリアルタイムで反映されないんですが、どう設定したらいいですか?

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のようにブラウザでプレビューを表示させることもできます。

①拡張機能の設定を開く
②「Auto Refresh Preview(プレビューの自動更新)」を「On Changes to Saved Files(ファイルの変更)」に設定する
③「Open Preview Target(プレビュー対象を開く)」を「External Browser(外部ブラウザー)」に設定する

これでブラウザプレビューができます。

ここで開くブラウザはパソコンで設定されている「既定ブラウザ」に依存するので、ブラウザを変更したい場合は既定ブラウザの設定を変えましょう。

Windowsでのやり方は→Windows 10 で既定のブラウザーを変更する

Macでのやり方は→Mac でデフォルトの Web ブラウザやメール App を変更する – Apple サポート (日本)

それでは、以上です。
快適なプレビューライフをお楽しみください。

コメントを残す

メールアドレスが公開されることはありません。