🛠️
HTML・CSS・JSを確認するときは、VSCodeの Live Serverを使うと便利
HTML・CSS・JS でコーディングしたファイルを確認するときは、一々ファイルをブラウザで開いて確認していました。
もっと良い方法がないか調べたところ、Visual Studio Code (VSCode) の拡張機能 Live Server が便利でした。
Live Server について
- 簡易的なローカルサーバーを起動することができます。
- ファイルを更新すると、自動でブラウザがリロードされます。
HTML・CSS・JS の開発における見た目や挙動の確認が捗りました。
インストール
- VSCode を開く。
- 拡張機能を開いて「live server」を検索
- インストール
使い方
VSCode の下部にある Go Live をクリックするとローカルサーバーが立ち上がります。
また、自動でブラウザが立ち上がります。
停止するときはGo Liveから切り替わったPort:5500をクリックします。
設定
liveServer.settings.port : ポート番号をデフォルトの5500から変更できます。ランダムにしたい場合は0を設定します。
liveServer.settings.CustomBrowser : デフォルトのブラウザを変更できます。"chrome", "chrome:PrivateMode", "firefox" など。
他にもいろいろありますが主要そうなものを書きました。
以下のリンク先に設定できることが記載されています。
Discussion