VS Code 调试 TypeScript 代码的完整配置与操作步骤

VS Code 调试 TypeScript 的配置与编译

要在 VS Code 中对 TypeScript 代码进行有效调试，首要步骤是将 TypeScript 源码编译为 JavaScript。以下是具体的操作流程。

1. 在项目根目录下创建名为 tsconfig.json 的 TypeScript 配置文件。若该文件已存在，则无需重复创建。

2. 打开 tsconfig.json 文件，并添加如下配置内容。

{
  "compilerOptions": {
    "sourceMap": true,
    "outDir": "./dist",
    "target": "es5",
    "module": "commonjs"
  }
}

上述配置中，sourceMap 用于启用 Source Map 功能，outDir 指定编译后 JavaScript 文件的输出目录，而 target 和 module 则分别用于指定编译目标版本及模块规范。

3. 执行 tsc 命令，将 TypeScript 代码编译至指定目录。

tsc -p .

此处的 -p . 参数表示编译当前目录下的所有 TypeScript 文件。编译完成后，系统会在 ./dist 目录下生成与源码对应的 JavaScript 文件。

断点调试与 Source Map 映射处理

4. 在 VS Code 中打开编译生成的 JavaScript 文件，设置断点，按下 F5 或点击 Debug 按钮进入调试模式，运行程序即可开始调试。

需注意，由于 TypeScript 与 JavaScript 之间存在映射关系，断点位置可能出现偏移。此时可利用 Source Map 功能解决该问题。在 Debug 模式下，打开 Debug 控制台并切换至 Sources 选项卡，即可查看 TypeScript 与 JavaScript 代码之间的映射详情。

至此，关于在 VS Code 中调试 TypeScript 代码的方法介绍完毕。如需了解更多相关技巧，可搜索本站往期文章或浏览后续内容，感谢支持。