vscodeのデバッグでPATH上でnodeのランタイムが見つからない時確認すること。

vscodeでjavascriptのデバッグをしようとして失敗すると以下のように言われます

  • 日本語では「PATH上でnodeのランタイムが見つかりません」
  • 英語では「Cannot find runtime ‘node’ on PATH」

言われますというかダイアログが表示されます。このときに確認すべきことを書いておきたいと思います。※環境としてWindowsを想定しています。

Path上でnodeランタイムが見つからないといわれた時確認すること

デバッグ時にnodeランタイムがないといわれたらとりあえず以下を確認します。

  • そもそもnode.jsがインストールされているのか?
  • launch.jsonに設定を記述していない
  • launch.jsonの記述に誤りがないか

node.jsをインストールする

node.jsがなければそもそも話にならないと思いますので、vscodeでjavascriptのデバッグを行う場合はnode.jsを入手しましょう。公式サイトは下記で、そこからダウンロードもできます。

node.jsは自動更新されないのでこれを期に再インストールをしてみました。執筆時点でnode.jsの最新バージョンは10.15.3でした。

launc.jsonに設定を記述していない

node.jsをインストールできたら、vscodeのlaunch.jsonにnodeでデバッグするための記述を行います。しかしこれは自分で記述しなくてもクリックで選択していくだけで勝手にlaunch.jsonに設定が記述されます。この作業のパターンとしてはいくつかあると思いますが、一例として以下の方法を紹介しておきます。

  1. vscodeメインメニューのDebugからAddConfigurationを選びます。すると候補が表示されます
  2. 表示された候補からNode.js: LaunchProgaramを選択します。
  3. そうするとlaunch.jsonというファイルに自動的に設定が記述されます。

vscodeを日本語化していた場合でも適宜読み替えていただければと思います。javascriptをデバッグするときはこのLaunchProgramを選択してデバッグするようにします。

launch.jsonの記述に誤りがないか確認

vscodeのデバッグ構成追加で、Node.js: LaunchProgramを選択すると、launch.jsonというファイルに以下のような記述が追加されます。↓
vscode workspaceとは

ここで確認しておきたいのはprogramという項目です。ここを間違えていると、「PATH上でnodeのランタイムが見つからない」と怒られてしまうのです。

vscodeのWorkSpaceFolderとはなにか?

vscodeのWorkSpaceFolderは自分が作業しているフォルダです。こちらはたしかデフォルトでは設定されていないはずなので、自分でWorkSpaceFolderを作成する必要があったかと思います。

vscodeメインメニューのFileからAdd Folder to WorkSpaceを選びWorkSpaceFolderを追加します。それでなにがいいたいかというときちんとデバッグするファイルのパスを指定してなかったら「PATH上でnodeのランタイムが見つからない」というエラーがおきるということです。このエラーがおきないようにするためにデバッグのたびにlaunch.jsonファイルを編集するのは面倒です。

そこで常に選択しているファイルをデバッグするようにlaunch.jsonを書き換えます。以下の画像のように${file}と書き換えます。
vscode デバッグ常に選択しているファイル

まとめ

今回の件はlaunch.jsonの記述ミスが原因でした。vscodeをさわるのが久しぶりすぎて、思い出すのに少し時間がかかってしまいました。今回のトラブルは「vscodeでデバッグすると”PATH上でnodeのランタイムが見つからない”と怒られる」という内容でしたが、このエラーは、今回確認したこと以外にもあらゆるケースがあるかと思います。しかし基本としてまずは上記に書いてあることを確認してみるとよいのではないでしょうか。

この記事の情報は以上になります。