VSCode中TypeScript调试配置

本文主要是介绍VSCode中TypeScript调试配置，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一、背景

最近想用TypeScript编译项目，在创建完项目后，我发现VSCode只有在调试TypeScript的单个文件时生效，如果存在引用，再进行断点调试，则调试功能不生效了。

随后，我让Chatgpt 生成一个一套配置，发现是生效的。因此记录一下。下面是具体内容：

在这里插入图片描述
面临的问题是：
在没有Test.ts 文件时，给hello()函数增加断点，断点功能正常；
在有Test.ts 文件时，给hello()函数增加断点或者给test函数增加断点，断点功能不正常；
当时VSCode生成的launch.json文件内容如下：

// .vscode/launch.json
{// 使用 IntelliSense 了解相关属性。 // 悬停以查看现有属性的描述。// 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387"version": "0.2.0","configurations": [{"type": "node","request": "launch","name": "启动程序","skipFiles": ["<node_internals>/**"],"program": "${workspaceFolder}/index.ts","outFiles": ["${workspaceFolder}/**/*.js"]}]
}

后来我用chatgpt生成了一套json文件，能够实现我期望的调试功能。接下来进入整体

二、TS构建的流程及相关配置文件

在这里插入图片描述
在VScode工程环境下，一共有三个json配置文件：
launch.json ：配置了启动的前置任务(preLaunchTask) 和程序启动入口(program)
tasks.json : 可以定义一些列任务。此处就是定义了一个要去编译TS的任务；
tsconfig.json : 定义 ts的编译配置选项；

接下来就是这三个文件的具体内容：

// file : .vscode/launch.json
{"version": "0.2.0","configurations": [{"type": "node","request": "launch","name": "Launch Program","program": "${workspaceFolder}/dist/index.js",  // 指向编译后的入口文件"preLaunchTask": "TS转JS",  // 在调试前编译 TypeScript"outFiles": ["${workspaceFolder}/dist/**/*.js"  // 指定编译输出文件的位置],"sourceMaps": true,  // 启用 source maps"skipFiles": ["<node_internals>/**"]}]}

// file:.vscode/tasks.json
{"version": "2.0.0","tasks": [{"label": "TS转JS","type": "typescript","tsconfig": "tsconfig.json","problemMatcher": ["$tsc"],"group": {"kind": "build","isDefault": true}}]
}

// tsconfig.json
{"compilerOptions": {"target": "ES6","module": "CommonJS","outDir": "./dist","rootDir": "./src","strict": true,"esModuleInterop": true,"sourceMap": true,  // 生成 source maps"skipLibCheck": true,"forceConsistentCasingInFileNames": true},"include": ["src"],"exclude": ["node_modules", "dist"]
}