优化前端工作流：一、使用husky对commit日志校验

Posted 2023-04-23

参考技术A 在了解husky之前，我们需要先了解一下Git Hooks。Git Hooks是git提供的一些回调，在对应的git阶段，执行配置的脚本。

工作流钩子主要为以下4个，执行顺序 pre-commit > prepare-commit-msg > commit-msg > post-commit ：

husky 的原理是在 .git/hooks/ 目录下各个钩子文件中添加以下脚本，并读取package.json中的配置，放在对应的钩子中执行：

npm安装完husky后，我们通过在 package.json 中配置，使git在 commit-msg 钩子后执行 bin/check-commit-msg.js ：

bin/check-commit-msg.js 内容如下，非0值退出，Git将放弃提交：

如何使用 Husky 版本 6 进行 lint-staged 工作

【中文标题】如何使用 Husky 版本 6 进行 lint-staged 工作

【英文标题】：How do I get lint-staged working with Husky version 6

【发布时间】：2021-06-11 23:39:24

【问题描述】：

我尝试使用赫斯基的pre-commit 和lint-staged。

那些已安装：

"husky": "^5.1.3",
"lint-staged": "^10.5.4",

在 package.json 我有：

"scripts": 
    "build": "gatsby build",
    "develop": "gatsby develop",
    "format": "prettier --write \"**/*.js,jsx,ts,tsx,json,md\"",
    "start": "npm run develop",
    "serve": "gatsby serve",
    "clean": "gatsby clean",
    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1",
    "lint": "eslint --ext .js,.jsx,.ts,.tsx src --color",
    "isready": "npm run format && npm run lint && npm run build"
  ,
  "husky": 
    "hooks": 
      "pre-commit": "lint-staged",
      "pre-push": "npm test",
    
  ,
  "lint-staged": 
    "./src/*.js,jsx,ts,tsx": [
      "npm run format",
      "npm run lint",
      "git add"
    ]
  ,

如果我运行npm run lint，目前我有2 problems (1 error, 1 warning)。所以当我运行git commit 时，我不希望能够提交，对吗？但我可以继续并完成提交。

怎么了？

更新：

我把哈士奇降级为4.3.8：

"husky": "^4.3.8",
"lint-staged": "^10.5.4",

在package.json 中，我的脚本中有：

"prettier": "prettier '**/*.js,jsx,ts,tsx' --write",
"lint": "eslint --ext .js,.jsx,.ts,.tsx src --color",

还有：

"husky": 
    "hooks": 
      "pre-commit": "lint-staged"
    
  ,
  "lint-staged": 
    "src/**/*.ts,tsx,js,jsx": [
      "npm run prettier",
      "npm run lint",
      "git add"
    ]
  ,

当我进行提交时，Husky 仍然没有被解雇。怎么了？

更新 2： 我无法让赫斯基4 工作，所以我将upgraded 升级到版本6：

npm install husky@6 --save-dev \
  && npx husky-init \
  && npm exec -- github:typicode/husky-4-to-6 --remove-v4-config

现在可以正常使用了。

我唯一不能开始工作的是 lint-staged。

我添加了钩子npx husky add .husky/pre-commit "lint-staged"

然后我得到.husky/pre-commit: line 4: lint-staged: command not found？如何让 lint-staged 与 Husky 版本 6 一起使用？

【参考方案1】：

通过添加使lint-staged 与赫斯基版本 6 一起使用：

// .husky/pre-commit
npm run pre-commit

和：

// package.json

  "scripts": 
    "pre-commit": "lint-staged"
  

【讨论】：

不适合我 `"scripts": "ng": "ng", "start": "ng serve", "build": "ng build --prod --aot -- buildOptimizer --commonChunk --vendorChunk --optimization --progress"，"test"："ng test"，"lint"："ng lint"，"e2e"："ng e2e"，"pre-commit"："lint -staged" , "husky": "hooks": "commit-msg": "commitlint -E HUSKY_GIT_PARAMS", "pre-commit": "lint-staged", "post-merge": "post-npm -install" , "lint-staged": "src/**/*.ts,tsx,md": [ "tslint -p tsconfig.json -c tslint.json", "git add" ]

【参考方案2】：

基于此husky github issue，只需执行以下步骤即可使其工作（我们做到了，并且工作正常）：

npx husky-init yarn npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"' yarn add @commitlint/config-conventional @commitlint/cli --dev

.commitlintrc.json:

  "extends": ["@commitlint/config-conventional"]

.lintstagedrc:

  "src/**/*.+(js|json|ts|tsx)": [
    "eslint"
  ],
  "src/**/*.js,jsx,ts,tsx,json,css,scss,md": [
    "prettier --write"
  ]

.husky/pre-commit:

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

yarn pre-commit-lint

最后，将pre-commit-lint脚本添加到package.json：

  "name": "pwa-react-scaffold",
  "version": "0.1.0",
  "private": true,
  "author": "SeyyedMahdi Hassanpour <[e-mail]>",
  "scripts": 
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "analyze": "yarn build && source-map-explorer 'build/static/js/*.js'",
    "lint": "eslint --ignore-path .gitignore --ext .js,.ts,.tsx .",
    "check-types": "tsc",
    "prettier": "prettier --ignore-path .gitignore \"src/**/*.+(js|jsx|json|ts|tsx)\"",
    "format": "yarn prettier --write",
    "check-format": "yarn prettier --list-different",
    "validate": "npm-run-all --parallel check-types check-format lint build",
    "prepare": "husky install",
    "pre-commit-lint": "yarn check-types && yarn lint-staged"
  ,
  "dependencies": 
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "@types/jest": "^26.0.15",
    "@types/node": "^12.0.0",
    "@types/react": "^16.9.53",
    "@types/react-dom": "^16.9.8",
    "node-sass": "^5.0.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "source-map-explorer": "^2.5.2",
    "typescript": "^4.0.3",
    "web-vitals": "^0.2.4",
    "workbox-background-sync": "^5.1.3",
    "workbox-broadcast-update": "^5.1.3",
    "workbox-cacheable-response": "^5.1.3",
    "workbox-core": "^5.1.3",
    "workbox-expiration": "^5.1.3",
    "workbox-google-analytics": "^5.1.3",
    "workbox-navigation-preload": "^5.1.3",
    "workbox-precaching": "^5.1.3",
    "workbox-range-requests": "^5.1.3",
    "workbox-routing": "^5.1.3",
    "workbox-strategies": "^5.1.3",
    "workbox-streams": "^5.1.3"
  ,
  "devDependencies": 
    "@commitlint/cli": "^12.1.1",
    "@commitlint/config-conventional": "^12.1.1",
    "@typescript-eslint/eslint-plugin": "^4.22.0",
    "@typescript-eslint/parser": "^4.22.0",
    "eslint-config-prettier": "^8.2.0",
    "eslint-plugin-jest-dom": "^3.8.0",
    "eslint-plugin-testing-library": "^4.1.0",
    "eslint-plugin-unused-imports": "^1.1.1",
    "husky": "^6.0.0",
    "lint-staged": "^10.5.4",
    "npm-run-all": "^4.1.5",
    "prettier": "^2.2.1"
  

【参考方案3】：

@meez 在安装 husky@^5.1.3 版本时，Husky 在 5.0.0 之后更改了配置步骤。

配置赫斯基@^5.0.0：

    npm i husky
    npx husky install
    husky install .config/husky
    husky add .config/husky/pre-commit "npm test"

链接：https://dev.to/typicode/what-s-new-in-husky-5-32g5

或者你可以简单地降低你的哈士奇版本:)

【讨论】：

@meez 您使用的是哪个版本？确保在降级之前删除 *-lock 文件

我有同样的问题，当我按照 husky 5 设置时，我最终得到了missing script: lint-staged。知道为什么吗？ @桑迪普？

你有没有下载lint-staged包，你有没有在package.json文件中输入脚本npm test？

是的，我必须在 package.json 中添加 lint-staged 作为 npm 脚本。但最后我还需要调整配置，因为我们的 .git 文件与 package.json 不在同一级别。我花了一点时间才弄清楚。它现在正在工作。谢谢

@Erbsenkoenig 很棒：+1