【VSCode】使用ts-node 调试TypeScript代码

4,867 阅读1分钟

TypeScript的类型校验使我们可以写出更加健壮和可维护的前端代码。怎样在VSCode中debug ts代码呢?只需要如下几个简单步骤的配置。

  1. 安装ts-node和最新版的typescript
npm install -g ts-node
npm install typescript@latest
  1. 配置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

image.png 所以添加如下配置:

 "args": [
              "${workspaceRoot}/tmp.ts" // 入口文件
            ],

2)runtimeExecutable:填node的安装目录,mac中可以用where 命令查找安装路径。

image.png

  1. 在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了~