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了