Visual Studio Code + TypeScript + nodemon + 可自动重启的调试

佚名 5年前 (2019-05-14) 随笔 1135人围观抢沙发百度已收录

全新环境。windows 10

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

开发服务端程序好用，支持自动重启，断点能重复生效，支持本地安装nodemon。

安装 nodejs
https://nodejs.org/
npm修改成淘宝仓库
npm config set registry https://registry.npm.taobao.org
恢复 npm config set registry http://registry.npmjs.org
查询 npm config get registry
npm 常用命令
npm init -y 当前目录下快速生成 package.json
npm install typescript 安装到本地
npm i typescript 安装到本地 install 同 i。默认本地运行，同 -P, -s 效果
npm i typescript -g 安装到全局
npm i typescript -s 项目范围安装，保存运行时配置 --save
npm i typescript -P 项目范围安装，保存运行时配置 p 产品环境（运行环境）
npm i typescript -D 项目范围安装，保存开发时配置比运行时范围小一点同 -D --save-dev 注意 -d 不是 --save-dev 的意思 -D, --save-dev: Package will appear in your devDependencies.
-P, --save-prod: Package will appear in your dependencies. --save 变这个了发布环境的意思 -s 也能实现类似效果
版本管理工具不应该上传本地node_modules，别人拉下项目后用命令 npm install 就能还原项目的包（根据package.json和package-lock.json的内容自动还原）
初始化 package.json
npm init -y
安装 vscode
https://code.visualstudio.com/
安装 typescript
npm i typescript -s
注意因为本地安装，所以tsc在 ./node_modules/.bin/tsc.cmd 中
安装 node的类型库。注意这货必须本地安装，vscode才能识别
npm i @types/node
@types表示一个npm的发布者。
npx可以运行本地包（和npm install -g的全局包相区别）。例如运行tsc
直接tsc说没有找到命令
npx tsc 就可以，npx会到 ./node_modules/.bin 里面找
生成 tsconfig.json
npx tsc -init
修改 tsconfig.json
"sourceMap": true,
"outDir": "./js"
修改 package.json
"main": "index.js", => "main": "js/index.js",
创建 ts/index.ts。内容例如
let a = 100;
console.log(a);
code . 运行vscode，并打开当前目录可以在当前目录下 code . 后面有一个点 .
增加编译配置
vscode菜单 -> Terminal -> Config Default Build Task -> tsc watch 以后就可以ctrl + shift + b 运行 tsc watch 编译任务
安装nodemon调试
npm i nodemon -s
使用旧版 cmd.exe 窗口
开始 -> cmd -> 属性 -> 勾选使用旧版控制台
配置 nodemon调试
vscode菜单 -> Debug -> Add Configration -> node.js
修改 ./vscode/launch.json，内容如下

nodemon本地安装时内容如下
{
    // 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": "nodemon",
            "restart": true,
            "protocol": "inspector",
            "console": "integratedTerminal",
            "internalConsoleOptions": "neverOpen",
            "runtimeArgs": [
              "node_modules/nodemon/bin/nodemon.js",
            ]
        }
    ]
}

nodemon全局安装时内容如下
{
    // 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": "nodemon",
            "runtimeExecutable": "nodemon",
            "program": "${workspaceFolder}/js/index.js",
            "restart": true,
            "console": "integratedTerminal",
            "internalConsoleOptions": "neverOpen"
        }
    ]
}