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

前言

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

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

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

规范commit

  1. 安装commitizen
shell 复制代码
npm i commitizen --save-dev -save-exact
  1. 安装git-cz
shell 复制代码
npm i git-cz --save-dev --save-exact
  1. 添加changelog.config.js
javascript 复制代码
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',
  },
};
  1. 指定git-cz作为commitizen适配器

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

json 复制代码
"config": {
    "commitizen": {
      "path": "./node_modules/git-cz"
    }
  }

校验commit message

  1. 安装commitlint
shell 复制代码
npm i @commitlint/{cli,config-conventional} --save-dev --save-exact
  1. 添加commitlint.config.js
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
shell 复制代码
npm i husky --save-dev --save-exact
# 添加npm钩子
npm pkg set scripts.prepare="husky"
  1. 添加.husky/prepare-commit-msg
shell 复制代码
#!/usr/bin/env sh
exec < /dev/tty && npx --no-install git-cz --hook
  1. 添加.husky/commit-msg
shell 复制代码
#!/usr/bin/env sh
npx --no-install commitlint -e

问题

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

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

shell 复制代码
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
  1. 不知道git-cz如何自定义scope。有佬知道的话,麻烦教教我哈~(拜谢🙏)
相关推荐
我不只是切图仔23 分钟前
我只是想给网站加个注册验证码,咋就那么难!
前端·后端
该用户已不存在1 小时前
macOS是开发的终极进化版吗?
前端·后端
小豆包api1 小时前
小豆包AI API × Nano Banana:3D手办 + AI视频生成,「动起来」的神级玩法!
前端·api
布列瑟农的星空1 小时前
大话设计模式——观察者模式和发布/订阅模式的区别
前端·后端·架构
龙在天1 小时前
Vue3 实现 B站 视差 动画
前端
KenXu2 小时前
F2C Prompt to Design、AI 驱动的设计革命
前端
小鱼儿亮亮2 小时前
canvas中画线条,线条效果比预期宽1像素且模糊问题分析及解决方案
前端·react.js
@大迁世界2 小时前
用 popover=“hint“ 打造友好的 HTML 提示:一招让界面更“懂人”
开发语言·前端·javascript·css·html
伍哥的传说2 小时前
Tailwind CSS v4 终极指南:体验 Rust 驱动的闪电般性能与现代化 CSS 工作流
前端·css·rust·tailwindcss·tailwind css v4·lightning css·utility-first
小鱼儿亮亮2 小时前
使用Redux的combineReducers对数据拆分
前端·react.js