VSCodeで作成したHTMLをブラウザでプレビューし、保存時に自動的に反映する拡張機能【Live Server】
VSCodeではHTMLをプレビューする機能がついていないので、拡張機能【Live Server】を追加（インストール）してブラウザでプレビューできるようにしましょう。
この拡張機能を使用すると、ブラウザでのプレビューはもちろん、htmlやcssで作業後に保存をすると自動的にブラウザ上で最新の状態が読み込まれて作業効率がアップします。
拡張機能【Live Server】をインストールする
- 画面左のバーの一番下にあるボタンをクリックして「拡張機能」を表示します。
- 検索欄に「Live」と入力すると「Live Server」という拡張機能が表示されます。
- 右の「インストール」をクリックして拡張機能をインストールします。
ブラウザでプレビューする方法
ブラウザでプレビューするには、htmlファイルを開いた状態で画面下のバーの右側【Go Live】と表示されている箇所をクリックします。
または、画面左のファイル一覧から、プレビューしたいファイルを右クリックして「Open with Live Server」からプレビューすることもできます。
しばらく待つとブラウザが起動してプレビューが表示されます。
プレビュー中は、先程【Go Live】と表示されていた箇所に【Port:5500】と表示され、VSCodeとブラウザが接続された状態になります。
プレビューを終了するにはこの【Port:5500】をクリックします。これでブラウザとの接続が切れますが、ブラウザ上にタブは残っているので閉じておきましょう。
Live Serverが動かない、使えない場合
右下にエラーが表示される場合
フォルダやワークスペースを開かずにhtmlを直接開いてしまうとLiveServerは使えません。
図のように右下にエラーが表示されます。
以下のどちらかの方法でファイル又はワークスペースを開いてからhtmlを開いて作業をしてください。
- 【ファイル】→【フォルダを開く】
- 【ファイル】→【ファイルでワークスペースを開く】
ファイルやフォルダのリストが表示される場合
cssを開いている状態でLive Serverを使用すると、図のようにファイルやフォルダのリストが表示されてしまいます。
この場合は、一旦Live Serverを終了（右下のPort：5500と表示されている箇所をクリック）してからhtmlを開き、再度Live Serverを実行して下さい。
もし画面を分割してhtmlとcssの両方表示している場合は、htmlのタブをクリックしてアクティブにしてLive Serverを実行しましょう。
ブラウザに反映されない場合
↓2023年12月現在は解決されています
2022年7月現在VSCode上で保存をしてもブラウザに反映されなくなっています。Live Serverのバージョンを下げると治るようです。
バージョンを下げるには、拡張機能の画面でギアマークをクリックして【別のバージョンをインストール】を選択します。
画面上部にバージョンが表示されるのでひとつ下のバージョンを選択します。
