【配置】【IDE】使用vscode调试typescript应用

前言

通常在开发一个node应用的时候都会使用typescript作为主力的开发语言。

笔者的IDE是vscode，使用vscode如何配置调试typescript应用，通过本文记录下来。

环境准备

安装 ts-node 至全局。这个插件是同时执行node + tsc 指令来运行.ts文件。
npm：npm install -g ts-node
yarn：yarn gloabl add ts-node
pnpm：pnpm add -g ts-node

安装 typescript 至当前项目
npm：npm install typescript --save-dev
yarn：yarn typescript -d
pnpm：pnpm add -d typescript

注意： typescript安装完成之后，要在当前项目目录创建tsconfig.json，配置好基础的typescript环境。
使用tsc --init可以快速创建一个默认配置文件

生成vscode配置

1. 打开vscode，找到Run and Debug。
2. 点击create a launch.json file。
3. 在右侧的弹窗中选择Node.js，创建一个vscode上用于运行和debug nodejs代码的配置文件。

修改launch.json

修改前

修改后

可以发现我们只是增加了一个字段runtimeExecutable，这个字段用于指定程序运行时的环境，可以看到这里我们把环境设置为ts-node的bin文件。

获取node执行文件位置

# macos
where node
# => /Users/rongxin/.nvm/versions/node/v14.18.2/bin
1
2
3

找到node文件目录就可以找到这个路径啦

参考配置

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "skipFiles": [
                "/**"
            ],
            "program": "${workspaceRoot}/index.ts",
            "runtimeExecutable": "xxx/.nvm/versions/node/v14.18.2/bin/ts-node"
        }
    ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

如遇到问题，欢迎留言讨论，谢谢支持！