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

主要插件

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],
  },
};

git_checkout artifacts checkout代码