项目里eslint+prettier都已经集成了，但是没有一个强制的规范，还是会有同学把不符合规范的代码提交上远程仓库，怎么办呢？通过husky+lint-staged可以很好地实现提交代码前强制校验
Husky: 一个钩子工具，可以在这里做一些commit之前的预检查
lint-staged: 一个过滤工具，可以过滤出在git staged状态下的文件
Step 1、依赖安装
yarn add -D husky@6.0.0 lint-staged
这里必须使用6.0.0版本的husky，在此之上的husky有版权问题
Step 2、情况判断
判断.git文件是否在项目的根目录
若是，即单一项目，可以直接在项目里的package.json中添加执行命令
// .git 文件在你当前项目的根目录下时，修改项目根目录下的 package.json
"scripts": {
"prepare": "husky install"
},
若否，则为聚合多个子项目的项目，则需要根据目录定义husky install命令
如目录结构为：
+ .git
- project_1
- package.json
+ project_2
+ project_3
针对project_1的package.json，添加如下执行命令
// .git 文件不在在你当前项目的根目录下时，修改项目根目录下的 package.json
"scripts": {
"prepare": "cd .. && husky install project_1/.husky"
},
Step 3、执行yarn run prepare
执行完毕，将会在project_1目录下，出现一个.husky文件夹
image.png
Step 4、添加pre-commit钩子
$ npx husky add .husky/pre-commit
此时会发现，.husky文件夹下，新增了pre-commit文件
image.png
Step 5、修改pre-commit文件
新建的pre-commit文件，默认是这样的
image.png
当为：单一项目，修改成：
image.png
当为：聚合多个子项目的项目，修改成：
image.png
Step 6、新建并配置.lintstagedrc.js文件
// .lintstagedrc.js 文件中的代码如下
module.exports = {
"src/**/\*{js,jsx,ts,tsx,md,html}": ["eslint", "prettier --write"],
"src/**/*.scss": ["stylelint --fix", "git add"],
}
最后检查下，其效果后是这样的：
当不符合规范的代码试图被提交
image.png
完成
