如何为VSCode tasks.json启动的Flask进程附加调试器？

你可以通过修改tasks.json，让Flask进程以调试模式启动并开放调试端口，再添加一个附加调试的任务，实现自动启动并调试的效果，无需手动操作调试按钮：

1. 修改Flask启动任务，开启调试监听 #

将原来的Flask启动命令替换为带debugpy的调试启动命令，让进程等待调试器连接：

{
  "label": "启动Flask后端（带调试端口）",
  "type": "shell",
  "command": "python -m debugpy --listen 127.0.0.1:5678 -m flask --debug --app main run",
  "args": [],
  "problemMatcher": [],
  "runOptions": {
    "runOn": "folderOpen"
  }
}

• debugpy是Python官方调试库，需先通过pip install debugpy安装
• --listen 127.0.0.1:5678指定调试器监听的本地端口，可自行修改

2. 添加附加调试器的任务 #

新增一个任务，调用VSCode内置命令自动附加到Flask进程的调试端口：

{
  "label": "附加Flask调试器",
  "type": "shell",
  "command": "${command:python.debug.configure}",
  "args": [
    "--request", "attach",
    "--port", "5678",
    "--host", "127.0.0.1"
  ],
  "dependsOn": ["启动Flask后端（带调试端口）"],
  "problemMatcher": [],
  "runOptions": {
    "runOn": "folderOpen",
    "waitForPrevious": true
  }
}

• dependsOn确保先启动Flask进程再执行附加操作
• waitForPrevious: true保证Flask进程启动并监听端口后，再触发调试器附加

3. 保留React前端启动任务 #

继续保留你原有的React启动任务：

{
  "label": "启动React前端",
  "type": "shell",
  "command": "npm run dev",
  "args": [],
  "problemMatcher": [],
  "runOptions": {
    "runOn": "folderOpen"
  }
}

4. 整合所有任务 #

将以上任务整合到tasks.json的tasks数组中，确保打开VSCode时自动触发所有任务：

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "启动React前端",
      "type": "shell",
      "command": "npm run dev",
      "args": [],
      "problemMatcher": [],
      "runOptions": {
        "runOn": "folderOpen"
      }
    },
    {
      "label": "启动Flask后端（带调试端口）",
      "type": "shell",
      "command": "python -m debugpy --listen 127.0.0.1:5678 -m flask --debug --app main run",
      "args": [],
      "problemMatcher": [],
      "runOptions": {
        "runOn": "folderOpen"
      }
    },
    {
      "label": "附加Flask调试器",
      "type": "shell",
      "command": "${command:python.debug.configure}",
      "args": [
        "--request", "attach",
        "--port", "5678",
        "--host", "127.0.0.1"
      ],
      "dependsOn": ["启动Flask后端（带调试端口）"],
      "problemMatcher": [],
      "runOptions": {
        "runOn": "folderOpen",
        "waitForPrevious": true
      }
    }
  ]
}

配置完成后，打开VSCode会自动启动React前端、带调试端口的Flask后端，并自动附加调试器，你可以直接在代码中设置断点查看变量。

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