husky控制线上代码质量

husky、lint-staged、commitlint 配合控制线上代码质量

依赖介绍

• husky : git 命令触发钩子 github.com/typicode/hu…

• lint-staged : 在 git 暂缓文件中，运行 lint 检查 github.com/okonet/lint…

• commitlint : 检查 git commit 命令提交信息规范性检 github.com/conventiona…

安装使用

1.安装 husky 添加 git commit-msg 、 pre-commit 钩子

# 安装 Husky
npm install husky --save-dev
# or
yarn add husky --dev

# 激活 git 钩子
npx husky install
# or
yarn husky install

# 添加两个钩子
npx husky add .husky/commit-msg 'npx --no -- commitlint --edit "$1"'
npx husky add .husky/pre-commit 'npx lint-staged'

# 如果上面命令不好用 可以尝试下面的方法
npx husky add .husky/commit-msg "npx --no -- commitlint --edit '$1'"
# or
npx husky add .husky/commit-msg "npx --no -- commitlint --edit $1"
# or
yarn husky add .husky/commit-msg 'yarn commitlint --edit $1'

运行 npx husky install 命令，会在根目录下生成一个.husky 目录。

运行 npx husky add .husky/commit-msg 'npx --no -- commitlint --edit "$1"' 此命令， 会在 .husky 目录下创建 ./husky/commit-msg 文件。

npx husky add .husky/pre-commit 'npx lint-staged' 同理。

2.安装 commitlint 配置 commit 规则

# Install commitlint cli and conventional config
npm install --save-dev @commitlint/{config-conventional,cli}

# For Windows:
npm install --save-dev @commitlint/config-conventional @commitlint/cli

# Configure commitlint to use conventional config
echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js

3.package.json文件 配置 lint-staged 规则

{
  "devDependencies": {
+   "@commitlint/cli": "^16.1.0",
+   "@commitlint/config-conventional": "^16.0.0",
    "@typescript-eslint/eslint-plugin": "^5.10.1",
    "@typescript-eslint/parser": "^5.10.1",
    "@vue/eslint-config-prettier": "^7.0.0",
    "@vue/eslint-config-typescript": "^10.0.0",
    "eslint": "^8.7.0",
    "eslint-plugin-html": "^6.2.0",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-vue": "^8.3.0",
+   "husky": "^7.0.4",
+   "lint-staged": "^12.3.3",
    "prettier": "^2.5.1",
    "typescript": "^4.5.5",
    "vue-eslint-parser": "^8.2.0"
  },
+ "lint-staged": {
+   "*.{ts,tsx,vue,js,jsx}": [
+     "eslint --cache --fix",
+     "git add"
+   ]
+ }
}