vscode 搭建nodemon+ts+ts-node 的开发环境

我司由于业务调整需要重新对现有的web portal 进行开发.现有的portal 存在10年并且承载了大量业务,里面有jq,knockout和angularjs 还有react 15和16 简直就是一个前端发展史有没有.
那么这么复杂的业务逻辑的dashboard开发必然要ts
如何初始化一个npm项目和这里不再细说
在server 下
安装依赖包

$ npm install --save-dev ts-node nodemon typescript 

在之前nodejs 不支持es6语法的时候,有一个东西叫babel-node, 就是如果熟悉的人一定知道,就是用来代替node 命令来运行由es6语法编写而成的nodejs 服务.
基本用法

$ ts-node app.ts

tsconfig.json如下

{
  "compilerOptions": {
    "target": "es2016",                     
    "module": "commonjs",                    
    "lib": ["es2016", "esnext.asynciterable"],                    
    "outDir": "dist",                        
    "rootDir": "src",                        
    "strict": true,                          
    "esModuleInterop": true,             
  }
}

大型项目,需要 多人开发的情况下,规约很重要,那么prettier和eslint 就必须要有..
eslint 配合 prettier 的配置如下 具体的可以在官网去看看相应的配置

.prettierrc.js

module.exports = {
  semi: true,
  trailingComma: "none",
  singleQuote: true,
  printWidth: 80,
  tabWidth: 2
}

接着到.eslintrc.js

  parser: '@typescript-eslint/parser',
  extends: [
    'plugin:@typescript-eslint/recommended',
    'prettier/@typescript-eslint',
    'plugin:prettier/recommended',
  ],
  parserOptions: {
    ecmaVersion: 2016,
    sourceType: 'module',
  },
  rules: {
    // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
    "@typescript-eslint/explicit-function-return-type": "off",
    "@typescript-eslint/interface-name-prefix": "off"
  },
};

其实到这里,基本上
在package.json 的script里添加两条命令就可以进行开发了

"dev": "nodemon --ext js,ts --exec 'npm run lint:dev && ts-node src/main.ts'",
"lint:dev": "eslint './src/**/*.ts'"

ts-node每次不会产生编译后的js文件,而是把它们丢到内存里, 随着结束进程就销毁
因此,eslint 可能不会起作用对你的代码进行约束,因此你需要手动启动 eslint 然后通过了再 开始执行ts-node.因为 nodemon exec参数传进去的字符串可能有点问题,因此,你直接把eslint传进去不工作,所以写成一个命令即可.

那么大型的项目,需要调试,那你要设置断点. vscode设置断点这个玩意真是比较麻烦
打开项目,在左边那个dubug标签,你点击它然后会生成一个

通过vscode 的launch.json 去执行npm脚本
首先在 package .json中的scripts里加入以下代码

"debug":"nodemon  --ext js,ts   --exec node -r ts-node/register --inspect src/main.ts",

解释一下就是使用nodemon 然后进入调试模式(打好断点后) 接着执行debug模式
ts-node 本身不支持--inspect这个命令的,所以你需要用用原生的node然后引入ts-node 来编译ts -r就是--require的缩写然后开始
launch.json如下

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node2",
            "request": "launch",
            "name": "Launch Program",
            "runtimeExecutable": "npm",
            "runtimeArgs": [
                "run",
                "debug"
            ],
            "cwd": "${workspaceRoot}/server",
            "port": 9229,
           "console":"intergratedTerminal",
            "sourceMaps": true
        }
    ]
}

这样就万事大吉了,然后你可以直接启动,debug会自动监听9229 这个端口,因为你--inspect后,debugger就会挂载在你的应用程序里,通过websocket来通信.
然后你就可以愉快地进一步搭建基础设施啦.