记录一下在项目中集成commitizen、git-cz、@commitlint/{cli,config-conventional}以及husky

前言

心血来潮想约束下项目中的git commit规范。但由于平时没有整理文档的习惯，导致在集成相关插件时踩了一些坑，浪费许多宝贵的划水时间😭。因此痛定思痛，将集成commitizen、git-cz、@commitlint/{cli,config-conventional}以及husky的过程记录下来。

文章整体偏流水账，希望按照本文步骤大家都能够快速且顺利的集成这些插件🙏。

网上有许多关于commit规范的文章，本文没有提及，感兴趣可以再另外了解。eslint、stylelint等代码规范插件可能因项目而异，故本文也没有提及。

规范commit

1. 安装commitizen

npm i commitizen --save-dev -save-exact

2. 安装git-cz

npm i git-cz --save-dev --save-exact

3. 添加changelog.config.js

module.exports = {
  disableEmoji: false,
  format: '{type}{scope}: {emoji}{subject}',
  list: [
    'feat',
    'fix',
    'style',
    'chore',
    'perf',
    'refactor',
    'docs',
    'test',
    'revert',
    'build',
    'ci',
    'release',
  ],
  maxMessageLength: 64,
  minMessageLength: 3,
  questions: ['type', 'scope', 'subject', 'body', 'breaking', 'issues'],
  scopes: ['proj', 'module', 'comps', 'store', 'utils'],
  types: {
    feat: {
      description: 'A new feature',
      emoji: '🚀',
      value: 'feat',
    },
    fix: {
      description: 'A bug fix',
      emoji: '🐛',
      value: 'fix',
    },
    style: {
      description: 'Markup, white-space, formatting, missing semi-colons...',
      emoji: '💄',
      value: 'style',
    },
    chore: {
      description: 'Build process or auxiliary tool changes',
      emoji: '🤖', // 当前类型的commit所显示的表情
      value: 'chore',
    },
    perf: {
      description: 'A code change that improves performance',
      emoji: '⚡️',
      value: 'perf',
    },
    refactor: {
      description: 'A code change that neither fixes a bug or adds a feature',
      emoji: '♻️',
      value: 'refactor',
    },
    docs: {
      description: 'Documentation only changes',
      emoji: '📚',
      value: 'docs',
    },
    test: {
      description: 'Adding missing tests',
      emoji: '✅',
      value: 'test',
    },
    revert: {
      description: 'Reverts a previous commit',
      value: 'revert',
      emoji: '⏪️',
    },
    build: {
      description: 'Changes that affect the build system or external dependencies',
      emoji: '📦️',
      value: 'build',
    },
    ci: {
      description: 'CI related changes',
      emoji: '🎡',
      value: 'ci',
    },
    release: {
      description: 'Create a release commit',
      emoji: '🏹',
      value: 'release',
    },
  },
  messages: {
    type: "Select the type of change that you're committing:\n",
    customScope: 'Denote the SCOPE of this change (optional):\n',
    subject: 'Write a SHORT, IMPERATIVE tense description of the change:\n',
    body: 'Provide a LONGER description of the change:\n ',
    breaking: 'List any BREAKING changes:\n',
    footer: 'Issues this commit closes, e.g #123, #124:\n',
    confirmCommit: 'Are you sure you want to proceed with the commit above:\n',
  },
};

4. 指定git-cz作为commitizen适配器

在package.json中指定commitizen适配器的安装位置

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

校验commit message

1. 安装commitlint

npm i @commitlint/{cli,config-conventional} --save-dev --save-exact

2. 添加commitlint.config.js

module.exports = {
  extends: ['@commitlint/config-conventional'],
  rules: {
    // type-enum与changelog.config.js文件中保持一致
    'type-enum': [
      2,
      'always',
      [
        'feat',
        'fix',
        'style',
        'chore',
        'perf',
        'refactor',
        'docs',
        'test',
        'revert',
        'build',
        'ci',
        'release',
      ],
    ],
  },
};

注册Git钩子

1. 安装husky

npm i husky --save-dev --save-exact
# 添加npm钩子
npm pkg set scripts.prepare="husky"

2. 添加.husky/prepare-commit-msg

#!/usr/bin/env sh
exec < /dev/tty && npx --no-install git-cz --hook

3. 添加.husky/commit-msg

#!/usr/bin/env sh
npx --no-install commitlint -e

问题

1. 添加prepare-commit-msg钩子后，git commit --amend、git rebase -i HEAD~n等命令也会执行.husky/prepare-commit-msg中的命令，影响Git使用。

解决方案： 通过判断shell命令的参数数量，判断使用git-cz与否。修改.husky/prepare-commit-msg如下。

if [ $# -eq 1 ]; then
	# 参数数量等于1时（git commit），使用git-cz
  echo 'Use git-cz'
  exec < /dev/tty && npx --no-install git-cz --hook
else
	# 参数数量大于1时，不使用git-cz
  echo 'Skip git-cz'
fi

2. 不知道git-cz如何自定义scope。有佬知道的话，麻烦教教我哈～（拜谢🙏）