git-cz 代码提交统一规范配置

主要插件

• commitizen: 代码提交辅助工具
• commitlint: 代码校验工具
• husky: githook 插件
• lint-staged: 前端文件过滤工具，只检测暂存区代码
• cz-customizable： 自定义提交配置

安装步骤

1. 环境准备

• git 版本，笔者使用git for win 2.27.0相关钩子无发现问题，也建议>= 2.27.0版本，低版本会有githook 不兼容问题。
• node.js >= 14，使用相关插件需要14或以上版本，推荐使用node.js 14

2. husky安装配置

npm install --save-dev husky@8.0.1

• 在package.json scripts 属性中添加命令并保存：

"scripts": {

   "prepare": "npx husky install"

} 

• 在控制台输入：npm run prepare 初始化 husky

第一次执行后，会在工程根目录自动创建.husky 目录

• 创建预提交脚本，控制台输入

npx husky add .husky/pre-commit "npx lint-staged"

​ 成功后，目录会生成pre-commit 脚本，如果执行完没有生成，则换一种思路：

​ 先创建脚本文件

npx husky add .husky/pre-commit

再将脚本文件中的undefined 改为 npx lint-staged

.husky/pre-commit详细内容

#!/usr/bin/env sh

. "$(dirname -- "$0")/_/husky.sh"

 

npx lint-staged

• 创建提交校验信息检测脚本，commitlint 进行校验

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

​ 成功后，目录会生成commit-msg脚本，如果执行完没有生成，则类似参考上述步骤：

npx husky add .husky/commit-msg

创建脚本文件后，再手动替换：

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

.husky/commit-msg详细内容

#!/usr/bin/env sh

. "$(dirname -- "$0")/_/husky.sh"

 

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

3. lint-staged安装配置

lint-staged 用于预提交时要进行代码检查的规范，比如eslint

npm install --save-dev lint-staged@12.5.0

在package.json 新增lint-staged 配置

{

  "lint-staged": {

    "src/**/*.{js,vue}": [

      "eslint --fix"

    ]

  },

}

即对暂存区 js/vue 代码进行 eslint规范检查

4. commitlint 提交校验安装配置

commitlint 用于提交格式的校验

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

在工程根目录创建commitlint.config.js文件，保存如下信息：

module.exports = {

  extends: ['@commitlint/config-conventional']

};

5. commitizen适配器

用于命令交互式提交的插件，方便大家的进行提交

• 全局安装commitizen

npm install -g commitizen@4.2.4  // 建议使用此版本，更高版本测试存在问题

• 安装自定义项目提交配置适配器

npm install --save-dev cz-customizable@6.3.0

• package.json 添加commitizen配置，config

{

  "devDependencies": {

     "cz-customizable": "^6.3.0"

  },

  "config": {

    "commitizen": {

      "path": "./node_modules/cz-customizable"

    }

  }

}

• 配置cz-customizable配置项

在工程根目录创建 .cz-config.js 配置文件，文件内容参考如下：

module.exports = {
  types: [
    { value: 'feat', name: 'feat:     新功能', emoji: '🎸' },
    { value: 'fix', name: 'fix:      修复', emoji: '🐛' },
    { value: 'docs', name: 'docs:     文档变更', emoji: '✏️' },
    { value: 'style', name: 'style:    代码格式(不影响代码运行的变动)', emoji: '💄' },
    {
      value: 'refactor',
      name: 'refactor: 重构(既不是增加feature，也不是修复bug)',
      emoji: '💡',
    },
    { value: 'perf', name: 'perf:     性能优化', emoji: '⚡️' },
    { value: 'test', name: 'test:     增加测测试', emoji: '💍' },

    { value: 'chore', name: 'chore:    构建过程或辅助工具的变动', emoji: '🤖' },

    { value: 'revert', name: 'revert:   回退' },

    { value: 'build', name: 'build:    打包' },

  ],

  // override the messages, defaults are as follows

  messages: {

    type: '请选择提交类型:',

    // scope: '请输入文件修改范围(可选):',

    // used if allowCustomScopes is true

    customScope: '请输入修改范围(可选):',

    subject: '请简要描述提交(必填):',

    body: '请输入详细描述(可选，待优化去除，跳过即可):',

    // breaking: 'List any BREAKING CHANGES (optional):\n',

    footer: '请输入要关闭的issue(待优化去除，跳过即可):',

    confirmCommit: '确认使用以上信息提交？(y/n/e/h)',

  },

  allowCustomScopes: true,

  // allowBreakingChanges: ['feat', 'fix'],

  skipQuestions: ['scope', 'body', 'footer'],

  // limit subject length, commitlint默认是72

  subjectLimit: 72,

};

• 增加自定义校验规则到commitlint配置

编辑commitlint.config.js，导入.cz-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],
  },
};