2022年06月16日 更新

VSCodeの拡張機能Live Serverを使ってファイル保存と同時に実行！Web開発を楽にしよう！

どうも、クラゲジュニアです。
VSCodeの拡張機能でLive Serverというものを導入すると、HTML/CSS/JavaScriptのファイルを更新した瞬間に、ブラウザ画面に実行を反映させることができます。「更新ボタン」を押す手間が１つ減るだけですが、例えばマルチディスプレイなどで、コーディング画面とブラウザ画面が別にあるときに快適になります。

インストール

1. 左側メニューの一番下のアイコン(Extensions)をクリック
2. テキストボックスにlive serverと打ち込む
3. Live Serverの位置にあるinstallをクリック

起動するブラウザの設定

例えば、Windowsの場合でデフォルトだとEdgeが起動しますが、Chromeなど別のブラウザで起動したい場合は以下の設定を行います。

歯車アイコンを押してExtension Settingsをクリックしてください。

もし表示が出てない場合は、一旦VS Codeを終了して再び立ち上げてみてください。

下の方にスクロールするとCustom Browserという項目があるのでchromeを選択します。特に保存ボタンなどはありません。ソースコード以外のタブは×ボタンを押して閉じて良いです。さらに左側メニューの一番下のアイコン(Extensions)を再びクリックすることで、左側は非表示になります。

実行

右下にGo Liveと書かれたアイコンをクリックするとChromeが立ち上がります。

• Google Chromeはデフォルトのブラウザとして設定されていませんなどと表示された場合は×ボタンで閉じても問題ありません。
• このアプリの機能のいくつかがWindows Defenderファイアウォールでブロックされていますと表示された場合はキャンセルして問題ありません。

たまに、何らかの理由によりLive Serverが無効になっている場合がありますが、その際は右下のアイコンを2回クリックしてください。

注意点

コードはOpen Folderを使ってフォルダで開いている必要があります。

以上です。