husky + lint-staged 优雅的 git 提交规范校验

最近对在做的一些 uni-app 项目做了一些代码规范和提交规范的校验改造，感觉效果还不错。
这样一来，项目里合作的过程就会规范很多，git commit 可以规范，也可以在 git 提交前之前
校验代码规范。很简单的步骤就可以规范团队的代码个 git commit 真的很香。下面我就来记录一下配置改造的过程，为日后的环境搭建做一个参考。

搞清“是什么”

• husky,在做前端工程化时 husky 可以说是一个必不可少的工具。husky 可以让我们向项目中方便添加 git hooks。

• lint-staged,在代码提交之前，进行代码规则检查能够确保进入 git 库的代码都是符合代码规则的。但是整个项目上运行 lint 速度会很慢，lint-staged 能够让 lint 只检测暂存区的文件，所以速度很快。

Step_one 安装依赖

需要注意的是 husky 自 6.0 版本之后有一些 ‘breaking update’，使用逻辑和之前完全不一样，所以我选择了较为老的版本。

• husky@4.3.0
• lint-staged
• @commitlint/cli
• @commitlint/config-conventional

记得加上--save-dev 参数呦.

Step_two 配置 package.json

{
	...
   "husky": {
    "hooks": {
      "pre-commit": "lint-staged", // 提交之前执行 ‘lint-staged’
      "commit-msg": "commitlint -e $HUSKY_GIT_PARAMS" // git commit 规范校验
    }
  },
  "lint-staged": {
    "./src/**/*.{js,vue}": [
      "prettier --write", // prettier 格式化代码
      "eslint -c eslint.config.js" // eslint 校验
    ]
  },
	...
}

前提是你得先配置好 eslint + prettier 可参考我上一篇 blog

并且在根目录创建 commitlint.config.js ，键入module.exports = { extends: ['@commitlint/config-conventional'] };

打完收工

经过以上两步的折腾，你的项目已经具备了 校验 git commit 以及 提交前的代码 lint 能力了.是不是很神奇，好好享受工程化带来的乐趣把。