插件“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 實際上有所幫助。