commitlint+husky+commitizen+lint-stage代码风格及上传规范管理

工具

紧接上文说到vite+vue3代码风格及格式化操作，前文主要针对本地化配置格式化。为了更加规范仓库代码，本文引入介绍commitlint等工具，在代码commit的时候再次校验为代码规范再上一层保障。

安装commitlint及commitlint配置包

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

添加@commitlint/config-conventional包的目的是使用基础配置，另外也可根据实际需要添加配置文件。例如：commitlint.config.js、.commitlintrc.js、.commitlintrc、.commitlintrc.json、.commitlintrc.yml或package.json中的commit配置

安装husky

1
2
3
4
5
#使用下述命令会在根目录下自动生成.husky文件夹，并创建一个pre-commit钩子实例
npx husky-init && npm install       # npm
npx husky-init && yarn              # Yarn 1
yarn dlx husky-init --yarn2 && yarn # Yarn 2+
pnpm dlx husky-init && pnpm install # pnpm

还可以使用如下方式安装husky：

1
2
3
4
npm install husky --save-dev #安装依赖
npx --no-install husky install #创建.husky目录(使用--no-install的目的是让npx强制使用node_modules目录下的husky依赖包)
npm pkg set scripts.prepare="husky install" #在package.json中添加初始化命令(此步骤可以省略，但是如果是多人开发会很有必要，初始化仓库可以执行该命令)
npx --no-instal husky add .husky/pre-commit "npm run lint" #快速创建pre-commit钩子

添加commit-msg hook（该hook会在commitlint未通过时提示相关信息）

1
npx husky add .husky/commit-msg  'npx --no -- commitlint --edit ${1}'

如何判断上述步骤是否成功可以使用简单的test命令测试

1
npx commitlint --from HEAD~1 --to HEAD --verbose

执行commit之后如果出现类似的信息即可认为配置成功

1
2
3
4
5
6
7
8
9
10
git commit -m "foo: this will fail"
husky > commit-msg (node v10.1.0)
No staged files match any of provided globs.
⧗   input: foo: this will fail
✖   type must be one of [build, chore, ci, docs, feat, fix, perf, refactor, revert, style, test] [type-enum]

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

husky > commit-msg hook failed (add --no-verify to bypass)

添加commitizen

commitizen工具可以通过交互式撰写符合Commit Message规范的Commit Message

1
2
3
npm install commitizen -D
#or
yarn add commitizen -D

执行如下命令生成符合Angular的Commit message格式提交规范（使用其他规范可以跳过此步骤）

1
npx --no-install commitizen init cz-conventional-changelog --save-dev --save-exact

!!!若使用上述命令，需要在package.json中配置一下commitizen适配器

1
2
3
4
5
6
7
8
9
{
  ...
  "config": {
    "commitizen": {
      "path": "./node_modules/cz-conventional-changelog"
    }
  }
  ...
}

另外在package.json中的scripts中添加commit脚本替代git commit

1
2
3
4
5
6
...
"scripts": {
    "cz": "git add . && git-cz",
    "prepare": "husky install"
  }
...

执行完上述操作就可以使用脚本提交代码

配置commitlint

在根目录下新建文件.commitlintrc.js：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 具体配置可参考https://commitlint.js.org/#/reference-rules自行配置不做详细说明
module.exports = {
  ignores: [(commit) => commit.includes('init')],
  extends: ['@commitlint/config-conventional'],
  rules: {
    'header-max-length': [2, 'always', 72],
    'scope-case': [2, 'always', 'lowerCase'],
    'subject-empty': [2, 'never'],
    'subject-case': [2, 'always', ['lower-case', 'sentence-case', 'start-case', 'pascal-case', 'upper-case']],
    'subject-full-stop': [2, 'never', '.'],
    'type-empty': [2, 'never'],
    'type-case': [2, 'always', 'lowerCase'],
    'type-enum': [2, 'always', ['feat', 'fix', 'docs', 'style', 'perf', 'chore', 'build']]
    ]
  }
}

commitizen输出汉化

安装commitlint-config-cz插件配置commit message

1
2
3
4
5
6
7
npm install commitlint-config-cz -D #cz配置插件
#or
yarn add commitlint-config-cz -D #cz配置插件
#and
npm install cz-customizable -D #cz适配器插件
#or
yarn add cz-customizable -D #cz适配器插件

在项目根目录下新建.cz-config.js文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 配置文件可参考https://github.com/leoforfree/cz-customizable/blob/HEAD/cz-config-EXAMPLE.js自行配置不做详细说明
module.exports = {
  types: [
    { value: ':sparkles: feat', name: '✨ feat: 一项新功能' },
    { value: ':bug: fix', name: '🐛 fix: 修复一个Bug' },
    { value: ':memo: docs', name: '📝 docs: 文档变更' },
    { value: ':lipstick: style', name: '💄 style: 代码风格，格式修复' },
    { value: ':zap: perf', name: '⚡️ perf: 代码优化,改善性能' },
    { value: ':rocket: chore', name: '🚀 chore: 变更构建流程或辅助工具' },
    { value: ':package: build', name: '📦️ build: 变更项目构建或外部依赖' }
  ],
  messages: {
    type: '请选择提交类型(必填):',
    subject: '请简要描述提交(必填):',
    confirmCommit: '确定提交此说明吗？'
  },
  skipQuestions: ['scope', 'body', 'breaking', 'footer']
}

创建完.cz-config.js

  • 返回package.json修改commitizen适配器选项
    1
    2
    3
    4
    5
    6
    7
    ...
    "config": {
      "commitizen": {
        "path": "node_modules/cz-customizable"
      }
    },
    ...
  • 若之前使用Angular的Commit message格式提交规范，需修改.commitlintrc.js文件，节约空间可以卸载掉@commitlint/config-conventional插件（用不上了）
    1
    2
    3
    4
    5
    module.exports = {
      ...
      extends: [],
      ...
    }

    集成 gitmoji

    1
    2
    3
    npm install commitlint-config-gitmoji -D
    #or
    yarn add commitlint-config-gitmoji -D
    修改.commitlintrc.js
    1
    2
    3
    4
    5
    module.exports = {
      ...
      extends: ['gitmoji'],
      ...
    }
    使用gitmoji的时候可能会遇到如下问题：
  1. 报错找不到gitmojis.json 两种解决方案：
    在node_modules/commitlint-plugin-gitmoji/lib下添加gitmojis.json
    在根目录下添加gitmojis.json并修改.cz-config.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
    process.env.GITMOJI_PATH = '.gitmoji.json'
    modules.exports={
      ...
    }
```	 

2. 偶遇校验不通过需要严格按照上述事例配置.commitlintrc.js（列出来的rule勿改）

### 安装lint-stage
文件过滤器，每次只校验commit的文件
```shell
npm install lint-staged -D
#or
yarn add lint-stage -D

修改.husky/pre-commit

1
2
3
4
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npx lint-staged

修改package.json

1
2
3
4
5
6
7
8
9
10
11
12
13
// 具体使用可参考lint-stage介绍：https://github.com/okonet/lint-staged#readme
...
"lint-staged": {
  "*.{js,jsx,ts,tsx}": [
    "eslint --fix", //eslint校验
    "prettier --write" //prettier格式化
  ],
  "*.vue": [
    "eslint --fix",
    "prettier --write"
  ]
}
...

有关eslint及prettier的问题可以参见上篇文章。vite+vue3代码风格校验及格式化

以上就是本文全部内容，由于项目成本关系没有引入其他工具，像文件校验，commit-log自动添加，stylelint等，有兴趣的朋友可以自行尝试。

附录

gitmojis.json文件地址

若拙沪漂前端攻城狮

醉后不知天在水，满船清梦压星河。