VS Code调试TypeScript时断点跳转至JS文件问题求助

1. 修正tsconfig.json核心配置 #

必须开启源码映射并明确目录路径，这是实现TS源码调试的基础：

{
  "compilerOptions": {
    "target": "ES6",
    "module": "CommonJS",
    "outDir": "./dist", // 指定编译产物输出目录
    "sourceMap": true,  // 强制生成.map映射文件，关联TS与JS代码
    "rootDir": "./src"  // 声明TS源码根目录，保证映射路径准确
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

2. 配置VS Code调试启动项（launch.json） #

指定调试入口并关联源码映射，避免跳转到JS文件：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Debug TypeScript",
      "program": "${workspaceFolder}/dist/index.js", // 编译后的JS入口文件
      "outFiles": ["${workspaceFolder}/dist/**/*.js"], // 限定编译产物范围
      "sourceMaps": true, // 启用源码映射解析
      "resolveSourceMapLocations": ["${workspaceFolder}/**", "!**/node_modules/**"], // 仅解析项目内的映射文件，排除第三方依赖
      "preLaunchTask": "tsc: build" // 调试前自动执行编译，保证产物最新
    }
  ]
}

3. 配置自动编译任务（tasks.json） #

配合launch.json的前置任务，确保调试前总是生成最新的编译产物和映射文件：

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "tsc: build",
      "type": "typescript",
      "tsconfig": "tsconfig.json",
      "problemMatcher": ["$tsc"],
      "group": {
        "kind": "build",
        "isDefault": true
      },
      "presentation": {
        "reveal": "never" // 编译时不弹出面板，避免干扰调试流程
      }
    }
  ]
}

4. 额外排查细节 #

• 断点需打在实际可执行的代码行，不要打在类型定义、空行或注释行上，这类内容无法映射到JS执行代码
• 清空dist目录后重新编译，避免残留旧的映射文件导致路径错乱
• 确认VS Code调试面板选择的是你配置的Debug TypeScript启动项

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