vscode调试ts

参考文章:

编译后调试

安装依赖

1
npm install typescript --save-dev

配置任务

tsconfig.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
"compilerOptions": {
"module": "commonjs",
"esModuleInterop": true,
"target": "es6",
"noImplicitAny": true,
"moduleResolution": "node",
"sourceMap": true,
"outDir": "dist",
"baseUrl": ".",
"paths": {
"*": ["node_modules/*", "src/types/*"]
}
},
"include": ["src/**/*"]
}

参数解释

  • “module”: “commonjs”: 定义输出模块类型。commonjs 是 Node.js 中使用的标准模块格式。
  • “esModuleInterop”:true:允许使用备用模块导入语法; 例如你可能会使用语法:import bar from ‘foobar’;
  • “target”: “es6”:输出 Javascript 语言规范。NodeJS 支持 ES6,因此我们将其设置为 ES6。
  • “noImplicitAny”: true:将此设置为 true 会在使用默认的 any 类型时抛出错误。
  • “moduleResolution”: “node”:Typescript 将模拟 Node 的模块解析策略。
  • “sourceMap”: true:Typescript 源码将与 Javascript 一起输出。 以便我们在进行断点调试时将运行的 Javascript 代码映射到 Typescript 上。
  • “outDir”: “dist”:编译生成的 .js 文件输出路径。通常使用 dist/ 目录。
  • include:可以配置一组文件路径来指定编译哪些文件,这里我们添加了 src/ 下的所有文件。

package.json

1
2
"tsc": "tsc",
"tsc:w": "tsc -w"

.vscode/tasks.json

1
2
3
4
5
6
7
8
9
10
11
12
13
{
// 有关 tasks.json 格式的文档,请参见
// https://go.microsoft.com/fwlink/?LinkId=733558
"version": "2.0.0",
"tasks": [
{
"type": "typescript",
"tsconfig": "tsconfig.json",
"option": "watch",
"problemMatcher": ["$tsc-watch"]
}
]
}

点击 vscode 终端 —> 运行任务 —>ts 监视:typescript.json,之后每次编辑 ts 文件将自动转编译为 js 文件

.vscode/launch.json

添加 debug 配置

1
2
3
4
5
6
7
8
9
{
"name": "Current JS File",
"type": "node",
"request": "launch",
"program": "${workspaceRoot}/dist/index.js",
"args": [],
"cwd": "${workspaceRoot}",
"protocol": "inspector"
}
  • program :选择要执行的文件

记住在 F5 debug 之前,选择当前配置的 debug 模式,并且在对应文件的 ts 文件中插入断点

直接调试

ts-node 调试 ts 文件时,不会显式生成 js。假如你不想编译为 js 后 在调试,可以考虑这种方式。

安装依赖

1
2
npm i typescript --save-dev
npm i ts-node --save-dev

配置任务

.vscode/launch.json

1
2
3
4
5
6
7
8
9
{
"name": "Current TS File",
"type": "node",
"request": "launch",
"program": "${workspaceRoot}/node_modules/ts-node/dist/_bin.js",
"args": ["${relativeFile}"],
"cwd": "${workspaceRoot}",
"protocol": "inspector"
}

调试

在要调试的文件头部添加 debugger

1
2
3
4
5
6
debugger;

const message: string = 'hello word';
const abc: string = message;
const aaa: string = abc;
console.log(message);

插入断点,选择指定的 debug 模式,F5 运行

0%