使用husky实现 pre-commit 提交规范

作为一个开发人员，团队中每个人的开发方式及各自编辑器的代码规范都不一样，尤其是代码提交信息不规范，导致查找定位问题的成本高了很多。
团队协作中，规范化的 commit message 可以快速定位提交历史及回溯问题，提交整个团队的效率；
下面我们通过 husky@7 (哈士奇) 及周边插件实现 pre-commit 规范要提交的代码

具体安装步骤

• 安装 lint-staged 和 husky

npm i lint-staged husky @commitlint/cli @commitlint/config-conventional cz-conventional-changelog -D

• 在项目中初始化 .husky

npm set-script prepare "husky install" && npm run prepare

• package.json 中添加 lint 和 commitlint

...
"scripts": {
  "lint": "lint-staged",
  "commitlint": "commitlint --config .commitlintrc.js -e -V",
},
"lint-staged": {
    "*.{ts,tsx}": "eslint -c ./.eslintrc.commit.json --fix"
  },
  "config": {
    "commitizen": {
      "path": "./node_modules/cz-conventional-changelog"
    }
  },
...

根目录添加 .commitlintrc.js .eslintrc.commit.json .eslintrc.json 文件

.commitlintrc.js 文件

module.exports = {
  rules: {
    'body-leading-blank': [1, 'always'],
    'footer-leading-blank': [1, 'always'],
    'header-max-length': [2, 'always', 72],
    'scope-case': [2, 'always', 'lower-case'],
    'subject-case': [2, 'never', ['start-case', 'pascal-case', 'upper-case']],
    'subject-empty': [2, 'never'],
    'subject-full-stop': [2, 'never', '.'],
    'type-case': [2, 'always', 'lower-case'],
    'type-empty': [2, 'never'],
    'type-enum': [2, 'always', ['build', 'chore', 'ci', 'docs', 'feat', 'fix', 'perf', 'refactor', 'revert', 'style', 'test']]
  }
}

.eslintrc.commit.json 文件

{
    "extends": "./.eslintrc.json",
    "rules": {
        "no-console": "error",
        "no-debugger": "error",
        "no-alert": "error",
        "camelcase": "error",
        "react-hooks/exhaustive-deps": "error",
        "@typescript-eslint/no-empty-interface": "error",
        "@typescript-eslint/no-empty-function": "error",
        "@typescript-eslint/no-unused-vars": "error"
    }
}

.eslintrc.json 文件

{
  "extends": "react-app",
  "rules": {
    "no-console": "warn",
    "no-debugger": "warn",
    "no-alert": "warn",
    "camelcase": "warn",
    "react-hooks/exhaustive-deps": "error",
    "@typescript-eslint/no-empty-interface": "warn",
    "@typescript-eslint/no-empty-function": "warn",
    "@typescript-eslint/no-unused-vars": "warn"
  }
}

.husky文件创建 pre-commit 及 commit-msg

• 创建 pre-commit hook 执行 lint

npx husky add .husky/pre-commit "npm run lint"

• 创建 commit-msg hook 执行 commitlint

npx husky add .husky/commit-msg 'npm run commitlint'

bingo ～，这样每次当我们执行 commit 的时候就会进行 提交前的代码检测及规范的 message 了