启用 eslint-react-hooks 会关闭所有 eslint 规则答案

【问题标题】：enabling eslint-react-hooks turns off all eslint rules启用 eslint-react-hooks 会关闭所有 eslint 规则
【发布时间】：2020-08-13 04:17:23
【问题描述】：

我正在尝试获取 eslint 的 react-hooks 规则，但它似乎不适用于我的设置（VSCode、CRA、airbnb、tslint、prettier）。

这是我的 .eslintrc.json 在它崩溃之前：

{
  "env": {
    "browser": true,
    "es6": true,
    "jest": true
  },
  "extends": ["plugin:react/recommended", "airbnb", "prettier"],
  "globals": {
    "Atomics": "readonly",
    "SharedArrayBuffer": "readonly"
  },
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 2020,
    "sourceType": "module"
  },
  "plugins": ["react", "@typescript-eslint"],
  "rules": {
    "react/jsx-filename-extension": [1, { "extensions": [".jsx", ".tsx"] }]
  }
}

这是我的devDependencies：

  "devDependencies": {
    "@testing-library/jest-dom": "^5.5.0",
    "@testing-library/react": "^10.0.3",
    "@testing-library/user-event": "^10.1.0",
    "@types/jest": "^25.2.1",
    "@types/node": "^13.13.4",
    "@types/react": "^16.9.34",
    "@types/react-dom": "^16.9.7",
    "@typescript-eslint/eslint-plugin": "^2.30.0",
    "@typescript-eslint/parser": "^2.30.0",
    "eslint": "^6.8.0",
    "eslint-config-airbnb": "^18.1.0",
    "eslint-config-prettier": "^6.11.0",
    "eslint-plugin-import": "^2.20.2",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-prettier": "^3.1.3",
    "eslint-plugin-react": "^7.19.0",
    "eslint-plugin-react-hooks": "^3.0.0",
    "prettier": "^2.0.5",
    "typescript": "~3.8.3"
  },

然后我尝试将以下内容添加到.eslintrc中的extends：

"extends": ["plugin:react/recommended", "plugin:react-hooks/recommended", "airbnb", "prettier"],

我还尝试将"plugin:react-hooks/recommended" 放在数组中的不同位置。无论我做什么，它都会破坏所有其他 lint 规则，包括它自己的规则。

我还尝试将以下内容添加到plugins 和rules：

"plugins": ["react", "react-hooks", "@typescript-eslint"],
"rules": {
  // ...
  "react-hooks/rules-of-hooks": "error",
  "react-hooks/exhaustive-deps": "warn"
}

当然还有检查 lint 规则的测试代码：

  const [a, b] = React.useState("Hey");

  React.useEffect(() => {
    React.useMemo(() => {}, []);
    if (a) b("Yeppp");
    if (props.what) console.log(props.what);
    exampleMethod();
  }, []);

  const exampleMethod = () => {};

编辑：忘了提到我也尝试在extends 中使用airbnb/hooks：

"extends": ["plugin:react/recommended", "airbnb", "airbnb/hooks", "prettier"],

【问题讨论】：

标签： eslint eslint-config-airbnb eslintrc

【解决方案1】：

我找到了解决方案，所以我正在回答我自己的问题。

eslint-plugin-react-hooks 文档说如果使用 Create React App，请确保不直接在 package.json 中添加模块。
因此，解决方案是从devDependencies 中删除eslint-plugin-react-hooks。

【讨论】：