06前端自动化规范工具 husky结合commitlint 版本1

前端自动化规范工具husky结合commitlint进行提交信息的校验

实现功能

• 对提交信息进行校验

安装

$npm install --save-dev @commitlint/cli  @commitlint/config-angular

添加git hooks

添加前置钩子

npx husky add .husky/commit-msg "npm-run-test"

.husky 文件夹中会生成commit-msg文件

可以看到npm-run-test就是我们要在提交前执行的npm命令，我们将命令替换成npx --no-install commitlint --edit $1

添加配置

创建commitlint.config.js文件

写入内容

module.exports = {
    extends: ['@commitlint/config-angular'],
    rules: {
        'type-case': [0],
        'type-empty': [2, 'never'],
        'type-enum': [
            2,
            'always',
            [
                'build',
                'ci',
                'docs',
                'feat',
                'fix',
                'perf',
                'refactor',
                'revert',
                'style',
                'test'
            ],
        ],
        'scope-empty': [2, 'never'],
        'subject-empty': [2, 'never'],
    },
};

提交规范

type(scope-case): subject

• type是用来标记做了什么动作
• scope-case用来标记修改了哪个模块
• subject是自己输入提交详情信息

[
  'build',
  'ci',
  'docs',
  'feat',
  'fix',
  'perf',
  'refactor',
  'revert',
  'style',
  'test'
]

举例

fix(repayment): 修复还款利息计算错误
fix(还款管理): 修复还款利息计算错误
perf(生成管理): 添加报表带出功能
style(仪表盘): 修改数据显示布局

参考文档

angular提交规范@commitlint/config-angular - npm (npmjs.com)

@commitlint/cli参考GitHub - conventional-changelog/commitlint: 📓 Lint commit messages

配置命令行交互

安装依赖

npm install --save-dev commitizen @commitlint/cz-commitlint

添加配置

package.json

"config": {
    "commitizen": {
        "path": "@commitlint/cz-commitlint"
    }
},
"scripts": {
    "commit": "git-cz"
},

修改commitlint.config.js

module.exports = {
  extends: ['@commitlint/config-angular'],
  parserPreset: {
    parserOpts: {
      headerPattern: /^(.*?)(?:\((.*)\))?:?\s(.*)$/,
      headerCorrespondence: ['type', 'scope', 'subject'],
    },
  },
  rules: {
    'type-case': [0],
    'type-empty': [2, 'never'],
    'type-enum': [
      2,
      'always',
      [
        '📦build',
        '👷ci',
        '📝docs',
        '🌟feat',
        '🐛fix',
        '🚀perf',
        '🌠refactor',
        '🔂revert',
        '💎style',
        '🚨test',
      ],
    ],
    'scope-empty': [2, 'never'],
    'subject-empty': [2, 'never'],
  },
  prompt: {
    settings: {},
    skip: ['body', 'footer', 'issues'],
    messages: {
      skip: '回车直接跳过',
      max: '最大%d字符',
      min: '%d chars at least',
      emptyWarning: '内容不能为空，重新输入',
      upperLimitWarning: 'over limit',
      lowerLimitWarning: 'below limit',
    },
    questions: {
      type: {
        description: '请选择提交类型',
        enum: {
          '🌟feat': {
            description: '增加新功能',
            title: 'Features',
            emoji: '🌟',
          },
          '🐛fix': {
            description: '修复bug',
            title: 'Bug Fixes',
            emoji: '🐛',
          },
          '📝docs': {
            description: '修改文档',
            title: 'Documentation',
            emoji: '📝',
          },
          '💎style': {
            description: '样式修改不影响逻辑',
            title: 'Styles',
            emoji: '💎',
          },
          '🌠refactor': {
            description: '功能/代码重构',
            title: 'Code Refactoring',
            emoji: '🌠',
          },
          '🚀perf': {
            description: '性能优化',
            title: 'Performance Improvements',
            emoji: '🚀',
          },
          '🚨test': {
            description: '增删测试',
            title: 'Tests',
            emoji: '🚨',
          },
          '📦build': {
            description: '打包',
            title: '打包',
            emoji: '📦',
          },
          '👷ci': {
            description: 'CI部署',
            title: 'Continuous Integrations',
            emoji: '⚙️',
          },

          '🔂revert': {
            description: '版本回退',
            title: 'Reverts',
            emoji: '🔂',
          },
        },
      },
      scope: {
        description: '请输入修改的范围（可选）',
      },
      subject: {
        description: '请简要描述提交（必填）',
      },
      body: {
        description: '请输入详细描述（可选）',
      },
      isBreaking: {
        description: '有什么突破性的变化吗?',
      },
      breakingBody: {
        description:
          '一个破坏性的变更提交需要一个主体。 请输入提交本身的更长的描述  ',
      },
      breaking: {
        description: 'Describe the breaking changes',
      },
      isIssueAffected: {
        description: '是否有未解决的问题?',
      },
      issuesBody: {
        description:
          'If issues are closed, the commit requires a body. Please enter a longer description of the commit itself',
      },
      issues: {
        description: '请输入问题说明',
      },
    },
  },
};

命令行输入npm run commit就可以进行提交操作