◆ WSL 拡張機能を入れて 拡張機能からウィンドウを開く
◆ ウィンドウ自体が WSL モードのようになってる
◆ そのウィンドウだとコマンドラインやデバッグ実行などが WSL 前提になってる
◆ デバッグ実行では最初に WSL でウィンドウを開けばそれ以降は WSL を意識する必要は特になかった

フロントエンド関係は Windows で完結させたいので特に WSL を使わず Windows に Node.js を入れてます
バックエンド側も Node.js なら単純に起動するだけでサーバになって Nginx とか Apache は不要です
動作的に OS コマンドの実行とかでもしない限り Linux と Windows で気にするほどの違いもありません
なので JavaScript 関係は Windows だけで Linux は使ってないことがほとんどです
(PHP や Python を使うときは WSL です)

しかし今回 Node.js を入れていない Windows 環境でデバッグ実行したいということがありました
WSL は使えて 開発系ツールは全部 WSL に入れてる PC です

Node.js なので Chrome の devtools でつないでもいいですが 今回は VSCode の機能を使ってみようと思います
これまでは VSCode の WSL 機能を特に使ってなかったのでこれが初です

useWSL は deprecated だった

以前一応 WSL の拡張機能入れていたものの特別なにか変わった気はしません
WSL にインストールしている Node.js を使ってデバッグ実行をしたいのですが 普通にデバッグ実行をしようとして Node.js を選んでも Node.js が見つからないエラーです

それっぽいワードでググってみます
出てきたのは launch.json の設定で useWSL を true にするというものでした
デバッグ実行だしまぁ設定ファイルだよねと納得
でもそれだけでパスとかその他の情報はなくてもいいものなんでしょうか?
もう少し読むと WSL 側にパスが通っていればいいんだとか

早速試したのですが 動きません
設定ファイルに useWSL と書いても間違った設定を書いたようなエラーが出ています
階層が違うのかなと説明してるサイトの例を見ましたがあってます

気になるのは結構古い情報なので今だと名前が変わってるのかもしれないです
ググっても全然出なかったので公式サイト内で検索すると deprecated で すでに使えなくなっていたようです
最近 Electron でも思ったのですが 大きいプロジェクトだと変更も多いので過去に使えて使えなくなったものはわかりやすく一覧をまとめておいてほしいです
バージョンごとの変更点を一つずつ見るとかサイト内検索を使わなくてもいいようにしてほしいです

WSL 拡張機能

deprecated なのはわかったので今は何を使えばいいかを見ると拡張機能だけでいいらしいです
でも拡張機能はすでに入っているのにデバッグ設定画面でそれらしいものはありませんし 実行しても実行ファイルが見つからずエラーになります
もしかしてこれって WSL 側にファイルがあって VSCode のアプリだけ Windows においてる場合用の拡張機能なんでしょうか?
そんなこんなで苦戦していましたが どうにか実行できるようになりました

WSL 拡張機能をインストールしていても WSL との接続は自動では有効になっていなくて手動で有効にする必要がありました
一応それも最初にやっていたはずだったのですが ウィンドウごとに行う必要がありました
それも 既存のウィンドウに対してあとから接続・切断ができるものではなく ウィンドウを開くときに WSL 拡張機能を使ってウィンドウを開く必要があります
ウィンドウ全体が WSL モードで動いてるという感じですね

WSL 接続を有効にしてウィンドウを開いても そのウィンドウでフォルダを開いたら 内部的に開き直しになってるのか WSL 接続が無効の状態に戻ってしまうようでした

  WSL 拡張機能から新規ウィンドウを開く→そのウィンドウでフォルダを開く

とするのではなく

  WSL 拡張機能からフォルダを開く

としていきなりフォルダを開く必要があります

WSL 拡張機能が入っているとウィンドウの下のステータスバーの左端にアイコンが出ます
「><」 みたいなアイコンで ここをクリックして出てくるメニューから操作ができます
WSL との接続が有効状態だと 「><」 の右側に接続しているディストリビューションが表示されます
「WSL: Ubuntu」 のような感じです
ディストリビューションが出てないときは接続できていません

WSL 拡張機能でフォルダを開こうとするとデフォルトで WSL 側のファイルシステムの中が検索対象になっています
WSL 側にソースコードを配置しろってマイクロソフトの圧が見えます
無視して Windows 側を選択もできます
Windows 側のフォルダを選択すると WSL からのパスが /mnt 以下になってるので WSL 側に置いたほうがいいとすすめられますが 無視です

デバッグ実行

WSL 接続が有効になっているウィンドウなら コマンドラインを開けば PowerShell の代わりに WSL のシェルが出ますし デバッグ実行をすると自動で WSL 側で実行されます
Node.js を選んで実行すると WSL 側で Node.js にパスが通っていたらそれだけでデバッグ実行できました
とても簡単ですね

操作方法などは Windows のローカルの場合と特に違いも感じられず 初回準備以降は WSL を意識する必要は特になかったです

VSCode Server

WSL 接続が有効の場合は WSL 側にサーバがあって Windows の VSCode はそこに接続するただのクライアントとしての動作になってるようです
VSCode のサーバというものもあるようです
ちょっと前から VSCode はウェブ上で使えたりもしますしね (https://vscode.dev)

最初に WSL 拡張機能でウィンドウを開くときにファイルのダウンロードなどが入って少し待たされますが それが VSCode のサーバアプリのようです
WSL 側のホームフォルダに .vscode-server というフォルダが作られていてそこにサーバプログラムがインストールされていました

慣れないと分かりづらいものでしたが ウィンドウ自体が WSL 用のものという別扱いになって そのウィンドウではコマンドラインやデバッグ実行などが WSL 前提になるとわかれば他に困ることは少なそうです
思ってた以上に気軽に使っていけそうですね