前提概要

我们使用<font style="color:rgb(77, 77, 77);">husky</font>检测<font style="color:rgb(77, 77, 77);">git</font>钩子，<font style="color:rgb(77, 77, 77);">lint-staged</font>规范化暂存区代码，<font style="color:rgb(77, 77, 77);">commitlint</font>规范化提交信息。

钩子介绍

git钩子 描述
pre-commit 判断提交的代码是否符合规范
commit-msg 判断 commit 信息是否符合规范
pre-push 执行测试,避免对以前的内容造成影响

工具介绍

  • <font style="color:rgb(51, 51, 51);">husky</font>：操作git钩子的工具
  • <font style="color:rgb(51, 51, 51);">lint-staged</font>：本地暂存代码检查工具
  • <font style="color:rgb(51, 51, 51);">commitlint</font>：提交信息校验工具
  • <font style="color:rgb(51, 51, 51);">commitizen</font>：辅助提交信息 ，全局安装后可以使用<font style="color:rgb(51, 51, 51);">cz</font>命令，选项式提交<font style="color:rgb(51, 51, 51);">git</font>

commitlin

  • 安装依赖
  1. pnpm add @commitlint/config-conventional @commitlint/cli cz-git czg -D
  • 使用的版本
  1. "devDependencies": {
  2.   "@commitlint/cli": "^19.5.0",
  3.   "@commitlint/config-conventional": "^19.5.0",
  4.   "cz-git": "^1.10.1",
  5.   "czg": "^1.10.1"
  6. },
  • 说明

@commitlint/config-conventional: 这是一个配置包，提供了一套基于 Angular 规范的提交信息格式规则。它帮助确保提交信息的一致性和可读性。

@commitlint/cli：这是 Commitlint 的命令行工具，用于检查提交信息是否符合指定的规则。通常与 @commitlint/config-conventional 一起使用。

cz-git: 这是一个 Commitizen 适配器，提供了一种交互式的方式来生成符合规范的提交信息。它可以帮助开发者在提交代码时选择合适的提交类型、描述和其他信息。

czg: 这是一个命令行工具，类似于 cz-git，提供了一个交互式的界面来生成提交信息。它通常用于简化和标准化提交信息的创建过程。

  • package.json更新相关代码
  1. {
  2.   "scripts": {
  3.     "commit": "czg"
  4.   },
  5.   "commitizen": {
  6.     "path": "node_modules/cz-git"
  7.   }
  8. }
  • 简洁版本 - commitlint.config.cjs
  1. const fs = require('fs');
  2. const path = require('path');
  4. /** @type {import('cz-git').UserConfig} */
  5. module.exports = {
  6.   ignores: [(commit) => commit.includes('init')],
  7.   extends: ['@commitlint/config-conventional'],
  8.   rules: {
  9.     'body-leading-blank': [2, 'always'],
  10.     'footer-leading-blank': [1, 'always'],
  11.     'header-max-length': [2, 'always', 108],
  12.     'subject-empty': [2, 'never'],
  13.     'type-empty': [2, 'never'],
  14.     'subject-case': [0],
  15.     'type-enum': [
  16.       2,
  17.       'always',
  18.       [
  19.         'fix',
  20.         'docs',
  21.         'style',
  22.         'refactor',
  23.         'perf',
  24.         'test',
  25.         'build',
  26.         'ci',
  27.         'chore',
  28.         'revert',
  29.         'wip',
  30.         'workflow',
  31.         'types',
  32.         'release'
  33.       ]
  34.     ]
  35.   },
  36.   prompt: {
  37.     messages: {
  38.       type: '选择你要提交的类型 :',
  39.       scope: '选择一个提交范围[可选]:',
  40.       customScope: '请输入自定义的提交范围 :',
  41.       subject: '请简要描述提交 :\n',
  42.       body: '填写更加详细的变更描述[可选]。使用 "|" 换行 :\n',
  43.       breaking: '列举非兼容性重大的变更[可选]。使用 "|" 换行 :\n',
  44.       footerPrefixsSelect: '选择关联issue前缀[可选]:',
  45.       customFooterPrefixs: '输入自定义issue前缀 :',
  46.       footer: '列举关联issue [可选] 例如: #31, #I3244 :\n',
  47.       confirmCommit: '是否提交或修改commit ?'
  48.     },
  49.     types: [
  50.       { value: 'feat', name: 'feat:   ✨  新增功能', emoji: '✨' },
  51.       { value: 'fix', name: 'fix:   🐛  修复缺陷', emoji: '🐛' },
  52.       { value: 'docs', name: 'docs:   📝  文档变更', emoji: '📝' },
  53.       {
  54.         value: 'style',
  55.         name: 'style:   💄  代码格式',
  56.         emoji: '💄'
  57.       },
  58.       {
  59.         value: 'refactor',
  60.         name: 'refactor:   🔨  代码重构',
  61.         emoji: '🔨'
  62.       },
  63.       { value: 'perf', name: 'perf:    ⚡️  性能优化', emoji: '⚡️' },
  64.       {
  65.         value: 'test',
  66.         name: 'test:   ✅  测试',
  67.         emoji: '✅'
  68.       },
  69.       {
  70.         value: 'build',
  71.         name: 'build:   📦️  打包构建',
  72.         emoji: '📦️'
  73.       },
  74.       { value: 'ci', name: 'ci:   👷  CI 配置变更', emoji: '👷' },
  75.       { value: 'revert', name: 'revert:   ⏪️  代码回退', emoji: '⏪️' },
  76.       {
  77.         value: 'chore',
  78.         name: 'chore:   🚀  构建/工程依赖/工具',
  79.         emoji: '🚀'
  80.       },
  81.       { value: 'wip', name: 'wip:   🚧  正在开发中', emoji: '🚧' },
  82.       { value: 'workflow', name: 'workflow:   🎯  工作流程改进', emoji: '🎯' }
  83.     ],
  84.     useEmoji: true,
  85.     scopes: [],
  86.     customScopesAlign: 'bottom',
  87.     emptyScopesAlias: 'empty',
  88.     customScopesAlias: 'custom',
  89.     allowBreakingChanges: ['feat', 'fix'],
  90.     skipQuestions: ['scope', 'body', 'breaking', 'footerPrefix', 'footer'] // 自定义选择指定的问题不显示
  91.   }
  92. };
  • 注释版本 - commitlint.config.cjs
  1. // @see: https://cz-git.qbenben.com/zh/guide
  2. const fs = require('fs');
  3. const path = require('path');
  5. const scopes = fs
  6.   .readdirSync(path.resolve(__dirname, 'src'), { withFileTypes: true })
  7.   .filter((dirent) => dirent.isDirectory())
  8.   .map((dirent) => dirent.name.replace(/s$/, ''));
  10. /** @type {import('cz-git').UserConfig} */
  11. module.exports = {
  12.   ignores: [(commit) => commit.includes('init')],
  13.   extends: ['@commitlint/config-conventional'],
  14.   rules: {
  15.     // @see: https://commitlint.js.org/#/reference-rules
  16.     'body-leading-blank': [2, 'always'], // 正文以空行开头
  17.     'footer-leading-blank': [1, 'always'], // 脚注以空行开头
  18.     'header-max-length': [2, 'always', 108], // 头部最大长度
  19.     'subject-empty': [2, 'never'], // 主题不能为空
  20.     'type-empty': [2, 'never'], // 类型不能为空
  21.     'subject-case': [0], // 主题格式
  22.     'type-enum': [
  23.       2,
  24.       'always',
  25.       [
  26.         'fix',
  27.         'docs',
  28.         'style',
  29.         'refactor',
  30.         'perf',
  31.         'test',
  32.         'build',
  33.         'ci',
  34.         'chore',
  35.         'revert',
  36.         'wip',
  37.         'workflow',
  38.         'types',
  39.         'release'
  40.       ]
  41.     ]
  42.   },
  43.   prompt: {
  44.     messages: {
  45.       type: '选择你要提交的类型 :',
  46.       scope: '选择一个提交范围[可选]:',
  47.       customScope: '请输入自定义的提交范围 :',
  48.       subject: '填写简短精炼的变更描述 :\n',
  49.       body: '填写更加详细的变更描述[可选]。使用 "|" 换行 :\n',
  50.       breaking: '列举非兼容性重大的变更[可选]。使用 "|" 换行 :\n',
  51.       footerPrefixsSelect: '选择关联issue前缀[可选]:',
  52.       customFooterPrefixs: '输入自定义issue前缀 :',
  53.       footer: '列举关联issue [可选] 例如: #31, #I3244 :\n',
  54.       confirmCommit: '是否提交或修改commit ?'
  55.     },
  56.     types: [
  57.       { value: 'feat', name: 'feat:   ✨  新增功能', emoji: '✨' },
  58.       { value: 'fix', name: 'fix:   🐛  修复缺陷', emoji: '🐛' },
  59.       { value: 'docs', name: 'docs:   📝  文档变更', emoji: '📝' },
  60.       {
  61.         value: 'style',
  62.         name: 'style:   💄  代码格式',
  63.         emoji: '💄'
  64.       },
  65.       {
  66.         value: 'refactor',
  67.         name: 'refactor:   🔨  代码重构',
  68.         emoji: '🔨'
  69.       },
  70.       { value: 'perf', name: 'perf:    ⚡️  性能优化', emoji: '⚡️' },
  71.       {
  72.         value: 'test',
  73.         name: 'test:   ✅  测试',
  74.         emoji: '✅'
  75.       },
  76.       {
  77.         value: 'build',
  78.         name: 'build:   📦️  打包构建',
  79.         emoji: '📦️'
  80.       },
  81.       { value: 'ci', name: 'ci:   👷  CI 配置变更', emoji: '👷' },
  82.       { value: 'revert', name: 'revert:   ⏪️  代码回退', emoji: '⏪️' },
  83.       {
  84.         value: 'chore',
  85.         name: 'chore:   🚀  构建/工程依赖/工具',
  86.         emoji: '🚀'
  87.       },
  88.       { value: 'wip', name: 'wip:   🚧  正在开发中', emoji: '🚧' },
  89.       { value: 'workflow', name: 'workflow:   🎯  工作流程改进', emoji: '🎯' },
  90.       { value: 'types', name: 'types:   🏡  类型定义文件修改', emoji: '🏡' }
  91.     ],
  92.     useEmoji: true, // 是否开启 commit message 带有 Emoji 字符。
  93.     emojiAlign: 'center', // 设置 Emoji 字符 的 位于头部位置
  94.     themeColorCode: '', // 设置提示查询器主题颜色, cyan青色
  95.     scopes: [...scopes], // 自定义选择 模块范围 命令行显示信息
  96.     allowCustomScopes: true, // 是否在选择 模块范围 显示自定义选项(custom)
  97.     allowEmptyScopes: true, // 是否在选择 模块范围 显示为空选项(empty)
  98.     customScopesAlign: 'bottom', // 设置 选择范围 中 为空选项(empty) 和 自定义选项(custom) 的 位置
  99.     customScopesAlias: 'custom', // 自定义 选择范围 中 自定义选项(custom) 在命令行中显示的 名称
  100.     emptyScopesAlias: 'empty', // 自定义 选择范围 中 为空选项(empty) 在命令行中显示的 名称
  101.     upperCaseSubject: false, // 是否自动将简短描述(subject)第一个字符进行大写处理
  102.     markBreakingChangeMode: false, // 添加额外的问题重大变更(BREAKING CHANGES)提问，询问是否需要添加 "!" 标识于
  103.     allowBreakingChanges: ['feat', 'fix'], // 允许出现 重大变更(BREAKING CHANGES)的特定 type
  104.     breaklineNumber: 100, // 详细描述(body)和重大变更(BREAKING CHANGES)中根据字符超过该数值自动换行
  105.     breaklineChar: '|', // 详细描述(body)和重大变更(BREAKING CHANGES)中换行字符
  106.     skipQuestions: ['scope', 'body', 'breaking', 'footerPrefix', 'footer'], // 自定义选择指定的问题不显示
  107.     // 自定义选择issue前缀
  108.     issuePrefixs: [
  109.       // 如果使用 gitee 作为开发管理
  110.       { value: 'link', name: 'link:     链接 ISSUES 进行中' },
  111.       { value: 'closed', name: 'closed:   标记 ISSUES 已完成' }
  112.     ],
  113.     customIssuePrefixsAlign: 'top', // 设置 选择 issue 前缀 中 跳过选项(skip) 和 自定义选项(custom) 的 位置
  114.     emptyIssuePrefixsAlias: 'skip', // 自定义 选择 issue 前缀 中 跳过选项(skip) 在命令行中显示的 名称
  115.     customIssuePrefixsAlias: 'custom', // 自定义 选择 issue 前缀 中 自定义选项(custom) 在命令行中显示的 名称
  116.     allowCustomIssuePrefixs: true, // 是否在选择 ISSUE 前缀 显示自定义选项(custom)
  117.     allowEmptyIssuePrefixs: true, // 是否在选择 ISSUE 前缀 显示为跳过选项(skip)
  118.     confirmColorize: true, // 确定提交中模板 commit message 是否着色
  119.     // maxHeaderLength: Infinity, // 定义commit message中的 header 长度, 给予在命令行中的校验信息
  120.     // maxSubjectLength: Infinity, // 定义commit message中的 subject 长度, 给予在命令行中的校验信息
  121.     minSubjectLength: 0, // 定义commit message中的 subject 长度, 给予在命令行中的校验信息
  122.     scopeOverrides: undefined, // 自定义选择了特定类型后 覆盖模块范围 命令行显示信息
  123.     defaultBody: '', // 在 详细描述 中是否使用显示默认值
  124.     defaultIssues: '', // 在 输入ISSUE 中是否使用显示默认值
  125.     defaultScope: '', // 如果 defaultScope 与在选择范围列表项中的 value 相匹配就会进行星标置顶操作。
  126.     defaultSubject: '' // 在 简短描述 中是否使用显示默认值
  127.   }
  128. };

husky & lint-staged

  • 安装依赖
  1. pnpm add husky lint-staged -D
  • 使用的版本
  1. "devDependencies": {
  2.     "husky": "^9.1.6",
  3.     "lint-staged": "^15.2.10"
  4.   },
  • 更新package.json
  1. "scripts": {
  2.     "prepare": "husky",
  3.   },
  • 添加文件.lintstagedrc
  1. {
  2.   "*.{js,jsx,ts,tsx}": [
  3.     "pnpm run lint:fix"
  4.   ],
  5.   "*.{css,scss}": [
  6.     "pnpm run stylelint:fix",
  7.     "git add"
  8.   ]
  9. }
  • 或者lint-staged.config.cjs
  1. module.exports = {
  2.   "*.{js,jsx,ts,tsx}": ["eslint --fix", "prettier --write"],
  3.   "{!(package)*.json,*.code-snippets,.!(browserslist)*rc}": ["prettier --write--parser json"],
  4.   "package.json": ["prettier --write"],
  5.   "*.vue": ["eslint --fix", "prettier --write", "stylelint --fix"],
  6.   "*.{scss,less,styl,html}": ["stylelint --fix", "prettier --write"],
  7.   "*.md": ["prettier --write"]
  8. };

参考