eslint prettier git 集成让你的提交畅爽无比定义好处自动化生成 CHANGELOG。基于提交的

定义

<类型>[可选 范围]: <描述>

[可选 正文]

[可选 脚注]

好处

自动化生成 CHANGELOG。
基于提交的类型，自动决定语义化的版本变更。

使用

commitzen

遵循约定式提交规范固然好，但是每次补充如此多的提交信息，无疑会增加用户负担，通过commitzen可以自动校验填写必填字段
使用如下命令安装(注意此处不要安装npm仓库的默认版本，早期版本会报错)

npm i -g commitizen@4.2.4
npm i cz-customizable -D

3. 在package.json中配置如下内容

{
  "config": {
    "commitzen": {
      "path": "node_modules/cz-customizable"
    }
  }
}

在根目录中创建.cz-config.js文件，可在此自定义type

module.exports = {
  types: [
    { value: 'feat', name: 'feat:     新增功能' },
    { value: 'fix', name: 'fix:      修复bug' },
    { value: 'docs', name: 'docs:     文档变更' },
    { value: 'style',name: 'style:    样式修改' },
    {
      value: 'refactor',
      name: 'refactor: 重构',
    },
    {
      value: 'perf',
      name: 'perf:   性能优化',
    },
    { value: 'test', name: 'test:    添加测试' },
    {
      value: 'chore',
      name: 'chore:    构建过程或辅助工具的变动',
    },
    { value: 'revert', name: 'revert: 回退' },
  ],

  scopes: [{ name: 'accounts' }, { name: 'admin' }, { name: 'exampleScope' }, { name: 'changeMe' }],

  usePreparedCommit: false,
  allowTicketNumber: false,
  isTicketNumberRequired: false,
  ticketNumberPrefix: 'TICKET-',
  ticketNumberRegExp: '\d{1,5}',
  messages: {
    type: "请选择提交类型",
    customScope: '\n请输入修改范围（可选）:',
    subject: '请简要描述提交\n',
    body: '请详细描述提交\n',
    footer: '请输入要关闭的issue\n',
    confirmCommit: '是否确认使用以上信息提交（y/n）',
  },
  allowCustomScopes: true,
  allowBreakingChanges: ['feat', 'fix'], // 允许破坏性变更的步骤
  skipQuestions: ['body', 'footer', 'scope', 'breaking'], //跳过可选步骤
  subjectLimit: 100,  // 简要信息长度限制
};

5. 提交的时候，使用git cz来执行上述内容

git cz

6. 效果如下 7.

工程化

上述我们使用了约定式规范来提交git，但是对于这种约定式的形式，总会有人忘记，尤其是需要使用git cz特定命令来提交，这区别于常规的git commit -m

hooks

为了防止这种非git cz的意外提交，通过使用git hooks可以在代码提交之前校验提交信息是否规范，具体步骤如下

安装commitlint 来校验提交信息

npm i -D @commitlint/config-conventional@12.1.4 @commitlint/cli@12.1.4

3. 创建commitlint.config.js文件

module.exports = {
  extends: [
    '@commitlint/config-conventional'
  ],
  rules: {
    'type-enum': [
      // 错误级别
      2,
      // 什么情况下验证
      'always',
      [
        'feat',
        'fix',
        'docs',
        'style',
        'refactor',
        'perf',
        'test',
        'chore',
        'revert'
      ]
    ],
    'subject-case': [0] // subject大小写不校验
  }
}

4. 其中的type-enum与.cz-config.js中的type一致即可 5. 此时commitlint就可以对我们提交的内容进行规范化校验了

安装husky来在提交或推送时，自动化检查提交信息，检查代码，运行测试

npm i husky@7.0.1 -D

执行命令，创建.husky文件夹

npx husky install

2. 在package.json 中新增script指令

{
  "scripts": {
    "prepare": "husky"
  }
}

3. 执行命令 npm run prepare 检测安装是否成功

npm run prepare

4. 输出如下结果即为成功 5.

自动化检查提交信息

将commitlint工具，在husky/commit-msg 中执行，

#!/bin/sh
npx --no-install commitlint --edit $1

自动化格式代码

为了实现在提交阶段进行eslint，prettier检查修复，我们需要借助lint-staged包

npm i lint-staged

2. 随后在package.json中配置lint-staged需要执行的命令，如下

{
  "lint-staged": {
    "**/*": "prettier --write --ignore-unknown",
    "*.js":"eslint --cache --fix",
    "*": "你的命令"
  }
}

2. 将lint-staged 在husky/pre-commit中执行

npx lint-staged

此时husky的目录结构应如下所示，在pre-commit中执行代码检查，修复，在commit-msg中执行提交信息检查

验证

按以上步骤设置完成之后，我们可以来测试git commit -m 提交是否会被拦截，以及是否会执行eslint，prettier来检查staged的文件了
提交后控制台显示如下

PS D:\test\test1> git commit -m '125'
✔ Preparing lint-staged...
✔ Hiding unstaged changes to partially staged files...
✔ Running tasks for staged files...
✔ Applying modifications from tasks...
✔ Restoring unstaged changes to partially staged files...
✔ Cleaning up temporary files...
⧗   input: 125
✖   subject may not be empty [subject-empty]
✖   type may not be empty [type-empty]

✖   found 2 problems, 0 warnings
ⓘ   Get help: https://github.com/conventional-changelog/commitlint/#what-is-commitlint

husky - commit-msg hook exited with code 1 (error)

3. 根据输出信息可以看到，✖ subject may not be empty [subject-empty]

✖ type may not be empty [type-empty]，这两处错误，正是因为我们没有使用git cz来提交，导致缺少了提交类型和简述信息

至此我们实现了在提交前进行代码格式化和校验，以及提交信息校验的功能，工程化的路上又进一步🐻

eslint prettier git 集成 让你的提交畅爽无比

定义

好处

使用