typeScript+koa2+eslint搭建完整nodejs开发环境（自建脚手架） typeScript+koa2+eslint搭建完整nod

此脚手架优势

完整的开发环境，nodejs+git+typeScript+ESLint+Prettier+etc
在nodejs中使用typeScript
在nodejs中使用import语法
更改代码后自动重启node服务器
自动编译打包为ts为js文件
以koa2为例构建
可以接入任何你喜欢的nodejs框架（expess,koa...）

事前准备 0.构建环境确定已经安装了node.js，git以及typeScript
因为本教程使用yarn构建，所以还需要安装yarn，或者使用相对的npm命令
检查node版本

node -v → v16.3.0

检测tsc版本（使用npx命令）

npx tsc --version → v4.4.4

os: windows
编辑器： vs code
搭建nodejs开发环境 1.新建文件夹并打开

mkdir node cd node

2.初始化git

git init

新建.gitignore，设置git忽略文件
内容根据自己的喜好

node_modules .DS_Store dist *.local *.code-workspace .vscode

3.初始化editorconfig 新建.editorconfig，设置编辑器和ide规范
内容根据自己的喜好或者团队规范

root = true[*.{js,ts,json}] indent_size = 2 charset = utf-8 indent_style = space trim_trailing_whitespace = true insert_final_newline = true

4.初始化package.json

yarn init

项目设定根据实际情况填写即可

{ "name": "node", "version": "1.0.0", "main": "index.js", "license": "MIT" }

一般到这一步，最基本的nodejs开发环境就搭建完了
下一步开始追加typescript
nodejs+typescript开发环境搭建 5.typescript依赖安装 【typeScript+koa2+eslint搭建完整nodejs开发环境（自建脚手架）】安装typeScript的基础依赖包

yarn add -D typescript @types/node

6.初始化tsconfig.json

npx tsc --init

初始化生成的tsconfig.json含有许多备注
如果嫌麻烦可以直接使用下面的模板
项目设定根据实际情况填写即可

{ "compilerOptions": { "target": "esnext", "module": "commonjs", "sourceMap": true, "outDir": "./dist", "strict": true, "esModuleInterop": true, "skipLibCheck": true, "forceConsistentCasingInFileNames": true }, "include": ["src"], "exclude": ["node_modules", "dist", "public"] }

这里需要注意一下
outDir: 是编译后文件放置的文件夹
include: 是需要检查哪的文件来编译
exclude: 是不需要检查哪的文件来编译
7.确认typescript环境新建文件夹src

mkdir src

并且在src内新建index.ts
下面是index.ts，极其极其简单的typescript语句

const msg: string = 'Hello World' console.log(msg)

编译typescript

npx tsc

成功的话，这时会在dist文件内生成一个index.js，内容如下
很显然，ts变成了js

"use strict"; const msg = 'Hello World'; console.log(msg); //# sourceMappingURL=app.js.map

使用node命令执行index.js

node dist/index.js → Hello World

开发执行脚本配置 8.安装依赖安装ts-node-dev和npm-run-all

yarn add -D ts-node-dev npm-run-all

ts-node-dev：开发用依赖，开发时自动编译ts为js并重启node服务器
npm-run-all：一个命令来执行一个以上的脚本命令
9.配置package.json脚本

"main": "dist/index.js",...省略"scripts": { "dev": "ts-node-dev --respawn src/index.ts", "resetFolder": "rimraf dist/*", "compile": "tsc", "build": "npm-run-all resetFolder compile", "start": "node ." },

dev：开发的时候用，运行node服务器，伴随代码更改自动重启node服务器,--respawn是命令选项，自动重启，必须
resetFolder：清空dist文件夹
compile：编译typescript
build：清理dist文件夹并打包
start：运行nodejs脚本
到这一步，最基本的typescript+nodejs开发环境就搭建完了
可以试着运行一下上面的命令
ESLint + Prettier 10.初始化并配置eslint 安装eslint依赖

yarn add -D eslint typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin

新建.eslintrc.js文件并写入配置
也可以使用eslint --init生成，但这里方便起见直接复制粘贴了

module.exports = { root: true,env: { node: true, es2021: true, },parser: '@typescript-eslint/parser',parserOptions: { ecmaVersion: 12, sourceType: 'module', tsconfigRootDir: __dirname, project: ['./tsconfig.json'], },plugins: ['@typescript-eslint'],extends: [ 'eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:@typescript-eslint/recommended-requiring-type-checking', ], }

导入了eslint后，.eslintrc.js会出现如下报错

Parsing error: "parserOptions.project" has been set for @typescript-eslint/parser.

这是由于eslint检查和ts检查配置造成的，详见这里
为了解决问题，在tsconfig.json中加入".eslintrc.js"

...省略"include": [ ".eslintrc.js","src"],...省略

尝试执行eslint

npx eslint src/index.ts

11.初始化并配置prettier prettier依赖

yarn add -D prettier eslint-config-prettier

新建.prettierjs文件并写入配置
根据自己的喜好

module.exports = { semi: false, tabWidth: 2, printWidth: 120, proseWrap: 'preserve', singleQuote: true, trailingComma: 'all', }

在.eslintrc.js集成prettier

...省略extends: [ 'eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:@typescript-eslint/recommended-requiring-type-checking', 'prettier', 'prettier/@typescript-eslint', ],rules: { 'prettier/prettier': 'error', },...省略

在vs code设置了保存并整理代码的话，适当修改并保存就可以看到prettier效果了
至此，typeScript+nodejs+eslint+prettier的开发环境就已经搭建结束了
下面将以koa.js为例，实际上你也可以使用你喜欢的nodejs框架，比如express.js等
集成koa.js 12.初始化koa

yarn add koa

改写index.ts

import Koa from 'koa'const app = new Koa() const msg: string = 'Hello World'app.use(async (ctx: Koa.Context): Promise => { ctx.body = msg })app.listen(7000)

此时会报一些找不到声明文件的错误，所以需要进行下一步，追加声明文件
13.安装koa类型声明文件

yarn add -D @types/koa

找不到声明文件的错误被成功消除
如果今后你要使用路由等koa插件，也需要同时安装该插件的声明文件
14.运行这时koa.js的集成也已经完成
运行yarn dev并访问http://localhost:7000

yarn dev

可以发现运行成功，页面上有Hello World

typeScript+koa2+eslint搭建完整nodejs开发环境（自建脚手架）

文章图片

15.打包运行yarn build会发现dist里面的index.js文件
typeScript已经全都被转换为（不认识的）js文件了

yarn build

到这里typeScript+koa2+eslint+prettier的开发环境就已经完全搭建结束了
最后附赠上完整package.json文件

{ "name": "node", "version": "1.0.0", "main": "dist/index.js", "license": "MIT","scripts": { "dev": "ts-node-dev --respawn src/index.ts", "resetFolder": "rimraf dist/*", "compile": "tsc", "build": "npm-run-all resetFolder compile", "start": "node ." },"dependencies": { "koa": "^2.13.4" },"devDependencies": { "@types/koa": "^2.13.4", "@types/node": "^17.0.16", "@typescript-eslint/eslint-plugin": "^5.11.0", "@typescript-eslint/parser": "^5.11.0", "eslint": "^8.8.0", "eslint-config-prettier": "^8.3.0", "npm-run-all": "^4.1.5", "prettier": "^2.5.1", "ts-node-dev": "^1.1.8", "typescript": "^4.5.5" } }