Vite2.0 + husky + commitlint 定制Git提交规范（含cz-customizable自定义提示文案)

前言

在团队多人开发中，规范的commit message可以快速定位代码提交历史，回溯问题根源，方便组内多人协作，提高团队效率。
注: husky 6.0.0 版本发生了破坏性变更，下述方案使用的是 7.0.1 版本husky，对于低于 6.0.0 版本不适用，低于7.0.1 版本husky也可能存在问题。

husky

husky，是一个为 git 客户端增加 hook 的工具。安装后，它会自动在仓库中的 .git/ 目录下增加相应的钩子；比如 pre-commit 钩子就会在你执行 git commit 的触发。我们可以在 pre-commit 中实现一些比如 lint 检查、单元测试、代码美化等操作。当然，pre-commit 阶段执行的命令当然要保证其速度不要太慢，每次 commit 等很久体验不好。

安装与配置

1.安装husky

Code

npm i husky -D

2.配置 package.json

在项目根目录中找到package.json，并在scripts对象中增加prepare脚本

Javascript

"scripts": {
  ....
  "prepare": "husky install"
}

3.执行prepare脚本

Code

npm run prepare

执行husky install命令时，该命令会创建.husky/目录并指定该目录为git hooks所在的目录。

若执行失败，或生成失败请注意改项目是否绑定git仓库，或是否已git init，没有绑定仓库或没初始化仓库则会失败
多层级项目，外层关联git的将会无效，需将项目独立出去，单独一个git仓库

4.添加git pre-commit hooks

执行git commit命令时会先触发pre-commit这个脚本
注意：npm run lint 命令根据你自己项目中script脚本而定，eslint –ext .js,.vue src在lint脚本中
运行以下命令，创建git hooks

Code

npx husky add .husky/pre-commit "npm run lint"

若提示Usage,则看以下步骤

Code

// 运行此命令
npx husky add .husky/pre-commit

此时你会发现在项目更目录的.husky文件夹下会创建一个pre-commit文件，打开该文件，将文件中的undefined替换为npm run lint

5.添加git commit-msg hooks

commit-msg钩子是来规范我们的commit message信息

Code

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

若提示Usage,则看以下步骤

Code

// 运行此命令
npx husky add .husky/commit-msg

此时你会发现在项目更目录的.husky文件夹下会创建一个commit-msg文件，打开该文件，将文件中的undefined替换为npx --no-install commitlint --edit "$1"

commitlint

commitlint是什么： 当我们运行 git commmit -m ‘xxx’ 时，用来检查 xxx 是否满足固定格式的工具。
为什么使用commitlint：团队中规范了 commit 规范可以更清晰的查看每一次代码提交记录，还可以根据自定义的规则，自动生成 changeLog 文件。

1.安装

bash

npm install @commitlint/config-conventional @commitlint/cli -D

• @commitlint/cli 是commitlint提供的命令行工具，安装后会将cli脚本放置在./node_modules/.bin/目录下
• @commitlint/config-conventional 是社区中一些共享的配置，我们可以扩展这些配置，也可以不安装这个包自定义配置

代码提交基本格式为：<type>(scope?): <subject>

type: 用于表明我们这次提交的改动类型，是新增了功能？还是修改了测试代码？又或者是更新了文档？
scope: 一个可选的修改范围。用于标识此次提交主要涉及到代码中哪个模块。
Subject: 一句话描述此次提交的主要内容，做到言简意赅

• type常用类别

类型	描述
ci	持续集成修改
docs	文档修改
feat	新特性、新功能
fix	修改bug
perf	优化相关，比如提升性能、体验
refactor	代码重构
revert	回滚到上一个版本
style	代码格式修改, 注意不是 css 修改
test	测试用例修改
build	编译相关的修改，例如发布版本、对项目构建或者依赖的改动
chore	其他修改, 比如改变构建流程、或者增加依赖库、工具等
update	普通更新

• 使用方式

bash

git commit -m 'feat: 增加 xxx 功能'
git commit -m 'fix(account): 修复xxx的bug'

配置commitlint.config.js

在项目根目录创建名为commitlint.config.js的文件，代码如下：

Javascript

// rule由name和配置数组组成，如：'name: [0, 'always', 72]'，数组中第一位表示level，可选0,1,2，0为disable，1为warning，2为error，第二位表示是否应用，可选always|never，第三位表示该rule的值。
// 提交默认格式<type>(scope?): <subject>
/*
 * @Description: commit-msg提交信息格式规范
 *
 * commit-msg格式: <type>(scope?): <subject>
 *   - type: 用于表明我们这次提交的改动类型，是新增了功能？还是修改了测试代码？又或者是更新了文档？
 *     - build: 编译相关的修改，例如发布版本、对项目构建或者依赖的改动
 *     - chore: 其他修改, 比如改变构建流程、或者增加依赖库、工具等
 *     - ci: 持续集成修改
 *     - docs: 文档修改
 *     - feat: 新特性、新功能
 *     - fix: 修改bug
 *     - perf: 优化相关，比如提升性能、体验
 *     - refactor: 代码重构
 *     - revert: 回滚到上一个版本
 *     - style: 代码格式修改, 注意不是 css 修改
 *     - test: 测试用例修改
 *   - scope：一个可选的修改范围。用于标识此次提交主要涉及到代码中哪个模块。
 *   - Subject：一句话描述此次提交的主要内容，做到言简意赅
 */
module.exports = {
  extends: ['@commitlint/config-conventional'],
  rules: {
    'type-enum': [
      2,
      'always',
      ['ci', 'docs', 'feat', 'fix', 'perf', 'refactor', 'build', 'chore', 'revert', 'style', 'test']
    ],
    'type-empty': [2, 'never'], // <type> 不能为空
    // 'type-case': [2, 'always', 'lower-case'], // <type>格式小写
    'type-case': [0],
    'scope-empty': [0],
    // 'scope-case': [2, 'always', 'lower-case'], // <scope> 格式 小写
    'scope-case': [0],
    'subject-empty': [2, 'never'], // <subject> 不能为空 (默认)
    // 'subject-full-stop': [2, 'never', '.'], // <subject> 以.为结束标志
    'subject-full-stop': [0, 'never'],
    // 'subject-case': [2, 'never', 'lower-case'],
    'subject-case': [0, 'never'],
    // case可选值
    // 'lower-case' 小写 lowercase
    // 'upper-case' 大写 UPPERCASE
    // 'camel-case' 小驼峰 camelCase
    // 'kebab-case' 短横线 kebab-case
    // 'pascal-case' 大驼峰 PascalCase
    // 'sentence-case' 首字母大写 Sentence case
    // 'snake-case' 下划线 snake_case
    // 'start-case' 所有首字母大写 start-case

    'header-max-length': [0, 'always', 72] // header 最长72
    // 'body-leading-blank': [2, 'always'], // body换行
    // 'footer-leading-blank': [1, 'always'], // <footer> 以空行开头
  }
}

• 如果commit message的格式不符合上述要求，则会报错，检查不通过

bash

✔ Preparing...
✔ Running tasks...
✔ Applying modifications...
✔ Cleaning up...
⧗   input: 修改bug
✖   subject may not be empty [subject-empty]

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

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

VsCode Commit Message Editor 插件

这是一款VsCode 中为了规范 git Commit 提交的一个插件，极大方便在husky + commitlint 限制下，快速总结出当前修改类型

安装

cz-customizable

既然写的骚，那就贯彻到底咯，我们添加cz-customizable，通过npm 命令来生成commit，就不用每次按commit规范来提交代码了，直接通过选择更方便也更直视

1.安装依赖

Code

npm install -D commitizen cz-conventional-changelog @commitlint/config-conventional @commitlint/cli husky

2.配置package.json

package.json中 scripts 增加 "commit": "git-cz"
如下

bash

{
  ...
  "scripts": {
    ...
    "commit": "git-cz"
  },
}

3. 使用命令 npm run commit

4. 自定义提示文案

• 依赖安装
  bash

  npm install -D commitizen cz-conventional-changelog @commitlint/config-conventional @commitlint/cli commitlint-config-cz cz-customizable husky

  package.json中 config 增加 commitizen.path: "node_modules/cz-customizable"

  bash

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

commitlint.config.js中 extends 增加 cz

Javascript

{
  extends: ["@commitlint/config-conventional", "cz"],
}

5.配置.cz-config.js

Javascript

module.exports = {
  types: [
    {      value: 'init',      name: 'init:     初始提交'    },
    {      value: 'feat',      name: 'feat:     增加新功能'    },
    {      value: 'fix',      name: 'fix:      修复bug'    },
    {      value: 'ui',      name: 'ui:       更新UI'    },
    {      value: 'refactor',      name: 'refactor: 代码重构'    },
    {      value: 'release',      name: 'release:  发布'    },
    {      value: 'deploy',      name: 'deploy:   部署'    },
    {      value: 'docs',      name: 'docs:     修改文档'    },
    {      value: 'test',      name: 'test:     增删测试'    },
    {      value: 'chore',      name: 'chore:    更改配置文件'    },
    {      value: 'style',      name: 'style:    代码样式修改不影响逻辑'    },
    {      value: 'revert',      name: 'revert:   版本回退'    },
    {      value: 'add',      name: 'add:      添加依赖'    },
    {      value: 'minus',      name: 'minus:    版本回退'    },
    {      value: 'del',      name: 'del:      删除代码/文件'    }
  ],
  scopes: [],
  messages: {
    type: '选择更改类型:\n',
    scope: '更改的范围:\n',
    // 如果allowcustomscopes为true，则使用
    // customScope: 'Denote the SCOPE of this change:',
    subject: '简短描述:\n',
    body: '详细描述. 使用"|"换行:\n',
    breaking: 'Breaking Changes列表:\n',
    footer: '关闭的issues列表. E.g.: #31, #34:\n',
    confirmCommit: '确认提交?'
  },
  allowCustomScopes: true,
  allowBreakingChanges: ["feat", "fix"]
};