VS Code调试React应用时自动启动npm并一键开启调试的配置方法

可以通过VS Code的预启动任务+调试配置组合实现一键启动，不需要安装第三方插件，配置步骤如下：

1. 配置后台启动服务的任务 #

在项目根目录的.vscode文件夹下新建tasks.json文件，写入以下配置：

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "start-react-dev-server",
      "type": "npm",
      "script": "start",
      "isBackground": true,
      "problemMatcher": {
        "owner": "custom",
        "pattern": {
          "regexp": "."
        },
        "background": {
          "activeOnStart": true,
          "beginsPattern": "Starting the development server",
          "endsPattern": "Compiled successfully|webpack compiled successfully|You can now view"
        }
      }
    },
    {
      "label": "stop-react-dev-server",
      "type": "process",
      "command": [
        "${command:workbench.action.tasks.terminate}",
        "${command:workbench.action.acceptSelectedQuickOpenItem}"
      ]
    }
  ]
}

配置说明：

• 标记npm start为后台运行任务，避免因为服务持续运行卡住调试流程
• 通过匹配控制台输出的标志性文案判断服务是否启动完成，识别到成功提示后自动进入下一步
• 额外配置了停止服务的任务，调试结束后自动关闭npm进程，避免残留3000端口占用

2. 更新调试配置文件 #

替换原有.vscode/launch.json的内容为：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "pwa-msedge",
      "request": "launch",
      "name": "Launch Edge debug for React",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}",
      "preLaunchTask": "start-react-dev-server",
      "postDebugTask": "stop-react-dev-server"
    }
  ]
}

使用效果 #

配置完成后直接按F5，或者点击顶部菜单「运行→启动调试」，会自动按顺序执行：

• 后台启动npm start运行React开发服务
• 检测到服务编译启动成功后，自动拉起Edge浏览器访问localhost:3000
• 自动附加调试器，断点调试、变量查看、控制台日志捕获等功能全部正常可用
• 点击停止调试时，自动终止后台运行的npm服务进程，不需要手动关闭终端

异常排查 #

• 如果启动后长时间卡在任务运行阶段不打开浏览器：检查tasks.json中endsPattern配置的关键字，和你本地运行npm start时编译成功的控制台输出是否匹配，不同版本react-scripts的成功提示可能略有差异，把实际输出的标志性文案加到正则匹配里即可
• 如果提示3000端口被占用：先手动关闭之前残留的node进程，正常配置了停止任务后，调试结束会自动清理进程，不会出现该问题
• 如果不需要调试结束自动关闭服务：直接删除launch.json中postDebugTask对应的配置行即可

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