Nodejs+Typescript+Eslint+Prettier+Husky项目构建
- 准备工作
- 初始化项目
- Eslint安装和配置
- Prettier安装和配置
- 在Eslint中使用Prettier插件
- Husky安装和配置
- 修改package.json
准备工作
确保已经安装了git以及Node.js和npm,通过git -v
、node -v
和npm -v
检查是否安装。
初始化项目
# 进入你的目录
cd your-directory# 初始化 npm 项目
npm init -y# 安装 TypeScript 和 ts-node
npm install --save-dev typescript ts-node# 初始化 TypeScript 配置
npx tsc --init# 创建 src 目录
mkdir src# 创建你的 TypeScript 文件
touch src/index.ts
在新建的tsconfig.json中,修改target、module、和outDir,其中outDir设置为./dist
,其他根据情况设置。
Eslint安装和配置
# 安装 ESLint
npm install --save-dev eslint# 初始化 ESLint 配置
npx eslint --init
根据情况选择配置:
You can also run this command directly using 'npm init @eslint/config'.
Need to install the following packages:@eslint/create-config@0.4.6
Ok to proceed? (y) y
✔ How would you like to use ESLint? · style
✔ What type of modules does your project use? · commonjs
✔ Which framework does your project use? · none
✔ Does your project use TypeScript? · No / Yes
✔ Where does your code run? · node
✔ How would you like to define a style for your project? · guide
✔ Which style guide do you want to follow? · standard-with-typescript
✔ What format do you want your config file to be in? · JavaScript
Checking peerDependencies of eslint-config-standard-with-typescript@latest
The config that you've selected requires the following dependencies:eslint-config-standard-with-typescript@latest @typescript-eslint/eslint-plugin@^6.1.0 eslint@^8.0.1 eslint-plugin-import@^2.25.2 eslint-plugin-n@^15.0.0 || ^16.0.0 eslint-plugin-promise@^6.0.0 typescript@*
✔ Would you like to install them now? · No / Yes
✔ Which package manager do you want to use? · npm
Installing eslint-config-standard-with-typescript@latest, @typescript-eslint/eslint-plugin@^6.1.0, eslint@^8.0.1, eslint-plugin-import@^2.25.2, eslint-plugin-n@^15.0.0 || ^16.0.0 , eslint-plugin-promise@^6.0.0, typescript@*added 113 packages in 5s
Prettier安装和配置
- 首先,安装 Prettier,在项目目录中,运行
npm install --save-dev prettier
- 创建一个 .prettierrc 文件来配置 Prettier。你可以在这个文件中设置你的格式化选项,例如:
{"semi": true,"singleQuote": true,"tabWidth": 4
}
在Eslint中使用Prettier插件
安装 eslint-plugin-prettier 和 eslint-config-prettier
npm install --save-dev eslint-plugin-prettier eslint-config-prettier
编辑.eslintrc.js文件
module.exports = {"env": {"browser": true,"commonjs": true,"es2022": true},"extends": ["standard-with-typescript","prettier"],"plugins": ["prettier"],"overrides": [{"env": {"node": true},"files": [".eslintrc.{js,cjs}"],"parserOptions": {"sourceType": "script"}}],"parserOptions": {"ecmaVersion": "latest","project": "./tsconfig.json"},"rules": {"prettier/prettier": "error"}
}
Husky安装和配置
# 安装 Husky和commitlint
npm install --save-dev @commitlint/cli @commitlint/config-conventional husky# 创建git仓库
git init# 可修改分支名
git branch -m 旧名字 新名字# 初始化 Husky
npx husky install
创建一个名为 commitlint.config.js 的文件,内容如下:
module.exports = {extends: ['@commitlint/config-conventional']};
提交前检查代码风格和提交格式:
npx husky add .husky/pre-commit "npm run lint"
npx husky add .husky/commit-msg 'npx --no-install commitlint --edit $1'
修改package.json
将scripts修改为
"scripts": {"build": "tsc","start": "node dist/index.js","dev": "ts-node src/index.ts","debug": "node --inspect-brk dist/index.js","lint": "eslint ./src/** --ext .ts --fix","format": "prettier --write ./src/**","prepare": "husky install"},