HTML・CSS・JSを確認するときは、VSCodeの Live Serverを使うと便利

1 min read読了の目安(約1100字

HTML・CSS・JS でコーディングしたファイルを確認するときは、一々ファイルをブラウザで開いて確認していました。
もっと良い方法がないか調べたところ、Visual Studio Code (VSCode) の拡張機能 Live Server が便利でした。

Live Server について

  • 簡易的なローカルサーバーを起動することができます。
  • ファイルを更新すると、自動でブラウザがリロードされます。

HTML・CSS・JS の開発における見た目や挙動の確認が捗りました。

インストール

  1. VSCode を開く。
  2. 拡張機能を開いて「live server」を検索
  3. インストール

使い方

VSCode の下部にある Go Live をクリックするとローカルサーバーが立ち上がります。
Go Liveをクリックするとローカルサーバーが立ち上がる

また、自動でブラウザが立ち上がります。
自動でブラウザが立ち上がる

停止するときはGo Liveから切り替わったPort:5500をクリックします。
停止するときはPort:5500をクリック

設定

liveServer.settings.port : ポート番号をデフォルトの5500から変更できます。ランダムにしたい場合は0を設定します。

liveServer.settings.CustomBrowser : デフォルトのブラウザを変更できます。"chrome", "chrome:PrivateMode", "firefox" など。

他にもいろいろありますが主要そうなものを書きました。
以下のリンク先に設定できることが記載されています。

https://github.com/ritwickdey/vscode-live-server/blob/master/docs/settings.md