vscode开发调试typescript

1、安装 typescript

  npm 全局安装 typescript

1
npm i -g typescript

2、初始化 ts 配置

  以 test 项目为例,在 test 目录下执行tsc --init,会在项目目录下产生一个tsconfig.json的配置文件,每项配置都有说明,如下图所示:

tscofnig文件部分截图

主要用到的配置项如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
{
"compilerOptions": {
"module": "commonjs", //指定生成哪个模块系统代码
"target": "ES2017", //目标代码类型
"noImplicitAny": false, //在表达式和声明上有隐含的'any'类型时报错。
"sourceMap": true, //用于debug,断点调试需打开
"rootDir":"./", //需要编译的目录
"outDir":"./dist", //编译后的js存放路径
"watch":true //在监视模式下运行编译器。会监视输出文件,在它们改变时重新编译。
"strict":true //严格模式
},
//需要监控的路径,非必要无需配置,有rootDir就够了
"include":[
"./"
],
//需要排除的路径,非必要无需配置
//排除监控目录
"exclude":[
"node_module",
"temp"
]
}

3、编译

  执行tsc -w,将 ts 编译位 js 并输出到 dist 目录下,-w监控文件变动,自动编译。

4、断点运行

  首先添加 launch.json,如图所示:

添加配置

选中 node 环境,然后将要调试的文件改为输出目录中对应的 js 文件,修改 program 属性:

1
"program": "${workspaceFolder}\\dist\\index.js"

最后F5运行即可断点调试。

5、热更新

  如何在修改文件保存后自动重启服务器,首先全局安装nodemon,然后在 test 根目录下编写 nodemon 配置文件–nodemon.json:(实际使用中不能带注释,需删除)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{
"restartable": "rs", //重启的命令,默认是 rs
"ignore": [""], //忽略的文件后缀名或者文件夹,文件路径的书写用相对于 nodemon.json 所在位置的相对路径
"verbose": true, //表示输出详细启动与重启信息
"events": {
"start": "node ./dist/index.js", //子进程(即监控的应用)启动
"crash": "", //子进程崩溃,不会触发 exit
"exit": "", //子进程完全退出,不是非正常的崩溃
"restart": "" //子进程重启
},
"ext": "js json", //监控指定后缀名的文件,用空格间隔。默认监控的后缀文件:.js, .coffee, .litcoffee, .json。但是对于没有文件后缀的文件,比如 www 文件,我暂时找不到怎么用 nodemon 去监控,就算在 watch 中包含了,nodemon 也会忽略掉
"watch": ["./src/**"],
"env": {
"NODE_ENV": "env", // env: 是开发环境; 运行环境 development; production 是生产环境
"PORT": "3000"
},
"legacy-watch": false //nodemon 使用 Chokidar 作为底层监控系统,但是如果监控失效,或者提示没有需要监控的文件时,就需要使用轮询模式(polling mode),即设置 legacy-watch 为 true,也可以在命令行中指定
}

然后使用nodemon --inspect nodemon.json命令启动(–inspect 是 vscode 断点调试关键),接着在.vscode 目录中将 launch.json 修改为下面的代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "attach",
"name": "Node: Nodemon",
"processId": "${command:PickProcess}",
"restart": true,
"protocol": "inspector"
}
]
}

最后调试页面启动调试,选择代码真实运行的进程,如下图所示:

vscode符加进程

  大功告成。。

坚持原创技术分享,您的支持将鼓励我继续创作!