在 VSCode 中调试 TypeScript: 避开坑洼

2023-10-13 12:11:45

浅谈在 VSCode 中调试 TypeScript 的小坑

使用 TypeScript 编写 Node.js 代码，调试通常是轻而易举的事。然而，在 VSCode 中进行调试时，我却踩了一些小坑。本文将分享我的踩坑经历和对应的解决方案，供大家参考。

使用 tsc 编译器调试

在使用 tsc 编译器编译 TypeScript 代码时，通常需要设置 sourceMap 选项。此选项会生成一个与输出 JavaScript 文件对应的映射文件，以便调试器可以将断点映射到原始 TypeScript 代码。

在 tsconfig.json 中添加以下配置：

{
  "compilerOptions": {
    "sourceMap": true
  }
}

接下来，在 VSCode 中打开 launch.json 文件，并添加以下调试配置：

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "tsc: watch",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/index.ts",
      "args": [],
      "sourceMaps": true,
      "outFiles": ["${workspaceFolder}/index.js"]
    }
  ]
}

使用 ts-node 调试

ts-node 是一个允许直接运行 TypeScript 代码的工具，无需编译。在使用 ts-node 时，需要确保已安装此工具。

在终端中运行以下命令进行安装：

npm install -g ts-node

在 VSCode 中，打开 launch.json 文件，并添加以下调试配置：

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "ts-node",
      "type": "node",
      "request": "launch",
      "program": "ts-node",
      "args": ["${workspaceFolder}/index.ts"],
      "sourceMaps": true
    }
  ]
}