前言
新进公司,前端基建为零,各自为战,但是也会有多人分模块来写的时候。为了以后代码的可持续发展,我得赶紧把代码规范那套用起来。我在文章《npx husky add .husky/pre-commit "npm test" 不起作用解决方案》 中解决了precommit钩子的问题,但是该钩子跑的eslint --fix是把所有的全量代码一起去fix的,在项目越来越大的时候就耗时了,所以,正确的做法应该是用lint-staged去fix本次commit的代码。
流程
- eslint 配置这一步大家应该熟悉,就是在根目录搞个.eslintrc.js配置相关信息
- 安装 husk lin-staged,网上很多教程过时了,2022年最新应该如下
npm install husk lint-staged -D
husk的操作步骤可按照这篇文章《npx husky add .husky/pre-commit "npm test" 不起作用解决方案》 做
- lint-staged 配置步骤
- 把 .husk/pre-commit文件里面的命令改成npm run precommit
- 然后在package.json新增命令precommit
"scripts": {
"precommit": "lint-staged"
},
- 在根目录新建lint-staged.config.js,这里的意思是commit的时候会修复暂存区中的.js , .vue结尾的文件
module.exports = {
"*.{js,vue}": "eslint --fix"
}
最后git commit提交时发现走precommit -> lint-staged -> "*.{js,vue}": "eslint --fix"
![](https://img.haomeiwen.com/i6782944/403098280fd7cce9.png)
这样子做主要是因为之前虽然有eslint, 但是别人报错照样可以不改就commit提交,我拉代码发现别人提交的代码报错,很难受啊。
加上这些钩子检测以后,你改动的代码,只要eslint校验不通过就不能commit上去影响别人。如下:
![](https://img.haomeiwen.com/i6782944/65d29be978d4b69a.png)
总结
无规矩不成方圆。
网友评论