配置git提交规范跟规范校验（ESLint、commitLint、husky）

时间：2024-03-18 08:02:25

应用场景

在多人协作项目中，如果代码风格统一、代码提交信息的说明准确，那么在后期协作以及Bug处理时会更加方便。下面介绍2种工具

1、git提交规范，我们使用Commitizen工具来撰写合格的 Commit message

第一步：全局安装，安装命令如下。

npm install -g commitizen

第二步：在项目目录里，运行下面的命令，使其支持 Vue 的 Commit message 格式。

commitizen init cz-conventional-changelog --save --save-exact

第三步：配置，打开项目的 package.json 文件，配置如下。

{
  "scripts": {
    "commit": "git-cz",
  },
  "config": {
    "commitizen": {
      "path": "node_modules/cz-conventional-changelog"
    }
  }
}

以后，凡是用到git commit命令，一律改为使用git cz。这时，就会出现选项，用来生成符合格式的 Commit message。

注意：

全局安装使用 git cz 来代替 git commit

局部安装使用 npm run commit 脚本来代替 git commit

我们上面的是使用全局安装

2、安装配置commitlint、配置一套属于我们自己的git commit msg 校验规则

第一步：安装如下工具

npm install @commitlint/cli --save-dev  
npm install @commitlint/config-conventional --save-dev

第二步：初始化@commitlint/cli的配置文件，在项目根目录创建名为commitlint.config.js的文件，代码如下：

 

/* \'feat\', //新功能
  \'fix\', //修补
  \'docs\', //仅文档新增改动
  \'style\', //仅样式改动
  \'refactor\', //重构（即不是新增功能，也不是修改bug的代码变动）
  \'test\', //测试用例
  \'code\' //优化代码 
*/
module.exports = {
  extends: [\'@commitlint/config-conventional\'],
  rules: {
    \'type-enum\': [
      2,
      \'always\',
      [\'feat\', \'fix\', \'docs\', \'style\', \'refactor\', \'test\', \'code\']
    ]
  }
}

这个时候我们进行

 

git add .
git commit -m ""

 

git commit的时候会触发commlint。进行提交规范校验！！！

 

上面我们就完成了commitlint的安装与提交规范的制定。检验commit message的最佳方式是结合git hook，所以需要配合Husky

3、理解git hooks 和 使用husky制定提交时作代码校验

husky继承了Git下所有的钩子，在触发钩子的时候，husky可以阻止不合法的commit,push等等。注意使用husky之前，必须先将代码放到git 仓库中，否则本地没有.git文件，就没有地方去继承钩子了。

husky：一个git钩子工具，这里主要用pre-commit钩子。通俗点讲就是husky可以在你commit之前帮你做一些事情。

lint-staged：在你提交的文件中，执行自定义的指令。比如进行一些文件的格式化还有自动修复等等！！！

第一步：安装，命令如下

npm i -D husky lint-staged pretty-quick

第二步：在package.json中配置上我们的husky的选项

 "husky": {
    "hooks": {
      "pre-commit": "lint-staged" // pre-commit，提交前的钩子
    }
  },
  "lint-staged": {
    // 此处可以配置文件夹和文件类型的范围
    "src/**/*.{jsx,txs,ts,js,json,css,vue}": [
      "prettier --write", // 先使用prettier进行格式化
      "eslint --fix", // 再使用eslint进行自动修复
      "git add" // 所有通过的话执行git
    ]
  }

第三步：把前面配置好commitlint结合到husky，加入

"commit-msg": "commitlint -E HUSKY_GIT_PARAMS"

package.json中配置完整代码如下

 "husky": {
    "hooks": {
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS" 
      "pre-commit": "lint-staged" // pre-commit，提交前的钩子
    }
  },
  "lint-staged": {
    // 此处可以配置文件夹和文件类型的范围
    "src/**/*.{jsx,txs,ts,js,json,css,vue}": [
      "prettier --write", // 先使用prettier进行格式化
      "eslint --fix", // 再使用eslint进行自动修复
      "git add" // 所有通过的话执行git
    ]
  }

这段配置告诉了git hooks，当我们在当前项目中执行 git commit -m \'测试提交\' 时将触发commit-msg事件钩子并通知husky，从而执行 commitlint -E HUSKY_GIT_PARAMS命令，也就是我们刚开始安装的./node_modules/.bin/commitlint，它将读取commitlint.config.js配置规则并对我们刚刚提交的测试提交这串文字进行校验，若校验不通过，则在终端输出错误，commit终止。

通过以上步骤，我们就完成了整个规范的配置

4、总结整个工作流程及原理

husky和commitlint工作流程原理大致如下

 

 

 简要通俗原理

 

5、集成ESLint，可以看其他文字里面的配置

6、最后我们，我们在package.json配置一下简便命令

 

 

 以上配置完结合实际情况配置npm命令完整代码如下

  "scripts": {
    "c": "git add . && git-cz && git push",
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "eslint --fix --ext .js,.vue src",
    "format": "prettier --write \"src/**/*.js\" \"src/**/*.vue\"",
  },
  "config": {
    "commitizen": {
      "path": "./node_modules/cz-conventional-changelog"
    }
  },
  "husky": {
    "hooks": {
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
      "pre-commit": "npm run lint"
    }
  },
  "lint-staged": {
    "src/**/*.{js,json,css,vue}": [
      "prettier --write",
      "eslint --fix",
      "git add"
    ]
  },

 

我们就可以使用npm run c 来进行提交代码跟进行进行提交代码前的规范校验及提交规范

 选择完，下面的提示注解如下

> 1、What is the scope of this change (e.g. component or file name): (press enter to skip) ---- `填写更改范围（功能模块等）`

> 2、Write a short, imperative tense description of the change (max 88 chars): ---- `简易描述提交内容（必填）`

> 3、Write a short, imperative tense description of the change (max 88 chars): ---- `详细描述提交内容（选填）`

> 4、Are there any breaking changes? (y/N) ---- `是否有破坏性更改（默认直接回车，No，有特殊情况可以说明）`

> 5、Does this change affect any open issues? (y/N) ---- `关闭现有的issues（目前未做issues管理，默认直接回车，No）`

注意：不要使用 git bash （不能进行键盘上下选择）我们用vscode

 

 

 

参考学习文章：

https://zhuanlan.zhihu.com/p/100427908

https://blog.csdn.net/qq_29055201/article/details/89248572

https://blog.csdn.net/y491887095/article/details/80594043

 

相关文章