Commitlint 使用总结

1、Commitlint 是什么

在多人协作的背景下，git 仓库和 workflow 的作用很重要。而对于 commit 提交的信息说明存在一定规范，现使用 commitlint + husky 规范git commit -m ""中的描述信息。

一句话说，当我们运行git commmit -m 'xxx'时，用来检查xxx是否满足固定格式的工具。

2、为什么使用 commitlint

我们都知道，在使用 git commit 时，git 会提示我们填入此次提交的信息。

可不要小看了这些 commit，团队中规范了 commit 可以更清晰的查看每一次代码提交记录，还可以根据自定义的规则，自动生成 changeLog 文件。

3、安装

• commitlint: 安装，制定提交规范（采用默认）

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

• 生成配置文件commitlint.config.js，当然也可以是 .commitlintrc.js

echo “module.exports = {extends: [’@commitlint/config-conventional’]};” > commitlint.config.js

• husky: 还要为 git 配置 husky ，对 git 的 commit 操作进行校验。husky继承了Git下所有的钩子，在触发钩子的时候，husky可以阻止不合法的commit，push等等

npm install husky --save-dev

• 在 package.json 中引入 husky

  // package.json
  {
  …
  …
  “husky”: {
  “hooks”: {
  “commit-msg”: “commitlint -E HUSKY_GIT_PARAMS”
  }
  }
  }

这段配置告诉了git hooks，当我们在当前项目中执行 git commit -m ‘测试提交’ 时将触发commit-msg事件钩子并通知husky，从而执行 commitlint -E HUSKY_GIT_PARAMS命令，也就是我们刚开始安装的./node_modules/.bin/commitlint，它将读取commitlint.config.js配置规则并对我们刚刚提交的测试提交这串文字进行校验，若校验不通过，则在终端输出错误，commit终止。

4、Commitlint 提交规范

commitlint 推荐我们使用 config-conventional 配置去写 commit

• 提交格式**（注意冒号后面有空格）**

git commit -m [optional scope]:

type ：用于表明我们这次提交的改动类型，是新增了功能？还是修改了测试代码？又或者是更新了文档？

optional scope：一个可选的修改范围。用于标识此次提交主要涉及到代码中哪个模块。

description：一句话描述此次提交的主要内容，做到言简意赅。

• 常用的 type 类型

类型

描述

build

编译相关的修改，例如发布版本、对项目构建或者依赖的改动

chore

其他修改, 比如改变构建流程、或者增加依赖库、工具等

ci

持续集成修改

docs

文档修改

feat

新特性、新功能

fix

修改bug

perf

优化相关，比如提升性能、体验

refactor

代码重构

revert

回滚到上一个版本

style

代码格式修改, 注意不是 css 修改

test

测试用例修改

• 例子

  git commit -m ‘fix(account): 修复xxx的bug’
  git commit -m ‘refactor: 重构整个项目’

5、初始化@commitlint/cli的配置文件

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

/**
* feature：新功能
* update：更新某功能
* fixbug：修补某功能的bug
* refactor：重构某个功能
* optimize: 优化构建工具或运行时性能
* style：仅样式改动
* docs：仅文档新增/改动
* chore：构建过程或辅助工具的变动
*/
module.exports = {
  extends: [
    '@commitlint/config-conventional'
  ],
  rules: {
    'type-enum': [2, 'always', [
      'feature', 'update', 'fixbug', 'refactor', 'optimize', 'style', 'docs', 'chore'
    ]],
    '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]
  }
};
// 这些配置是什么意思？请自行查阅commitlint文档

6、总结

使用 commitlint 可以规范我们每一次的 commit，我们可以用来自动生成 changeLog 等文件，方便代码管理。

具体可学习以下链接：

前端codeLint-- 为项目集成ESLint、StyleLint、commitLint实战和原理