VSCodeのLive Serverを使ってみる

2026.01.22

VSCodeのLive Serverの使い方についてメモ。

インストール

左メニューの拡張機能を選択して、「Live Server」で検索をします。
結果に表示されるLive Serverをインストールします。

インストール後、下部のステータスバーにある「Go Live」をクリックすることで起動できます。

停止する場合は同じ位置に表示される「Port:XXXX」をクリックします。

もしくは、エディタでHTMLファイルを開いて右クリックから「Open with Live Server」を選択で起動、「Stop Live Server」で停止できます。

VSCodeのsettings.jsonを使って設定を変更することができます。
今回はプロジェクト単位で設定を変更する想定で、プロジェクトルートに /.vscode/settings.json を作成していくつか試してみます。

まずLive Server起動時のルートをプロジェクトルートから変更する方法です。
settings.json 内に下記を追加します。

{
  "liveServer.settings.root": "/htdocs"
}

これでプロジェクトルートにあるhtdocsディレクトリ内がサーバ起動時のルートになります。

Live Serverではファイル変更時にブラウザを自動でリロードする機能がありますが、一部ファイルを変更した時にはリロードしないようにすることもできます。

{
  "liveServer.settings.root": "/htdocs",
  "liveServer.settings.ignoreFiles": [
    "**/*.js"
  ]
}

これでJavaScript変更時にはブラウザが自動でリロードされないようになりました。
捕捉になりますが、liveServer.settings.ignoreFilesの初期値は以下になっていて、SassやTypeScriptのファイルは変更時にリロードしないようになっているようです。

[
    ".vscode/**",
    "**/*.scss",
    "**/*.sass",
    "**/*.ts"
]

参考サイト

土