ソースコードの編集内容を自動保存しながら、Webブラウザに自動で更新・表示する方法

はじめに

※ここで紹介しているVSCodeのバージョンは、2020年8月9日時点 のものです。バージョンがそれより古いものだと、正しく動作しない可能性があります。

手順

（1）VSCodeエディタの「自動保存」をオンにする。

（2）VSCodeエディタの拡張機能「Live Server」をインストールする。
（それによって、VSCodeエディタの下部に「Go Live」という表示が出現する）

（3）VSCodeエディタ内で、HTMLファイルを選択する。

（4）「Go Live」の表示をクリックする。

（5）Webブラウザが自動で開かれて、そのHTMLファイルの内容が表示される。

その後、HTMLやそれに紐づいたCSS・JavaScriptなどを編集していくと
Webブラウザに自動で更新・反映されるようになります。

参考元

記事を書く上で、情報の確認や文章構成の参考にさせていただきました。ありがとうございました。

「VSCodeエディタのプラグイン「Live Server」でブラウザを自動更新」
https://blanche-toile.com/tools/vscode-live-server