Commitizen + husky规范提交信息

缘由

git提交信息应该明确，不要乱提交。每个提交都有对应的意思，顾名思义。

一、使用git cz进行commit选项选择后再提交

// 安装 commitizen 
npm i commitizen -g 
// 使用 git cz 命令 
git cz

ps: 需要注意的是安装好了直接git cz 是会报错的，然后需要git add . 使用 git cz 代替 git commit ，出现以下commit选项

二、自定义团队提交规范

使用 cz-customizable 自定义提交规范

使用命令 npm cz-customizable --save-dev 安装
在 package.json 中新增

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

在根目录中创建 .cz-config.js 文件

'use strict';
module.exports = {
  types: [
    { value: '✨特性', name: '特性:    一个新的特性' },
    { value: '🐛修复', name: '修复:    修复一个Bug' },
    { value: '📝文档', name: '文档:    变更的只有文档' },
    { value: '💄格式', name: '格式:    空格, 分号等格式修复' },
    { value: '♻️重构', name: '重构:    代码重构，注意和特性、修复区分开' },
    { value: '⚡️性能', name: '性能:    提升性能' },
    { value: '✅测试', name: '测试:    添加一个测试' },
    { value: '🔧工具', name: '工具:    开发工具变动(构建、脚手架工具等)' },
    { value: '⏪回滚', name: '回滚:    代码回退' }],
  messages: {
    type: '请选择提交的类型；',
    customScope: '请输入修改的范围（可选）',
    subject: '请简要描述提交（必填）',
    body: '请输入详细描述（可选）',
    footer: '请选择要关闭的issue（可选）',
    confirmCommit: '确认要使用以上信息提交？（y/n）'
  },
  // limit subject length
  subjectLimit: 100
};

再次执行git cz即可见到我们自己配置的规范，如下图 ps: package.json 中的 "type": "module" 去掉

三、使用husky，在git hooks中增加提交选项

通过上面的步骤，我们已经可以通过 git cz 去规范commit了；但是还存在以下两个问题：

commitizen必须全局安装，否则不能使用该命令
使用常规的git commit -m xx不能拦截，需要强制使用git cz命令

此时我们可以通过安装husky，在git的hooks中拦截git commit的动作

安装husky npm install husky --save-dev

在 package.json 中新增命令行

javascript
复制代码
"scripts": {
    "prepare": "npx husky install",
}

执行 npm run prepare
执行命令 npx husky add .husky/pre-commit 生成该hook的文件

编辑根目录下.husky文件夹下的 pre-commit

javascript
复制代码
. "$(dirname "$0")/_/husky.sh"

// 注意：必须有exec < /dev/tty，代表执行命令行
exec < /dev/tty && git cz --hook || true

至此，我们使用 git commit 也可以进行提交规范的约束了

四、使用lint-staged, 对暂存区代码进行eslint校验和prettier格式化

现在我们已经约束了提交规范，但是我们希望在提交前对当前的代码进行格式验证和修复，此时需要使用到lint-staged

安装 npm i lint-staged --save-dev

在package.json中新增配置

json
复制代码
"lint-staged": {
  "**/*.scss": "stylelint --syntax scss",
  "**/*.{js,jsx, tsx,ts }": "npm run lint-staged:js",
  "**/*.{js,jsx,tsx,ts,less,scss,md,json}": [
    "prettier --write"
  ]
}

在package.json中新增 lint-staged 和 lint-staged.js 命令

json
复制代码
"scripts": {
    "lint-staged": "lint-staged",
    "lint-staged:js": "eslint --ext .js,.jsx,.ts,.tsx "
}

最后在 pre-commit中新增脚本

arduino
复制代码
npm run lint-staged

本次暂时未添加 commitlint，如需配置可以参考这篇文章

好了，我们现在已经完成所有所有提交规范的操作，小伙伴也可以开心的进行commit提交啦！