HTMLファイルのプレビューを開きたいとき、VScodeの拡張機能である「Live Server」を使うと非常に楽に表示をリアルタイムに確認しつつ、編集が可能なのでよく使われると思います。
その時、WSL2上で編集したファイルがLiveServerで開けない問題に当たったので、その時の対処法メモ
環境としては、WSLをVisual Studio Codeで操作していて、以上のVScode Extensionの「Live Server」がインストールされていることを前提とします。また、ブラウザはGoogle Chromeを用いることを前提としていますが、設定を変更すると他のブラウザでも対応できると思います。
問題点：LiveServerでHTMLが開けない
下図のように、HTMLファイルをLiveServerを用いて、ブラウザ上で表示確認しようとしたとき、LiveServer自体は起動しているようですが、ブラウザ上にファイルの内容が表示されないです。
以下の手順で設定を行うことで、この手順で表示を確認できるようにしていきます。
対処：LiveServerの設定を変更する
手順は、以下↓の画像と対応しています。
手順1
歯車マークをクリックして、設定を開く
手順2
検索欄に「live」という風に入力して「Live Server › Settings: Chrome Debugging Attachment」の欄を見つける
手順3
「settings.jsonで編集」をクリック
手順4
settings.jsonファイルの中身に以下を追加する。
{
省略....
"liveServer.settings.AdvanceCustomBrowserCmdLine": "/mnt/c/Program Files (x86)/Google/Chrome/Application/chrome.exe",
省略....
}Chromeまでのパスを設定してやります。パス内の「Program Files (x86)」の部分は「Program Files」だったりするので、「chrome.exe」がどこにあるのか確かめてパスを設定するようにしましょう。
以上の手順でもう一度「Open with Live Server」すると、ブラウザ上でしっかりとHTMLファイルの内容が確認できるようになっていると思います。
以上、ありがとうございました。
