一文讲解commitlint,少踩坑

401 阅读1分钟

问题1: 提交代码的时候commit的msg如何规范

问题2: 提交代码之前如何校验代码

初始化的项目,只要commit 的时候msg不为空就可以通过。其实我们想要的结果是,'type message'并且在提交的时校验出我们的错误代码并改正

# git commit -m "init"
[master 50c61b0] init
 2 files changed, 14 insertions(+), 14 deletions(-)
 create mode 100644 .eslintrc.js

如何能校验message信息

  1. 安装commitlint 插件
npm install --save-dev @commitlint/config-conventional @commitlint/cli

  1. .commitlintrc.js文件,或者package.json文件中添加
"commitlint": {
    "extends": [
      "@commitlint/config-conventional"
    ]
  },
  1. 安装husky,定义了Git钩子

husky总是不好用啊

正常安装,这样配置:

"husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
},
"lint-staged": {
    "*.js": [
      "vue-cli-service lint",
      "git add"
    ]
},

但是测试了一下不行

新版husky总结可以试下: zhuanlan.zhihu.com/p/366786798

  1. 还是用.githook,尤大大的写的方案吧

vue-cli初始化项目,要选eslint.

以下在package.json中增加配置

<!--1. 对commit msg 信息进行格式化-->
// 安装@commitlint/cli
// @commitlint/config-conventional
"gitHooks": {
    "commit-msg": "commitlint -e",
},
"commitlint": {
    "extends": [
      "@commitlint/config-conventional"
    ]
},
<!--3. 对代码进行格式化-->
"gitHooks": {
    "pre-commit": "lint-staged"
},
"lint-staged": {
    "*.js": [
      // "vue-cli-service lint",
      "eslint --fix",
      "git add"
]
},

.gitHooks 的原理就是 fork了一份husky,安装这个包,会自动在项目下创建.git/hooks这样的文件,生成很多hook,如pre-commit\commit-msg等等。当我们进行git操作的时候,就会执行相应的hook

新版的husky是通过core.huskypath=.husky,指定husky位置