VSCode 全自动调试Vue/React项目

littleboyck2025-10-15 13:59

注：文中所说 "调试按钮" 如下图

我在B站，很多教学视频中看见，使用vscdoe调试前端项目。都需要手动启动服务，然后，再次点击"调试按钮"才会进入调试模式
这看起来非常的奇怪，可以说是有点病态

为什么这么说？

如果我是一个小白，我会理所当然的认为，我点击了"调试按钮"，自然会帮我启动服务，况且这个按钮看起来也非常像是启动按钮

如果你用过jetbrains IDE 工具你会知道，当你点击"调试按钮"时，它会自动帮你启动spring boot服务

Mac/linux

在项目的.vscode文件夹，新建一个launch.json文件

内容如下：

json 复制代码

{
  // VSCode 调试：联动启动/停止。服务进程结束时自动关闭浏览器调试。
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Chrome",
      "type": "chrome",
      "request": "launch",
      // vite服务默认端口是 5173
      "url": "http://localhost:5173/",
      "webRoot": "${workspaceFolder}",
      "sourceMaps": true,
      "smartStep": true,
      // 启动调试前的钩子
      "preLaunchTask": "start-serve:dev",
      // 调试结束后的钩子
      "postDebugTask": "stop-serve:dev"
    }
  ]
}

在.vscode文件夹，再新建一个tasks.json文件

json 复制代码

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "start-serve:dev",
      "type": "shell",
      "command": "pnpm",
      "args": ["dev"], //可以这样指定端口：["dev", "--port", "5173"]
    },
    {
      "label": "stop-serve:dev",
      "type": "shell",
      // lsof -是-> Mac/linux下的命令
      "command": "lsof",
      // 这里的5173，就是--port指定的端口，不指定默认是5173
      "args": ["-ti:5173", "|", "xargs", "kill", "-9"]
    }
  ]
}

注：
tasks数组中的第一个子任务，使用的是pnpm dev, 你应该确保在package.json的scripts中配置了

见证奇迹的时刻到了

此时，你在点击 "调试按钮"，服务已经自动帮你启动，并且会自动帮你打开浏览器

当你点击"终止调试"按钮，服务也会自动帮你停止