Husky 8.0+LintStaged+Commitizen来规范前端提交格式

---

一、什么Husky？

1. Husky：简单理解就是husky就是一个Git Hook工具，在Git提交的各个阶段你可以自定义处理一些事情。
2. Commitizen：可以帮助开发者提交符合规范的Commit Message
3. Commitlint：用于校验填写的Commit Message是否符合规范

二、安装

Husky传送门

1. Husky

目前安装的都是8.0以上的版本，相对于v4的而言v8更加合理。在自定义Git Hook以后，另外一个人拉取代码脚本重置的问题。

npx husky-init && npm install       # npm mac
npx husky-init ; npm install        # npm Windows

npx husky-init && yarn              # Yarn mac
npx husky-init ; yarn               # yarn Windows

yarn dlx husky-init --yarn2 && yarn # Yarn 2+
pnpm dlx husky-init && pnpm install # pnpm

会自动生成.husky文件，新增加命令 “prepare”: “husky install”
将pre-commit里面的 npm test修改为 npm run lint:lint-staged

然后添加commit-msg.sh
提示：注意这里加的$1在生成脚本以后没有双引号,生成以后是否需要双引号可参考官方GitHub

npx husky add .husky/commit-msg 'npx --no -- commitlint --edit "$1"'

2. lint-staged

yarn add lint-staged --dev

然后在package.json添加配置
新增命令:

"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
"lint:lint-staged": "lint-staged"

"lint-staged": {
    "./src/**/*.{js,jsx,ts,tsx,vue}": [
      "prettier --write",
      "eslint --fix",
      "git add ."
    ]
  },

prettier 如果没有的话，可以不要，这块比较简单就不赘述了。

3. commitlint

yarn add @commitlint/cli @commitlint/config-conventional --dev

然后根目录新增commitlint.config.js，新增配置信息。

/* eslint-disable */
module.exports = {
  ignores: [(commit) => commit.includes('init')],
  extends: ['@commitlint/config-conventional']
};

4. commitizen

yarn add commitizen cz-customizable --dev

我使用的cz插件，可以对提交的规范进行自定义
然后新增.cz-config.js文件，以下配置仅供参考
然后在package.json添加配置

 "config": {
    "commitizen": {
      "path": "node_modules/cz-customizable"
    }
  }

module.exports = {
  // 可选类型
  types: [
    { value: 'feat', name: 'feat:     新功能' },
    { value: 'fix', name: 'fix:      BUG修复' },
    { value: 'docs', name: 'docs:     文档变更' },
    { value: 'style', name: 'style:    代码格式(不影响代码运行的变动)' },
    { value: 'refactor',name: 'refactor: 重构(既不是增加feature，也不是修复bug)',},
    { value: 'perf', name: 'perf:     性能优化' },
    { value: 'test', name: 'test:     增加测试' },
    { value: 'chore', name: 'chore:    构建过程或辅助工具的变动' },
    { value: 'revert', name: 'revert:   回退' },
    { value: 'build', name: 'build:    打包' },
  ],
  // 消息步骤
  messages: {
    type: '请选择提交类型:',
    customScope: '请输入修改范围(可选):',
    subject: '请简要描述提交(必填):',
    body: '请输入详细描述(可选):',
    footer: '请输入要关闭的issue(可选):',
    confirmCommit: '确认使用以上信息提交？(y/n/e/h)',
  },
  // 跳过问题
  skipQuestions: ['body', 'footer'],
  // subject文字长度默认是100
  subjectLimit: 100,
};

5. test

• yarn cz 直接使用命令 或者 yarn git-cz node_modules>bin>目录下的命令都可以使用。
• 直接使用git cz是不得行的，因为没有这个命令。
• 需要自定义命令可自行添加，都需要yarn 或者 npm来运行。
• 使用命令提交或者小乌龟或者用vscode git插件提交都能正常校验。
• 如果你的vscode提交错误信息响应比较慢，不要提交空的Commit Message。

> git -c user.useConfigOnly=true commit --quiet --allow-empty-message --file -

> customer_default@0.1.0 lint:lint-staged E:\uniapp-miniproject
> lint-staged

[34m→[39m No staged files match any configured task.
⧗   input: 2222
✖   subject may not be empty [subject-empty]
✖   type may not be empty [type-empty]

✖   found 2 problems, 0 warnings
ⓘ   Get help: https://github.com/conventional-changelog/commitlint/#what-is-commitlint

husky - commit-msg hook exited with code 1 (error)

---

总结

• 如果在windows上面运行失败，可以参考官网解决办法。
• 新增common.sh脚本
  
• 如果还不能运行，可以参考4.3.8的脚本链接: husky.sh