husky配置 => git 日志提交规范限制, eslint检查

1. husky 是什么

  • husky 是一个 Git Hook 工具。本文主要实现提交前 eslint 校验和 commit 信息的规范校验
  • 简单说就是,当我们运行 git commmit -m ‘xxx’ 时,用来检查 xxx 是否满足固定格式的工具
  • 使用这个工具的目的, 实现下图效果
  • 通过提交记录一目了然,我们本次提交了做了哪些操作,便于后续维护和统一规范

在这里插入图片描述

2. 安装

需要安装以下依赖

// 使用 yarn
yarn add husky lint-staged @commitlint/cli @commitlint/config-conventional --dev
// 使用 npm
npm i -D husky lint-staged @commitlint/cli @commitlint/config-conventional

3. 创建

3.1 创建.huskyrc (文件目录 package.json)
{
  "hooks": {
    "pre-commit": "lint-staged",
    "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
  }
}

如果是js文件根目录 .huskyrc.js

module.exports = {
  "hooks": {
    "pre-commit": "lint-staged",
    "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
  }
}
3.2 创建.lintstagedrc
{
  "src/**/*.js": "eslint"
}

cache 只检查已更改的文件(可加可不加) fix 可以自动修复错误 git add 是把lint后的代码重新提交到缓存区

{
   "src/**/*.js": ["eslint --cache --fix", "git add"]
}
3.3 package.json 中表现
{
  "name": "xxx",
  "version": "1.1.0",
 "husky": {
    "hooks": {
      "pre-commit": "lint-staged",
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
    }
  },
  "lint-staged": {
    "src/**/*.js": [
      "eslint --fix","git add"
    ],
    "src/**/*.vue": [
      "eslint --fix","git add"
    ],
    "src/**/*.css": [
      "stylelint --fix","git add"
    ]
  },
  "devDependencies": {
    "@commitlint/cli": "^9.1.1",
    "@commitlint/config-conventional": "^9.1.1",
    "husky": "^4.2.5",
    "lint-staged": "^10.3.0"
  }
}

3. 创建 .commitlint.js

module.exports = {
  extends: ["@commitlint/config-conventional"],
  rules: {
    "type-enum": [
      2,
      "always",
      [
        "build", // 发布版本
        "chore", // 改变构建流程、或者增加依赖库、工具等
        "ci", // 持续集成修改
        "docs", // 文档修改
        "feat", // 新增功能
        "fix",  // 修复缺陷
        "perf", // 优化相关,比如提升性能、体验
        "refactor", // 代码重构
        "revert", // 回退版本
        "style", // 样式修改
        "test", // 测试用例修改
      ],
    ],
  },
};

4. 使用

git commit -m"fix: 修复xxxx"

5. 另外的解决方案

因为每次提交lint代码,提交的时间会长一点,如果不想这样,可以自己配置一次性格式化

  • 全文件lint
    vue-cli3举例,在package.json配置如下代码
 "scripts": {
    "lint": "vue-cli-service lint"
  },

然后每次提交前执行

yarn lint 或者 npm run lint
  • 单组件
    亦或者每次写完页面lint一下,vscode安装eslint扩展
    配置json
  // eslint保存fix配置
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true,
        "source.fixAll.stylelint": true
    },

单组件 Ctrl + S 就OK了

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

懂懂kkw

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值