React项目使用husky lint-staged 进行代码提交前的检查

当项目配置了eslint stylelint这些代码风格规范的校验时，会让所有开发者写出来的代码风格基本一致。但是如果有开发者他没有去配置IDE里的一些自动修复代码风格的选项，那么提交到代码仓库的代码还是五花八门的，所有我们要在提交仓库前做最后一次强制性验证。所以需要用到husky以及lint-staged这两个工具。

安装husky, lint-staged

npx husky-init && npm install
npm i lint-staged -D

使用husky

配置husky

在package.json中加入

"husky": {
	"hooks": {
    	"pre-commit": "lint-staged"
  	}
}

配置.lintstagedrc.js

新建.lintstagedrc.js文件，加入以下内容

// Lint-staged仅仅是文件过滤器，不会帮你格式化任何东西
module.exports = {
    "src/**/\*{js,jsx,ts,tsx,md,html}": ["eslint --fix", "git add"],
    "src/**/*.{css,less}": ["stylelint --fix", "git add"],
}

配置pre-commit

安装成功之后会在项目根路径自动生成.husky文件夹
我们需要修改里面的pre-commit文件

删掉自带的 npm test加入npx lint-staged

使用lint-staged是为了解决以下情况：假设有一次提交，我可能只修改了一个文件，比如我就修改了 foo.js 的内容，但它依然会校验所有src 下面的.js文件，非常的不友好。导致的问题就是：每次我提交我写的代码，还先要帮人的代码问题解决了才能顺利提交，而且当项目大了之后，检查速度也会变得越来越慢了。
解决上面的痛点就需要使用 lint-staged 了。它只会校验检查你提交或者说你修改的部分内容。

自定义路径

如果遇到多个.git文件夹不在项目根目录的情况，那么只需要执行一下路径即可 官网示例