🚀

WSL環境でLive Server起動時にHTMLを自動表示する方法

に公開
HTML
React
VS Code
WSL
liveserver
tech

はじめに

最近Reactの学習を進める中で、WSL（Windows Subsystem for Linux）環境のVS Codeの拡張機能「Live Server」を導入しました。
Live Serverとは、ローカル開発サーバーを簡単に立ち上げることができる拡張機能です。ファイルの変更を検知して自動的にブラウザをリロードしてくれるため、HTML、CSS、JavaScriptのコードの修正結果をリアルタイムで確認できる便利なツールです。

しかし、Live Serverを使い始めてすぐに一つの課題に直面しました。Live Serverを起動した際、期待していた特定のHTMLファイルがブラウザに自動表示されず、毎回手動でブラウザを立ち上げて、ファイルを選択する必要があったのです。
Live Serverを紹介している他のサイトでは、「Live Server起動時に、あらかじめ選択したHTMLファイルが自動的にブラウザで表示される」と記載があったのですが、私の環境ではなぜか自動表示してくれませんでした。

本記事では、この問題を解決し、Live Serverをより便利に活用する方法について詳しく解説していきます。

結論

WSL環境でLive Server起動時にHTMLファイルを自動表示するためには、~/.vscode-server/data/Machine/settings.jsonに以下の設定を追加すればOKです：

{
    "liveServer.settings.NoBrowser": false,
    "liveServer.settings.CustomBrowser": "chrome",
    "liveServer.settings.AdvanceCustomBrowserCmdLine": "explorer.exe"
}

※上記の設定値は、以下の記事を参考にさせていただきました：
https://qiita.com/Yutoarou/items/1b779a91dff58c76b824

設定方法

1. settings.jsonファイルについて

VS Codeの設定はsettings.jsonファイルで管理されています。このファイルの配置場所は、使用している環境によって異なります。

Windowsシステム上のVS Code:
C:\Users[ユーザー名]\AppData\Roaming\Code\User\settings.json

WSL上のVS Code:
~/.vscode-server/data/Machine/settings.json
または
.vscode/settings.json

設定ファイルの優先順位

VS Codeでは複数の場所に設定ファイルを配置できますが、以下の優先順位で適用されます：

  1. プロジェクト固有設定 (.vscode/settings.json) - 最優先
  2. WSL固有設定 (~/.vscode-server/data/Machine/settings.json)
  3. Windows設定 (C:\Users\[ユーザー名]\AppData\Roaming\Code\User\settings.json)

今回はWSL環境全体でLive Serverの動作を改善したいため、2番目のWSL固有設定を使用します。特定のプロジェクトのみで設定したい場合は、そのプロジェクトの.vscode/settings.jsonに記述してください。

なお、WSLとWindows設定を共有したい場合は、Windows設定（C:\Users\[ユーザー名]\AppData\Roaming\Code\User\settings.json）に記載することで、WSL固有設定が存在しない場合に自動的に適用されます。

2. Live Serverの設定オプション

Live Serverで利用可能な設定項目については、公式のSettings Documentationに詳しく記載されています。

参考リンク:
https://github.com/ritwickdey/vscode-live-server/blob/HEAD/docs/settings.md

このドキュメントには、settings.jsonに記載可能な各設定値とその詳細な説明が含まれており、Live Serverをカスタマイズする際の重要な参考資料になります。

3. 今回適用した設定

各設定項目の説明:

  • "liveServer.settings.NoBrowser": false
    ブラウザの自動起動を有効にします（falseで自動起動ON）

  • "liveServer.settings.CustomBrowser": "chrome"
    使用するブラウザをChromeに指定します

  • "liveServer.settings.AdvanceCustomBrowserCmdLine": "explorer.exe"
    WSL環境からWindowsのブラウザを起動するためのコマンドを指定します

設定手順

  1. WSL上でVS Codeを起動
  2. Ctrl + , で設定画面を開く
  3. 右上の「設定 (JSON) を開く」をクリック
  4. 上記の設定を追加して保存
  5. Live Serverを再起動して動作確認

トラブルシューティング

設定後も自動表示されない場合は以下を確認してください：

  • VS Codeの再起動
  • WSLの再起動
  • Chromeブラウザがインストールされているか確認

Discussion