pre-commit介绍

本页介绍使用 cz-git 和 simple-git-hooks 实现规范提交信息和提交前执行代码检查。cz-git 用于规范Git的提交信息，simple-git-hooks 用于管理 Git Hooks，实现提交前执行代码检查。

背景

使用该工具的前提是已经配置好了eslint、stylelint、prettier等脚本。 package.json scripts中必须有以下配置：

"scripts": {
  "lint": "eslint . --ext .vue,.js,.jsx,.ts.tsx ./",
  "lint:fix": "eslint . --ext .vue,.js,.jsx,.ts.tsx ./ --fix",
  "stylelint": "stylelint src/**/*.{html,vue,css,scss}",
  "stylelint:fix": "stylelint --fix src/**/*.{html,vue,css,scss}",

  "postinstall": "simple-git-hooks", // 必须有此脚本，有此脚本之后，npm instal的时候，会自动生成.husky文件
  "preinstall": "npx only-allow pnpm"
}

安装依赖

npm

$ npm install simple-git-hooks cz-git lint-staged --save-dev

yarn

$ yarn add simple-git-hooks cz-git lint-staged --save-dev

pnpm

$ pnpm add simple-git-hooks cz-git lint-staged --save-dev

配置cz-git

在package.json中添加以下配置

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

配置lint-staged

在package.json中添加以下配置

"lint-staged": {
  "*.{vue,js,jsx,ts,tsx}": [
    "pnpm run lint",
    "git add"
  ],
  "*.{vue,css,scss}": [
    "pnpm run stylelint",
    "git add"
  ]
}

配置simple-git-hooks

在package.json中添加以下配置

"simple-git-hooks": {
  "pre-commit": "pnpm lint-staged",
  "preserveUnused": true
},

配置.commitlintrc.cjs

/** @type {import('cz-git').UserConfig} */
module.exports = {
  rules: {
    // @see: https://commitlint.js.org/#/reference-rules
  },
  prompt: {
    alias: { fd: 'docs: fix typos' },
    messages: {
      type: '选择你要提交的类型 :',
      scope: '选择一个提交范围（可选）:',
      customScope: '请输入自定义的提交范围 :',
      subject: '填写简短精炼的变更描述 :\n',
      body: '填写更加详细的变更描述（可选）。使用 "|" 换行 :\n',
      breaking: '列举非兼容性重大的变更（可选）。使用 "|" 换行 :\n',
      footerPrefixsSelect: '选择关联issue前缀（可选）:',
      customFooterPrefixs: '输入自定义issue前缀 :',
      footer: '列举关联issue (可选) 例如: #31, #I3244 :\n',
      confirmCommit: '是否提交或修改commit ?',
    },
    types: [
      { value: 'feat', name: 'feat:     ✨  新增功能 | A new feature', emoji: ':sparkles:' },
      { value: 'fix', name: 'fix:      🐛  修复缺陷 | A bug fix', emoji: ':bug:' },
      { value: 'docs', name: 'docs:     📝  文档更新 | Documentation only changes', emoji: ':memo:' },
      { value: 'style', name: 'style:    💄  代码格式 | Changes that do not affect the meaning of the code', emoji: ':lipstick:' },
      { value: 'refactor', name: 'refactor: ♻️   代码重构 | A code change that neither fixes a bug nor adds a feature', emoji: ':recycle:' },
      { value: 'perf', name: 'perf:     ⚡️  性能提升 | A code change that improves performance', emoji: ':zap:' },
      { value: 'test', name: 'test:     ✅  测试相关 | Adding missing tests or correcting existing tests', emoji: ':white_check_mark:' },
      { value: 'build', name: 'build:    📦️  构建相关 | Changes that affect the build system or external dependencies', emoji: ':package:' },
      { value: 'ci', name: 'ci:       🎡  持续集成 | Changes to our CI configuration files and scripts', emoji: ':ferris_wheel:' },
      { value: 'revert', name: 'revert:   ⏪️  回退代码 | Revert to a commit', emoji: ':rewind:' },
      { value: 'chore', name: 'chore:    🔨  其他修改 | Other changes that do not modify src or test files', emoji: ':hammer:' },
    ],
    useEmoji: false,
    emojiAlign: 'center',
    themeColorCode: '',
    scopes: [],
    allowCustomScopes: true,
    allowEmptyScopes: true,
    customScopesAlign: 'bottom',
    customScopesAlias: 'custom',
    emptyScopesAlias: 'empty',
    upperCaseSubject: false,
    markBreakingChangeMode: true,
    allowBreakingChanges: ['feat', 'fix'],
    breaklineNumber: 100,
    breaklineChar: '|',
    skipQuestions: [],
    issuePrefixs: [
      // 如果使用 gitee 作为开发管理
      { value: 'link', name: 'link:     链接 ISSUES 进行中' },
      { value: 'closed', name: 'closed:   标记 ISSUES 已完成' },
    ],
    customIssuePrefixsAlign: 'top',
    emptyIssuePrefixsAlias: 'skip',
    customIssuePrefixsAlias: 'custom',
    allowCustomIssuePrefixs: true,
    allowEmptyIssuePrefixs: true,
    confirmColorize: true,
    maxHeaderLength: Number.POSITIVE_INFINITY,
    maxSubjectLength: Number.POSITIVE_INFINITY,
    minSubjectLength: 0,
    scopeOverrides: undefined,
    defaultBody: '',
    defaultIssues: '',
    defaultScope: '',
    defaultSubject: '',
  },
}