TypeScript的类型校验使我们可以写出更加健壮和可维护的前端代码。怎样在VSCode中debug ts代码呢?只需要如下几个简单步骤的配置。
- 安装ts-node和
最新版
的typescript
npm install -g ts-node
npm install typescript@latest
- 配置launch.json
{
"version": "0.2.0",
"configurations": [
{
"name": "ts-node Debugger",
"type": "node",
"request": "launch",
"args": [
"${workspaceRoot}/tmp.ts" // 入口文件
],
"runtimeArgs": [
"--nolazy",
"-r",
"ts-node/register"
],
"sourceMaps": true,
"cwd": "${workspaceRoot}",
"protocol": "inspector",
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen",
"runtimeExecutable": "/Users/yyy/.nvm/versions/node/v12.14.1/bin/node"
}
]
}
1)需要将args配置成需要debug的入口文件 比如,我这里debug的文件是根目录下的tmp.js
所以添加如下配置:
"args": [
"${workspaceRoot}/tmp.ts" // 入口文件
],
2)runtimeExecutable:填node的安装目录,mac中可以用where 命令查找安装路径。
- 在tsconfig.json中开启sourceMap("sourceMap": true)。本例中配置如下:
{
"compileOnSave": false,
"compilerOptions": {
"strict": true,
"noEmit": true,
"declaration": true,
"moduleResolution": "node",
"esModuleInterop": true,
"sourceMap": true
},
"include": ["src/*.ts", "test/*.ts"]
}
然后就可以愉快地debug了~