vue,react 配置 commitlint 和 eslint 钩子

种瓜南山下

关于 commitlint, husky, eslint 的具体信息可以见官网。

一、配置 commitlint

commitlint 搭配 husky 的 commit message 钩子后,每次提交 git 版本信息的时候,会根据配置的规则进行校验,若不符合规则会 commit 失败,并提示相应信息。
1. 安装 commitlint husky 依赖

npm install --save-dev @commitlint/{cli,config-conventional}
npm install --save-dev husky@next  # 安装最新版,就不用配置 scripts 脚本了

2. 新建 commitlint.config.js 文件

module.exports = {
    extends: ['@commitlint/config-conventional']
};

commitlint.config.js 配置文件可以添加自己的规则,这里 @commitlint/config-conventional 提供了官方的规则扩展:

build:主要目的是修改项目构建系统(例如 glup,webpack,rollup 的配置等)的提交
ci:主要目的是修改项目继续集成流程(例如 Travis,Jenkins,GitLab CI,Circle等)的提交
docs:文档更新
feat:新增功能
merge:分支合并 Merge branch ? of ?
fix:bug 修复
perf:性能, 体验优化
refactor:重构代码(既没有新增功能,也没有修复 bug)
style:不影响程序逻辑的代码修改(修改空白字符,格式缩进,补全缺失的分号等,没有改变代码逻辑)
test:新增测试用例或是更新现有测试
revert:回滚某个更早之前的提交
chore:不属于以上类型的其他类型

3. 配置 package.json 文件
添加 husky 字段

"husky": {
    "hooks": {
      "commit-msg": "commitlint -e $HUSKY_GIT_PARAMS"
    }
  },

4. 测试

git add .
git commit -m "foo: this will fail"

图片描述

配置 eslint 钩子

添加 husky 的 pre-commit 的钩子,husky 会在你每次提交 commit 之前使用 eslint 校验代码规范,不符合规则会提交失败会打印出校验信息。
添加 husky 字段的配置

"husky": {
    "hooks": {
      "commit-msg": "commitlint -e $HUSKY_GIT_PARAMS",
      "pre-commit": "eslint \"src/**/*.{js,ts,vue}\""
    }
  },

图片描述

- 跳过校验
使用 --no-verify 指令可以跳过检验规则

git add . && git commit --no-verify -m "代码规范强制提交测试"
阅读 6.4k

南瓜

305 声望
18 粉丝
0 条评论

南瓜

305 声望
18 粉丝
文章目录
宣传栏