eslint + husky + lint-staged 助你团队规范提交代码

前言

新进公司，前端基建为零，各自为战，但是也会有多人分模块来写的时候。为了以后代码的可持续发展，我得赶紧把代码规范那套用起来。我在文章《npx husky add .husky/pre-commit "npm test" 不起作用解决方案》 中解决了precommit钩子的问题，但是该钩子跑的eslint --fix是把所有的全量代码一起去fix的，在项目越来越大的时候就耗时了，所以，正确的做法应该是用lint-staged去fix本次commit的代码。

流程

1. eslint 配置这一步大家应该熟悉，就是在根目录搞个.eslintrc.js配置相关信息
2. 安装 husk lin-staged,网上很多教程过时了，2022年最新应该如下

npm install husky lint-staged -D

husky的操作步骤可按照这篇文章《npx husky add .husky/pre-commit "npm test" 不起作用解决方案》 做

3. lint-staged 配置步骤

• 把 .husky/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"

image.png

这样子做主要是因为之前虽然有eslint, 但是别人报错照样可以不改就commit提交，我拉代码发现别人提交的代码报错，很难受啊。

加上这些钩子检测以后，你改动的代码，只要eslint校验不通过就不能commit上去影响别人。如下：

image.png

总结

无规矩不成方圆。