Git提交规范

git提交规范：使用 husky 来监测 Git hooks 钩子，并且通过以下插件完成了对应的配置：

1. 约定式提交规范 (opens new window)：定义规范
2. commitizen (opens new window)：提交规范化工具
3. commitlint (opens new window)：检查提交信息
4. lint-staged (opens new window)：只检查本次修改更新的代码，并在出现错误的时候，自动修复并且推送

2. 规范化提交代码

commitizen 仓库名为 cz-cli (opens new window) ，提供 git cz 指令代替 git commit

当你使用 commitizen 进行代码提交（git commit）时，commitizen 会提醒你在提交时填写所有必需的提交字段！

安装步骤

1. 全局安装Commitizen

   npm install -g commitizen@4.2.4
   

2. 安装并配置 cz-customizable 插件

   // 安装
   npm i [email protected] --save-dev
   
   // 配置到package.json
   ...
     "config": {
       "commitizen": {
         "path": "node_modules/cz-customizable"
       }
     }
   

3. 项目根目录下创建 .cz-config.js 自定义提示文件

   点击查看

   module.exports = {
     // 可选类型
     types: [
       { value: 'feat', name: 'feat:     新功能' },
       { value: 'fix', name: 'fix:      修复' },
       { value: 'docs', name: 'docs:     文档变更' },
       { value: 'style', name: 'style:    代码格式(不影响代码运行的变动)' },
       {
         value: 'refactor',
         name: 'refactor: 重构(既不是增加feature，也不是修复bug)'
       },
       { value: 'perf', name: 'perf:     性能优化' },
       { value: 'test', name: 'test:     增加测试' },
       { value: 'chore', name: 'chore:    构建过程或辅助工具的变动' },
       { value: 'revert', name: 'revert:   回退' },
       { value: 'build', name: 'build:    打包' }
     ],
     // 消息步骤
     messages: {
       type: '请选择提交类型:',
       customScope: '请输入修改范围(可选):',
       subject: '请简要描述提交(必填):',
       body: '请输入详细描述(可选):',
       footer: '请输入要关闭的issue(可选):',
       confirmCommit: '确认使用以上信息提交？(y/n/e/h)'
     },
     // 跳过问题
     skipQuestions: ['body', 'footer'],
     // subject文字长度默认是72
     subjectLimit: 72
   }
   

3. Git Hooks

使用 git cz 代替 git commit 实现规范化的提交诉求，但依然存在着有人会忘记使用的问题。

实现：当《提交描述信息》不符合约定式提交规范的时候，阻止当前的提交，并抛出对应的错误提示

概念

Git hooks（git 钩子 || git 回调方法） ——git 在执行某个事件之前或之后进行一些其他额外的操作

最常用的钩子

Git Hook	调用时机	说明
pre-commit	git commit执行前 它不接受任何参数，并且在获取提交日志消息并进行提交之前被调用。脚本git commit以非零状态退出会导致命令在创建提交之前中止。	可以用git commit --no-verify绕过
commit-msg	git commit执行前 可用于将消息规范化为某种项目标准格式。 还可用于在检查消息文件后拒绝提交。	可以用git commit --no-verify绕过

简单来说这两个钩子：

1. commit-msg：可以用来规范化标准格式，并且可以按需指定是否要拒绝本次提交
2. pre-commit：会在提交前被调用，并且可以按需指定是否要拒绝本次提交

4. 检查提交描述

使用 git hooks 去校验提交信息

使用工具

注意

npm需要在 7.x 以上版本

1. commitlint：用于检查提交信息

2. husky：用于监测git的工具

commitlint

1. 安装依赖：

   npm install --save-dev @commitlint/[email protected] @commitlint/[email protected]
   

2. 创建 commitlint.config.js 文件

   echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js
   

3. 打开 commitlint.config.js ， 增加配置项：

   点击查看

   module.exports = {
     // 继承的规则
     extends: ['@commitlint/config-conventional'],
     // 定义规则类型
     rules: {
       // type 类型定义，表示 git 提交的 type 必须在以下类型范围内
       'type-enum': [
         2,
         'always',
         [
           'feat', // 新功能 feature
           'fix', // 修复 bug
           'docs', // 文档注释
           'style', // 代码格式(不影响代码运行的变动)
           'refactor', // 重构(既不增加新功能，也不是修复bug)
           'perf', // 性能优化
           'test', // 增加测试
           'chore', // 构建过程或辅助工具的变动
           'revert', // 回退
           'build' // 打包
         ]
       ],
       // subject 大小写不做校验
       'subject-case': [0]
     }
   }
   

   注意

   确保保存为 UTF-8 的编码格式，否则可能会出现错误

husky

1. 安装依赖：

   npm install [email protected] --save-dev
   

2. 启动 hooks ， 生成 .husky 文件夹

   npx husky install
   

3. 在 package.json 中生成 prepare 指令

   注意

   需要 npm > 7.0 版本

   npm set-script prepare "husky install"
   

4. 执行 prepare 指令

   npm run prepare
   

5. 添加 commitlint 的 hook 到 husky中

   // 该指令（npx --no-install commitlint --edit "$1"）在commit-msg的hooks下执行
   npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'
   

6. 至此， 不符合规范的 commit 将不再可提交：

   点击查看

   PS F:\xxxxxxxxxxxxxxxxxxxxx\imooc-admin> git commit -m "测试"
   ⧗   input: 测试
   ✖   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)
   

5. 检测提交代码内容规范

使用 husky 配合 eslint 实现

通过 husky 监测 pre-commit 钩子，在该钩子下执行 npx eslint --ext .js,.vue src进行相关检测

当我们进行代码提交时，会检测所有的代码格式规范

1. 执行指令

   // 添加commit时的hook（npx elint --ext .js,.vue src 会在执行到该 hook 时运行）
   npx husky add .husky/pre-commit "npx eslint --ext .js,.vue src"`
   

2. 该操作会生成对应文件 pre-commit：

3. 执行 提交操作 会发现，抛出一系列的错误，代码无法提交

   点击查看

   PS F:\xxxxxxxxxxxxxxxxxxx\imooc-admin> git commit -m 'test'
   
   F:\xxxxxxxxxxxxxxxx\imooc-admin\src\views\Home.vue
     13:9  error  Strings must use singlequote  quotes
   
   ✖ 1 problem (1 error, 0 warnings)
     1 error and 0 warnings potentially fixable with the `--fix` option.
   
   husky - pre-commit hook exited with code 1 (error)
   

4. 想要提交代码，必须处理完成所有的错误信息

6. 自动修复格式错误

两个问题：

1. 我们只修改了个别的文件，没有必要检测所有的文件代码格式
2. 它只能给我们提示出对应的错误，我们还需要手动的进行代码修改

lint-staged 可以让你当前的代码检查 只检查本次修改更新的代码，并在出现错误的时候，自动修复并且推送

1. 修改 package.json 配置

   "lint-staged": {
       "src/**/*.{js,vue}": [
         "eslint --fix",
         "git add"
       ]
     }
   

2. 如上配置，每次只在你本地 commit 之前，校验你提交的内容是否符合你本地配置的 eslint规则，校验会出现两种结果：

   1. 如果符合规则：则会提交成功。
   2. 如果不符合规则：它会自动执行 eslint --fix 尝试帮你自动修复，如果修复成功则会帮你把修复好的代码提交，如果失败，则会提示你错误，让你修好这个错误之后才能允许你提交代码。

3. 修改 .husky/pre-commit 文件

   #!/bin/sh
   . "$(dirname "$0")/_/husky.sh"
   
   npx lint-staged
   

4. 再次执行提交代码

5. 发现 暂存区中 不符合 ESlint 的内容，被自动修复