求助：如何在VSCode中正确调试TypeScript而非生成的JavaScript？

下面提供两种可靠的配置方案，按需选择：

方案一：使用ts-node直接调试（无需预编译） #

适合快速调试，不用提前生成JS文件：

• 初始化项目（未初始化的话）：
  1. 执行npm init -y生成package.json
  2. 安装依赖：npm install typescript ts-node @types/node --save-dev
  3. 生成并配置tsconfig.json：执行npx tsc --init，打开文件确保"sourceMap": true（可选但推荐），按需设置"rootDir": "./src"（指定源码目录）
• 配置VSCode调试文件：
  1. 打开VSCode调试面板，点击「创建launch.json文件」，选择Node.js环境
  2. 替换为以下配置，注意修改program路径为你的TS入口文件：

     {
       "version": "0.2.0",
       "configurations": [
         {
           "name": "TS Debug (ts-node)",
           "type": "node",
           "request": "launch",
           "program": "${workspaceFolder}/src/index.ts",
           "runtimeArgs": ["-r", "ts-node/register"],
           "cwd": "${workspaceFolder}",
           "console": "integratedTerminal",
           "skipFiles": ["<node_internals>/**"]
         }
       ]
     }
     

  3. 在TS代码中打断点，启动调试即可直接调试原始TS代码

方案二：预编译+Source Map调试（适合需要生成JS产物的场景） #

通过生成source map关联TS与编译后的JS：

• 配置tsconfig.json：
  必须开启"sourceMap": true，同时设置"outDir": "./dist"（JS输出目录）、"rootDir": "./src"（源码目录）
• 添加编译命令：
  在package.json的scripts中添加：

  "scripts": {
    "build": "tsc",
    "watch": "tsc --watch"
  }
  

  执行npm run watch让TS自动监听文件变化并重新编译
• 配置VSCode调试文件：
  替换launch.json为以下内容，注意program路径对应编译后的JS入口：

  {
    "version": "0.2.0",
    "configurations": [
      {
        "name": "TS Debug (Build)",
        "type": "node",
        "request": "launch",
        "program": "${workspaceFolder}/dist/index.js",
        "cwd": "${workspaceFolder}",
        "console": "integratedTerminal",
        "skipFiles": ["<node_internals>/**"],
        "sourceMaps": true,
        "outFiles": ["${workspaceFolder}/dist/**/*.js"]
      }
    ]
  }
  

  此时在TS文件中打断点，启动调试即可关联到对应JS代码，实现TS源码调试

注意事项 #

• 断点需打在TS文件的有效代码行，避免空行、注释或未执行的代码
• 确保typescript与ts-node版本兼容，避免版本冲突导致调试失败
• 方案二中需保持npm run watch处于运行状态，否则修改TS后不会同步更新JS产物

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