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

问题描述

我尝试使用 Husky 的 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,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",

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

"prettier": "prettier '**/*.{js,tsx}' --write",

还有：

"husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },"lint-staged": {
    "src/**/*.{ts,js,jsx}": [
      "npm run prettier",

当我提交时，赫斯基仍然没有被解雇。怎么了？

更新 2： 我无法让 Husky 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 一起使用？

解决方法

通过添加以下内容使 lint-staged 与 Husky 版本 6 配合使用：

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

和：

// package.json
{
  "scripts": {
    "pre-commit": "lint-staged"
  }
}

基于此 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 <SeyyedKhandon@gmail.com>","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"
  }
}

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

配置 Husky@^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

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

eslint eslint husky lint-staged pre-commit pre-commit-hook