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

Question

设置 ESLint 后，出现此错误Plugin "react" was conflicted between ".eslintrc.js" and "BaseConfig » /frontend/node_modules/react-scripts/node_modules/eslint-config-react-app/base.js" .

my.eslintrc.js 就像

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

我所做的是

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

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

Answer 1

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

Answer 2

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

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

例如在.env中：

DISABLE_ESLINT_PLUGIN=true

Answer 3

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

希望这可以帮助：）

Answer 4

我以这种方式解决了这个问题：如果您使用的是 npm，请删除 package-lock.json 文件。 如果您使用纱线，请删除 yarn.lock 文件。

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

Answer 5

yarn remove eslint-config-react-app yarn add eslint-config-react-app@6

纱线运行 eslint --initc
//Reinicia la configuracion de eslist y permite que //automaticamente coloque los paquetes q falten

//quita los errores automaticamente con . y --修复

npx eslint 。 - 使固定

Answer 6

也去过那里，很难找到这个问题的确切答案。

目前最好的解决方案是删除eslintrc.json 。

Answer 7

我遇到了同样的错误。 在尝试了我在 inte.net 上找到的所有解决方案后，删除 eslintrc.js 实际上有所帮助。