VSCode で編集中のコードを WSL でデバッグ実行する
◆ WSL 拡張機能を入れて 拡張機能からウィンドウを開く
◆ ウィンドウ自体が WSL モードのようになってる
◆ そのウィンドウだとコマンドラインやデバッグ実行などが WSL 前提になってる
◆ デバッグ実行では最初に WSL でウィンドウを開けばそれ以降は 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 機能を特に使ってなかったのでこれが初です
WSL にインストールしている Node.js を使ってデバッグ実行をしたいのですが 普通にデバッグ実行をしようとして Node.js を選んでも Node.js が見つからないエラーです
それっぽいワードでググってみます
出てきたのは launch.json の設定で useWSL を true にするというものでした
デバッグ実行だしまぁ設定ファイルだよねと納得
でもそれだけでパスとかその他の情報はなくてもいいものなんでしょうか?
もう少し読むと WSL 側にパスが通っていればいいんだとか
早速試したのですが 動きません
設定ファイルに useWSL と書いても間違った設定を書いたようなエラーが出ています
階層が違うのかなと説明してるサイトの例を見ましたがあってます
気になるのは結構古い情報なので今だと名前が変わってるのかもしれないです
ググっても全然出なかったので公式サイト内で検索すると deprecated で すでに使えなくなっていたようです
最近 Electron でも思ったのですが 大きいプロジェクトだと変更も多いので過去に使えて使えなくなったものはわかりやすく一覧をまとめておいてほしいです
バージョンごとの変更点を一つずつ見るとかサイト内検索を使わなくてもいいようにしてほしいです
でも拡張機能はすでに入っているのにデバッグ設定画面でそれらしいものはありませんし 実行しても実行ファイルが見つからずエラーになります
もしかしてこれって WSL 側にファイルがあって VSCode のアプリだけ Windows においてる場合用の拡張機能なんでしょうか?
そんなこんなで苦戦していましたが どうにか実行できるようになりました
WSL 拡張機能をインストールしていても WSL との接続は自動では有効になっていなくて手動で有効にする必要がありました
一応それも最初にやっていたはずだったのですが ウィンドウごとに行う必要がありました
それも 既存のウィンドウに対してあとから接続・切断ができるものではなく ウィンドウを開くときに WSL 拡張機能を使ってウィンドウを開く必要があります
ウィンドウ全体が WSL モードで動いてるという感じですね
WSL 接続を有効にしてウィンドウを開いても そのウィンドウでフォルダを開いたら 内部的に開き直しになってるのか WSL 接続が無効の状態に戻ってしまうようでした
WSL 拡張機能から新規ウィンドウを開く→そのウィンドウでフォルダを開く
とするのではなく
WSL 拡張機能からフォルダを開く
としていきなりフォルダを開く必要があります
WSL 拡張機能が入っているとウィンドウの下のステータスバーの左端にアイコンが出ます
「><」 みたいなアイコンで ここをクリックして出てくるメニューから操作ができます
WSL との接続が有効状態だと 「><」 の右側に接続しているディストリビューションが表示されます
「WSL: Ubuntu」 のような感じです
ディストリビューションが出てないときは接続できていません
WSL 拡張機能でフォルダを開こうとするとデフォルトで WSL 側のファイルシステムの中が検索対象になっています
WSL 側にソースコードを配置しろってマイクロソフトの圧が見えます
無視して Windows 側を選択もできます
Windows 側のフォルダを選択すると WSL からのパスが /mnt 以下になってるので WSL 側に置いたほうがいいとすすめられますが 無視です
Node.js を選んで実行すると WSL 側で Node.js にパスが通っていたらそれだけでデバッグ実行できました
とても簡単ですね
操作方法などは Windows のローカルの場合と特に違いも感じられず 初回準備以降は WSL を意識する必要は特になかったです
VSCode のサーバというものもあるようです
ちょっと前から VSCode はウェブ上で使えたりもしますしね (https://vscode.dev)
最初に WSL 拡張機能でウィンドウを開くときにファイルのダウンロードなどが入って少し待たされますが それが VSCode のサーバアプリのようです
WSL 側のホームフォルダに .vscode-server というフォルダが作られていてそこにサーバプログラムがインストールされていました
慣れないと分かりづらいものでしたが ウィンドウ自体が WSL 用のものという別扱いになって そのウィンドウではコマンドラインやデバッグ実行などが WSL 前提になるとわかれば他に困ることは少なそうです
思ってた以上に気軽に使っていけそうですね
バックエンド側も 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 前提になるとわかれば他に困ることは少なそうです
思ってた以上に気軽に使っていけそうですね