如何将 lint-stage 与 Husky 集成？

Posted 2023-02-19

【中文标题】如何将 lint-stage 与 Husky 集成？

【英文标题】：How to integrate lint-stage with Husky?

【发布时间】：2021-05-14 00:19:21

【问题描述】：

我的 package.json（缩短版）

  "scripts": 
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "tsc": "tsc",
    "type-check": "tsc --project tsconfig.json --pretty --noEmit",
    "lint": "eslint --ext js,jsx,ts,tsx --fix"
  ,
  "dependencies": 
    "@types/node": "^14.14.25",
    "@types/react": "^17.0.1",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-react-hooks": "^4.2.0",
    "next": "^10.0.6",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "typescript": "^4.1.4"
  ,  "husky": 
    "hooks": 
      "pre-commit": "lint-staged"
    
  ,
  "lint-staged": 
    "*.js,jsx,ts,tsx": "eslint --cache --fix"
  

我用 npm（不是 yarn）安装了所有东西。当我添加空文件并提交时

git commit -m "test"
[main ca9db77] test
 1 file changed, 4 insertions(+)
 create mode 100644 pages/test.tsx

没有 lint-staging，所以看不到哈士奇。 如何解决这个问题？

【参考方案1】：

你必须安装 husky 作为 DevDependencies

然后用husky install创建一个prepare脚本：

"scripts": 
    "dev": "next dev",
    "build": "cross-env NODE_ENV=production next build",
    "start": "next start",
    "lint": "eslint src --max-warnings=0",
    "typecheck": "tsc --project tsconfig.json --pretty --noEmit",
    "test": "jest",
    "test:watch": "yarn test --watch",
    "prepare": "husky install"
  

并运行一次：npm run prepare

然后，添加一个钩子： npx husky add .husky/pre-commit "npm test"

打开.husky\pre-commit

并添加npx --no-install lint-staged

您的文件应如下所示：

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

npx --no-install lint-staged

在package.json 上创建lint-staged 键，就像您所做的那样。

"lint-staged": 
    "src/**/*": [
      "yarn lint --fix",
      "tsc-files --noEmit --pretty",
      "yarn test --findRelatedTests --bail"
    ]
  ,