ESLint
代码规范校验使用ESLint，但是一开始 ESLint 只有检测告诉你哪里有问题，后来 ESLint 提供了$ ESLint filename --fix的命令，可以自动帮你修复一些不符合规范的代码。
Prettier
Prettier 是一个代码格式化工具，可以帮你把代码格式化成可读性更好的格式，比如加分号，或者换行之类的。
husky
husky是强制git commit按照标准规则来提交。
项目实践（pnpm + monorepo）
- 下载ESLint和prettier
pnpm i eslint -D -w
pnpm i prettier -D -w
- 初始化ESLint
npx eslint --init
- 下载ESLint解析器
pnpm i @typescript-eslint/parser -D -w
- 安装plugin
- eslint-config-prettier 的作用是关闭eslint中与prettier相互冲突的规则。
- eslint-plugin-prettier 的作用是赋予eslint用prettier格式化代码的能力。 安装依赖并修改.eslintrc文件
pnpm i eslint-config-prettier -D -w
pnpm i eslint-plugin-prettier -D -w
pnpm i @typescript-eslint/eslint-plugin -D -w
- .eslintrc.json配置
{
"env": {
"browser": true,
"es2021": true
},
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"plugin:prettier/recommended"
],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaVersion": "latest",
"sourceType": "module"
},
"plugins": ["@typescript-eslint", "prettier"],
"rules": {
"prettier/prettier": "error"
}
}
- package.json文件中添加一个脚本命令，这个脚本意思是指执行packages文件下的所有ts,js,jsx,tsx文件，并且自动按照prettier配置进行修复。
"scripts": {
"lint": "eslint --ext .ts,.js,.jsx,.tsx --fix ./packages"
},
- 安装husky
pnpm i husky -D -w
- 初始化husky
npx husky install
8)将pnpm lint 纳入commit时husky将执行的脚本
npx husky add .husky/pre-commit "pnpm lint"
- 安装lint-staged，因为项目比较大后，每次扫描全部代码，就会很慢，而它则可以让我们只扫描本次提交的代码的规范
- 针对每次提交信息进行检查，看是否规范，安装commit-lint
pnpm i @commitlint/cli @commitlint/config-conventional -D -w
- 创建.commitlintrc.js文件
module.exports = { extends: ['@commitlint/config-conventional'] }
- 添加到husky中，每次提交代码时进行检查
npx husky add .husky/commit-msg 'npx --no -- commitlint --edit ${1}'
