插件“react”在“.eslintrc.js”和“BaseConfig”之间发生冲突

Question

\n

设置 ESLint 后，出现此错误Plugin "react" was冲突在 ".eslintrc.js" 和 "BaseConfig \xc2\xbb /frontend/node_modules/react-scripts/node_modules/eslint-config-react-app/base .js”。

\n

我的 .eslintrc.js 就像

\n

module.exports = {\n  env: {\n    browser: true,\n    es2021: true,\n  },\n  extends: [\n    \'plugin:react/recommended\',\n    \'airbnb\',\n    \'airbnb/hooks\',\n    \'plugin:@typescript-eslint/recommended\',\n    \'plugin:@typescript-eslint/recommended-requiring-type-checking\',\n    \'prettier\',\n  ],\n  parser: \'@typescript-eslint/parser\',\n  parserOptions: {\n    ecmaFeatures: {\n      jsx: true,\n    },\n    ecmaVersion: \'latest\',\n    sourceType: \'module\',\n    tsconfigRootDir: __dirname,\n    project: [\'./tsconfig.json\'],\n  },\n  plugins: [\n    \'react\',\n    \'@typescript-eslint\',\n  ],\n  ignorePatterns: [\n    ".eslintrc.js"\n  ],\n  rules: {\n    \'no-use-before-define\': "off",\n    "@typescript-eslint/no-use-before-define": "off",\n    \'import/prefer-default-export\': "off",\n    \'import/extensions\': [\n      \'error\',\n      {\n        js: \'never\',\n        jsx: \'never\',\n        ts: \'never\',\n        tsx: \'never\',\n      },\n    ],\n    \'react/jsx-filename-extension\': [\n      \'error\',\n      {\n        extensions: [\'.jsx\', \'.tsx\'],\n      },\n    ],\n    \'react/react-in-jsx-scope\': \'off\',\n    \'no-void\': [\n      \'error\',\n      {\n        allowAsStatement: true,\n      },\n    ],\n    "react/function-component-definition": [\n      2,\n      { "namedComponents": "arrow-function" }\n    ]\n  },\n  settings: {\n    \'import/resolver\': {\n      node: {\n        paths: [\'src\'],\n        extensions: [\'.js\', \'.jsx\', \'.ts\', \'.tsx\']\n      },\n    },\n  },\n};\n

\n

我所做的是

\n

\n
• npx create-react-app my-app --template typescript
\n
• 纱线运行 eslint --init
\n
• 纱线添加-D @typescript-eslint/eslint-plugin @typescript-eslint/parser
\n
• npx install-peerdeps --dev eslint-config-airbnb
\n

\n

我怎样才能消除这个错误？

\n

Answer 1

您必须在 时禁用 eslint react-scripts start。

从 v4.0.2开始react-scripts，您现在可以使用环境变量选择退出 ESLint。您可以通过将其添加到.env文件中或在 package.json 文件中为脚本添加前缀来完成此操作。

例如在.env：

DISABLE_ESLINT_PLUGIN=true

Answer 2

您可能需要在锁定文件中删除 eslint-plugin-react 的重复数据。

Answer 3

我通过以下方式解决了这个问题：如果您使用 npm，请删除 package-lock.json 文件。如果您使用yarn，请删除yarn.lock 文件。

然后删除node_module文件夹并再次安装所有依赖项。

Answer 4

我通过使用代码关闭并重新打开项目文件夹解决了该问题。路径名肯定有问题。

希望这可以帮助 ：）