Git — husky + eslint 实现提交前校验与规范提交

node版本： = 14.21.3 || >16.0.0

一、配置ESlint

1.1 安装eslint

npm install eslint -D

1.2 初始化eslint，生成配置文件

npx eslint --init

1.3 在编辑器安装ESlint插件

1.4 通过执行命令检测文件代码规范

# ./src 为需要检测的文件路径
npx eslint ./src

二、配置husky

2.1 安装husky

yarn add husky -D

2.2 在 package.json 中加入prepare脚本，每次在 npm i 安装完依赖后都会执行这个命令

"scripts": {
	// prepare脚本会在npm install之后自动执行，它是npm的一个生命周期脚本
	"prepare": "husky install"
}

2.3 添加 pre-commit 钩子

执行完成会在.husky目录下生成一个pre-commit文件
通过 husky 监测 pre-commit 钩子，在该钩子下执行 npx eslint ./src 指令来去进行相关eslint检测

npx husky add .husky/pre-commit "npx eslint ./src"

运行完之后会在 .husky 文件下新增 pre-commit 文件
若 pre-commit 文件生成失败，可手动添加

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx eslint ./src

2.4 提交时自动修复格式lint-staged

lint-staged 可以让你当前的代码检查 只检查本次修改更新的代码，并在出现错误的时候，自动修复并且推送。
安装lint-staged 如果在生成项目eslint时，我们选择的是Lint and fix on commit，则不需要单独安装，cli已经帮我们安装过了。

yarn add lint-staged -D

修改package.json配置

"husky": {
  "hooks": {
    "commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
    "pre-commit": "lint-staged"
  }
},
"lint-staged": {
  "src/**/*.{js,vue}": [
    "eslint --fix",
    "git add"
  ]
}

修改 .husky/pre-commit 文件

...
# npx eslint ./src
npx lint-staged

三、规范提交信息

3.1 局部安装commitizen

commitizen可帮助规范提交信息

# 新版不需要额外安装cz-conventional-changelog,安装commitizen时会自动安装在node_modules里面
yarn add commitizen --dev

3.2 修改 package.json配置

"config":{
    "commitizen":{
        "path":"node_modules/cz-conventional-changelog"
    }
}

此时可以用 yarn cz 代替 git commit 提交

3.3 安装插件commitlint

上面完成后。主动用yarn cz 提交是没有问题的，但是如果用git commit提交就可以绕过规则，所以要拦截git commit

yarn add @commitlint/cli @commitlint/config-conventional -D

3.4 添加 commitlint.config.js 配置文件

module.exports = {
  extends: ["@commitlint/config-conventional"],
  // 定义规则类型
  rules: {
    // type 类型定义，表示 git 提交的 type 必须在以下类型范围内
    'type-enum': [
      // 当前验证的错误级别，2代表错误级别的错误
      2,
      // 在什么情况下进行验证，always表示任何情况下都进行验证
      'always',
      // 泛型内容, 对应cz-config定义的types
      [
        'feat', // 新功能 feature
        'fix', // 修复 bug
        'docs', // 文档注释
        'style', // 代码格式(不影响代码运行的变动)
        'refactor', // 重构(既不增加新功能，也不是修复bug)
        'perf', // 性能优化
        'test', // 增加测试
        'chore', // 构建过程或辅助工具的变动
        'revert', // 回退
        'build' // 打包
      ]
    ],
    // subject 大小写不做校验
    'subject-case': [0]
  }
};

3.5 新增 commit-msg 钩子

npx husky add .husky/commit-msg  "npx --no -- commitlint --edit ${1}"

运行完之后会在 .husky 文件下新增 commit-msg 文件
此时可以 使用 yarn cz 按照提示步骤来 或者 用 git commit 按照标准写注释才能提交

四、所有插件对应的版本如下

"devDependencies": {
  "@commitlint/cli": "^17.6.7",
  "@commitlint/config-conventional": "^17.6.7",
  "commitizen": "^4.3.0",
  "eslint": "^8.49.0",
  "husky": "^8.0.3",
  "lint-staged": "13.1.4"
}

package.json

{
  "name": "vue-app",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
    "format": "prettier --write src/",
    "prepare": "husky install"
  },
  "dependencies": {
    "@vueuse/core": "^10.5.0",
    "pinia": "^2.1.6",
    "vue": "^3.3.4",
    "vue-router": "^4.2.4"
  },
  "devDependencies": {
    "@commitlint/cli": "^17.6.7",
    "@commitlint/config-conventional": "^17.6.7",
    "@rushstack/eslint-patch": "^1.3.3",
    "@vitejs/plugin-vue": "^4.3.4",
    "@vue/eslint-config-prettier": "^8.0.0",
    "commitizen": "^4.3.0",
    "eslint": "^8.49.0",
    "eslint-plugin-vue": "^9.17.0",
    "husky": "^8.0.3",
    "lint-staged": "13.1.4",
    "prettier": "^3.0.3",
    "vite": "^4.4.9"
  },
  "config": {
    "commitizen": {
      "path": "./node_modules/cz-conventional-changelog"
    }
  },
  "husky": {
    "hooks": {
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,jsx,vue,ts,tsx}": [
      "eslint --fix",
      "git add"
    ]
  }
}