👨💻
nvim-dap-vscode-jsを導入してjs,tsファイルをデバッグする
最近お仕事柄TypeScriptを触ることが増えてきました。LSPが整っているのでコードの定義の確認やコードジャンプなどは困っていなかったのですが、イイ感じにデバッグする環境が整っていないことに気づきました。
調べたところ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.js
と Jest
の設定をひとまず入れてみました。
以下、独自の設定です。
- 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
を実行してブレークポイントでテスト実行が停止したのを確認できました💪
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ブランチでは解消されている模様です。特定のタグを指定してインストールされる方は注意されてください。
まとめ
nvim-dap-vscode-js
を導入してTypeScriptのデバッグ環境を整えました。各言語できっちりデバッグ環境を整えて快適なコーディングライフを送りたいものです。
参考
Discussion