配置一套符合团队习惯且规范的husky(项目)

配置一套符合团队习惯且规范的husky

git提交信息规范

具体规范

推荐基于开源的 commitlint 来实现公司在git提交信息的规范，通过覆盖等手段扩展该开源规范以适应公司前端团队的需求。

主要使用的是commitlint的@commitlint/config-conventional规则，其中在type-enum新增了“merge”类型，具体细则如下：

  • type-enum：类型允许范围改为['build', 'ci', docs', 'feat', 'merge', 'fix', 'perf', 'refactor', 'style', 'test', 'revert', 'chore']
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    {
      feat: {
        description: 'A new feature',
        title: 'Features',
        emoji: '✨',
      },
      fix: {
        description: 'A bug fix',
        title: 'Bug Fixes',
        emoji: '🐛',
      },
      docs: {
        description: 'Documentation only changes',
        title: 'Documentation',
        emoji: '📚',
      },
      style: {
        description:
          'Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)',
        title: 'Styles',
        emoji: '💎',
      },
      refactor: {
        description:
          'A code change that neither fixes a bug nor adds a feature',
        title: 'Code Refactoring',
        emoji: '📦',
      },
      perf: {
        description: 'A code change that improves performance',
        title: 'Performance Improvements',
        emoji: '🚀',
      },
      test: {
        description: 'Adding missing tests or correcting existing tests',
        title: 'Tests',
        emoji: '🚨',
      },
      build: {
        description:
          'Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)',
        title: 'Builds',
        emoji: '🛠',
      },
      ci: {
        description:
          'Changes to our CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs)',
        title: 'Continuous Integrations',
        emoji: '⚙️',
      },
      chore: {
        description: "Other changes that don't modify src or test files",
        title: 'Chores',
        emoji: '♻️',
      },
      revert: {
        description: 'Reverts a previous commit',
        title: 'Reverts',
        emoji: '🗑',
      },
    }
    详细类型的解说可以查看这里
    1
    2
    3
    4
    //git commit 使用示例：

    "foo: 修复登录出错的bug" # 失败
    "fix: 修复登录出错的bug" # 成功

    使用说明

首次使用git commit之前，需要配置好用户名和邮箱：
设置用户名字为中文名，例如：git config –global user.name “张三” ；
设置用户邮箱为个人的国双邮箱账号（带有@gridsum.com后缀），例如：git config –global user.email “zhangsan@gridsum.com“。

  • git commit的具体用法：
    1
    git commit -m <type>[(optional scope)]: <description>
  • type：表示这次提交改动的类型，允许的类型详情可见下方；
  • optional scope：可选，表示修改范围。用于标识此次提交主要涉及到代码中哪个模块；
  • description：描述此次提交的主要内容。
  • type的可选类型：
  1. build：主要目的是修改项目构建系统(例如 glup，webpack，rollup 的配置等)的提交
  2. ci：主要目的是修改项目继续集成流程(例如 Travis，Jenkins，GitLab CI，Circle等)的提交
  3. docs：文档更新
  4. feat：新增功能
  5. merge：分支合并
  6. fix：bug 修复
  7. perf：性能, 体验优化
  8. refactor：重构代码(既没有新增功能，也没有修复 bug)
  9. style：不影响程序逻辑的代码修改(修改空白字符，格式缩进，补全缺失的分号等，没有改变代码逻辑)
  10. test：新增测试用例或是更新现有测试
  11. revert：回滚某个更早之前的提交
  12. chore：不属于以上类型的其他类型

配置校验工具

代码提交时通过githook进行校验，符合规范的提交信息才能commit

  1. 配置commitlint
    主要使用commitlint来约束项目git commit的操作规范。
    1
    npm install -D @commitlint/cli
    commitlint是git提交信息校验的主流工具，基于以上建议的提交信息规范，我们可以给出一份相应的commitlint规则配置文件，如下：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    // commitlint.config.js
    module.exports = {
      extends: ['@commitlint/config-conventional'],
      rules: {
        'type-enum': [
          2,
          'always',
          [
            'build',
            'ci',
            'docs',
            'feat',
            'merge',
            'fix',
            'perf',
            'refactor',
            'style',
            'test',
            'revert',
            'chore',
          ],
        ],
      },

    };
  2. 使用husky

husky是一个让配置git钩子变得更简单的工具，支持所有的git钩子。它可以将git内置的钩子暴露出来，很方便地进行钩子命令注入，而不需要在.git/hooks目录下自己写shell脚本了。您可以使用它来lint您的提交消息、运行测试、lint代码等。当你commit或push的时候。husky触发所有git钩子脚本。

配合husky，可以帮助我们实现代码commit前进行提交信息校验。使用配置如下：

1
2
3
4
5
6
7
8
9
10
11
12
// package.json 以下只展示了husky和commitlint实现代码commit前进行校验的配置
{
  "husky": {
    "hooks: {
      "commit-msg": "commitlint -e $HUSKY_GIT_PARAMS"
    }
  },
  "devDependencies": {
    "husky": "0.14.3",
    "@commitlint/cli": "^13.1.0"
  }
}
参考文章

基于eslint和husky的代码规范配置
手把手教你搭建规范的团队vue项目，包含commitlint，eslint，prettier，husky，commitizen等等
每周轮子之 husky：统一规范团队 Git Hooks

项目优化
前端基础 JS

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！