如何在VS Code中为npm脚本调试及对应按钮绑定快捷键？

一、为npm脚本调试绑定快捷键 #

假设你的package.json中有如下测试调试脚本：

{
  "scripts": {
    "test": "jest",
    "test:debug": "node --inspect-brk node_modules/.bin/jest --runInBand"
  }
}

按以下步骤设置快捷键：

1. 打开VS Code快捷键设置：按下Ctrl+K Ctrl+S（Windows/Linux）或Cmd+K Cmd+S（Mac），也可点击左下角设置图标→选择「键盘快捷方式」。
2. 点击右上角的「打开键盘快捷方式(JSON)」图标（{}样式），打开keybindings.json文件。
3. 添加如下自定义绑定（可按需修改快捷键组合）：

{
  "key": "ctrl+shift+d t",
  "command": "workbench.action.tasks.runTask",
  "args": "test:debug",
  "when": "editorTextFocus"
}

• key：替换成你想要的快捷键组合，比如Mac环境可改为cmd+shift+d t。
• args：必须和package.json中scripts的键名完全一致（此处为test:debug）。

二、为测试调试Bug按钮设置热键 #

VS Code中的测试调试Bug按钮，本质是启动预设的调试配置，需先配置调试文件再绑定快捷键：

第一步：配置调试文件 #

在项目根目录的.vscode文件夹下创建/编辑launch.json，添加针对测试的调试配置：

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Tests",
      "type": "node",
      "request": "launch",
      "program": "${workspaceRoot}/node_modules/.bin/jest",
      "args": ["--runInBand"],
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen"
    }
  ]
}

第二步：绑定快捷键 #

1. 打开keybindings.json文件（操作同第一部分）。
2. 添加如下配置：

{
  "key": "ctrl+shift+d b",
  "command": "debug.startFromConfig",
  "args": "Debug Tests",
  "when": "editorTextFocus"
}

• key：自定义快捷键组合。
• args：必须和launch.json中configurations的name字段完全一致（此处为Debug Tests）。

截图说明 #

内容的提问来源于stack exchange，提问作者user2151099