一、背景
最近想用TypeScript编译项目,在创建完项目后,我发现VSCode只有在调试TypeScript的单个文件时生效,如果存在引用,再进行断点调试,则调试功能不生效了。
随后,我让Chatgpt 生成一个一套配置,发现是生效的。 因此记录一下。 下面是具体内容:
面临的问题是:
在没有Test.ts 文件时, 给hello()函数增加断点,断点功能正常;
在有Test.ts 文件时, 给hello()函数增加断点或者给test函数增加断点,断点功能不正常;
当时VSCode生成的launch.json文件内容如下:
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的编译配置选项;
接下来就是这三个文件的具体内容:
json
// 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>/**"
]
}
]
}
json
// file:.vscode/tasks.json
{
"version": "2.0.0",
"tasks": [
{
"label": "TS转JS",
"type": "typescript",
"tsconfig": "tsconfig.json",
"problemMatcher": ["$tsc"],
"group": {
"kind": "build",
"isDefault": true
}
}
]
}
json
// 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"]
}