👨‍💻

nvim-dap-vscode-jsを導入してjs,tsファイルをデバッグする

2023/02/11に公開

最近お仕事柄TypeScriptを触ることが増えてきました。LSPが整っているのでコードの定義の確認やコードジャンプなどは困っていなかったのですが、イイ感じにデバッグする環境が整っていないことに気づきました。

調べたところnvim-dap-vscode-js という素敵なプラグインを見つけたので、設定の流れをまとめておきます。

https://github.com/mxsdev/nvim-dap-vscode-js

導入

READMEに沿ってインストールを進めます。私の環境では lazy.nvimを利用しているので、書き方を変えています。この辺りはお使いのパッケージマネージャーの書き方で読み替えてください。

{
  "mfussenegger/nvim-dap",
  dependencies = {
    "rcarriga/nvim-dap-ui",
    "theHamsta/nvim-dap-virtual-text",
    "mxsdev/nvim-dap-vscode-js",
    {
      "microsoft/vscode-js-debug",
      build = "npm install --legacy-peer-deps && npm run compile",
    },
  },
  lazy = true,
  config = function()
    require("plugins.configs.dap")
  end,
}

configの設定

公式のREADMEに沿ってsetupを記述します。Configurationsのセクションに記載されている Node.jsJest の設定をひとまず入れてみました。

以下、独自の設定です。

  • debugger_pathにlazy.nvim経由でinstallしたパスを指定する
  • javascript, typescriptに加えてjsxでも動かせるように typescriptreact も指定する
local dap = require("dap")

require("dap-vscode-js").setup({
  debugger_path = vim.fn.stdpath("data") .. "/lazy/vscode-js-debug",
  adapters = { "pwa-node", "pwa-chrome", "pwa-msedge", "node-terminal", "pwa-extensionHost" }, -- which adapters to register in nvim-dap
})

for _, language in ipairs({ "typescript", "javascript", "typescriptreact" }) do
  dap.configurations[language] = {
    {
      type = "pwa-node",
      request = "launch",
      name = "Launch file",
      program = "${file}",
      cwd = "${workspaceFolder}",
    },
    {
      type = "pwa-node",
      request = "attach",
      name = "Attach",
      processId = require("dap.utils").pick_process,
      cwd = "${workspaceFolder}",
    },
    {
      type = "pwa-node",
      request = "launch",
      name = "Debug Jest Tests",
      -- trace = true, -- include debugger info
      runtimeExecutable = "node",
      runtimeArgs = {
        "./node_modules/jest/bin/jest.js",
        "--runInBand",
      },
      rootPath = "${workspaceFolder}",
      cwd = "${workspaceFolder}",
      console = "integratedTerminal",
      internalConsoleOptions = "neverOpen",
    },
  }
end

動かしてみる

サンプルプロジェクトを作って動かしてみます。

$ npx create-next-app --example with-jest sample
$ cd sample

# snapshotでこけるのでひとまず更新
$ npx jest --updateSnapshot

index.test.tsx を開いてデバッグしてみます。

ブレークポイントを仕込んでUIを開き、Debug Jest Tests を実行してブレークポイントでテスト実行が停止したのを確認できました💪

nvim-dap-vscode

consoleにsourcemapのエラーが出るのが気になるところですが、、まぁ許容範囲ということで。

余談

vscode-js-debugに関して、2023/02/11午後時点で最新タグのv1.75.1でdebuggerを起動すると 以下のエラーが発生するようです。

[dap-js] JS Debugger stderr:
[dap-js] JS Debugger stderr: /path-to/vscode-js-debug/src/vsDebugServer.ts:93
    console.log((result.server.address() as net.AddressInfo).port.toString());
                                                                 ^
TypeError: Cannot read properties of undefined (reading 'toString')
    at VsDebugServer.launchRoot (/path-to/vscode-js-debug/src/vsDebugServer.ts:93:66)
    at processTicksAndRejections (node:internal/process/task_queues:95:5)
[dap-js] JS Debugger exited with code 1!

mainブランチでは解消されている模様です。特定のタグを指定してインストールされる方は注意されてください。

https://github.com/mxsdev/nvim-dap-vscode-js/issues/23

まとめ

nvim-dap-vscode-js を導入してTypeScriptのデバッグ環境を整えました。各言語できっちりデバッグ環境を整えて快適なコーディングライフを送りたいものです。

参考

https://www.reddit.com/r/neovim/comments/y7dvva/typescript_debugging_in_neovim_with_nvimdap/

スタフェステックブログ

Discussion