VS Code调试器无法在TypeScript文件断点处停止但Vue文件正常

近期调试Vue.js应用时，Visual Studio Code调试器无法在纯TypeScript（.ts）文件的断点处停止，但在Vue单文件组件（.vue）中设置断点却能正常工作。

项目环境 #

• Vue.js (3.4.21) 搭配 Vite (vitejs/plugin-vue 2.3.4)
• Quasar (2.15.2)
• Visual Studio Code (1.88.1)
• Vue官方语言工具 (2.0.12)

启动配置（launch.json） #

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Debug App in Chrome",
      "url": "http://localhost:9000",
      // 确保Vite热更新后能正确映射变更
      "enableContentValidation": false,
      "webRoot": "${workspaceFolder}/src",
      // 调试前先通过任务后台启动quasar dev
      "preLaunchTask": "quasar-dev",
      // 停止调试时终止quasar dev进程
      "postDebugTask": "Terminate All Tasks",
    }
  ]
}

任务配置（tasks.json） #

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "quasar-dev",
      "command": "quasar dev",
      "isBackground": true,
      "type": "shell",
      // 该任务为监听脚本不会退出，配置以下内容让VSCode允许其持续运行
      "problemMatcher": [
        {
          "pattern": [
            {
              "regexp": ".",
              "file": 1,
              "location": 2,
              "message": 3
            }
          ],
          "background": {
            "activeOnStart": true,
            "beginsPattern": ".",
            "endsPattern": ".",
          }
        }
      ]
    },
    {
      "label": "Terminate All Tasks",
      "command": "echo ${input:terminate}",
      "type": "shell",
      "problemMatcher": []
    }
  ],
  "inputs": [
    {
      "id": "terminate",
      "type": "command",
      "command": "workbench.action.tasks.terminate",
      "args": "terminateAll"
    }
  ]
}

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