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文件夹不在项目根目录的情况,那么只需要执行一下路径即可 官网示例
更多推荐


所有评论(0)