React项目工程化（三）集成Husky+lint-staged实现代码提交校验

项目里eslint+prettier都已经集成了，但是没有一个强制的规范，还是会有同学把不符合规范的代码提交上远程仓库，怎么办呢？通过husky+lint-staged可以很好地实现提交代码前强制校验

Husky: 一个钩子工具，可以在这里做一些commit之前的预检查

lint-staged: 一个过滤工具，可以过滤出在git staged状态下的文件

Step 1、依赖安装

yarn add -D [email protected] 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

完成