使用commitize+husky+commitlint制定git提交规范并自动修复代码格式

一、使用git+commitize+cz-customizable制定提交规范

1.全局安装 Commitizen

npm install -g commitizen@4.2.4

2.安装并配置 cz-customizable 插件

// 使用npm 下载 cz-customizable
npm install cz-customizable@6.3.0 --save--dev

添加以下配置到package.json中

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

3.项目根目录创建 .cz-config.js 自定义提示文件

module.exports = {
  //可选类型
  types: [
    { value: 'feat', name: 'feat:   新功能' },
    { value: 'fix', name: 'fix:   修复' },
    { 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)'
  },
  //跳过问题
  skipQuestion: ['body', 'footer'],
  //subject文字长度默认是
  subjectLimit: 128
}

4.使用 git cz 代替 git commit

zero@192 element-admin % git cz
cz-cli@4.2.4, cz-customizable@6.3.0

All lines except first will be wrapped after 100 characters.
? 请选择提交类型 (Use arrow keys)
❯ feat:   新功能 
  fix:   修复 
  docs:   文档变更 
  style:   代码格式(不影响代码运行的变动) 
  refactor:重构(既不是增加feature)，也不是修复bug 
  perf:   性能优化 
  test:   增加测试 
(Move up and down to reveal more choices)

• Commitizen配置完成

二、使用husky+commitlint检查提交描述是否符合规范

1.安装commitlint

npm install --save-dev @commitlint/config-conventional @commitlint/cli

2.创建commitlint.config.js并配置

module.exports = {
  extends: ['@commitlint/config-conventional'], // 继承规则
  rules: {
    'type-enum': [
      2,
      'always',
      ['feat', 'fix', 'docs', 'style', 'refactor', 'perf', 'test', 'chore', 'revert', 'build']
    ],
    'type-case': [0],
    'type-empty': [0],
    'scope-empty': [0],
    'scope-case': [0],
    'subject-full-stop': [0, 'never'],
    'subject-case': [0, 'never'],
    'header-max-length': [0, 'always', 72]
  }
}

3.安装husky

npm install husky --save-dev

4.生成.husky文件夹并配置

 npx husky install
 
// 生成commit-msg 配置git提交规范检测（检查$1是否写入）
 npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"''

commit-msg文件最终配置

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx --no-install commitlint --edit $1

5.lint-staged检测提交时的代码规范自动修复

package.json中添加

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

//执行下边命令生成pre-commit文件
 npx husky add .husky/pre-commit "lint-staged"

配置完成，使用git cz提交
整合搬运，配置新项目时用