在開發中運行反應項目時，我在 eslint 配置和基本配置之間遇到沖突錯誤

Question

我正在嘗試在開發中運行一個反應項目，但出現以下錯誤：

Plugin "react" was conflicted between "../.eslintrc.json" and "BaseConfig » /home/crudengr/Documents/projects/***/***/web-app/node_modules/eslint-config-react-app/base.js".

上述錯誤不允許頁面加載。 我注意到，每當我保存任何 js 文件時，我都會收到此錯誤，但每當我保存在 package.json 文件中時，錯誤就會消失並且頁面加載成功。

.eslintrc.json文件

{
  "parserOptions": {
      "ecmaVersion": 8,
      "requireConfigFile": false,
      "ecmaFeatures": {
          "experimentalObjectRestSpread": true,
          "jsx": true,
          "spread": true
      },
      "sourceType": "module",
      "babelOptions": {
          "presets": ["@babel/preset-react"]
       }
  },
  "env": {
      "browser": true,
      "node": true,
      "jquery": true,
      "es6": true,
      "jest": true
  },
  "plugins": [
      "react",
      "jsx-a11y"
  ],
  "extends": [
      "eslint:recommended",
      "plugin:react/recommended",
      "plugin:prettier/recommended",
      "prettier"
  ],
  "globals": {
      "describe" :true,
      "context" :true,
      "before" :true,
      "beforeEach" :true,
      "after" :true,
      "afterEach" :true,
      "it" :true,
      "expect" :true,
      "workbox" :true,
      "importScripts" :true
  },
  "parser": "@babel/eslint-parser",
  "rules": {
      "no-fallthrough": "error",
      "no-unreachable": "error",
      "no-cond-assign": "error",
      "valid-typeof": "error",
      "no-func-assign": "error",
      "no-extra-semi": "error",
      "linebreak-style": [
          "error",
          "UNIX"
      ],
      "no-unused-vars": "error",
      "no-console": "off",
      "no-undef": "error",
      "no-empty": "error",
      "no-case-declarations": "error",
      "no-mixed-spaces-and-tabs": "error",
      "no-useless-escape": "error",
      "prettier/prettier": "error",
      "react/jsx-no-undef": "error",
      "react/jsx-no-bind": [
          "error",
          {
              "allowArrowFunctions": true,
              "allowBind": false,
              "ignoreRefs": false
          }
      ],
      "react/no-children-prop": "error",
      "react/no-deprecated": "error",
      "react/boolean-prop-naming": "error",
      "react/no-is-mounted": "error",
      "react/no-find-dom-node": "error",
      "react/no-did-update-set-state": "error",
      "react/no-unknown-property": "error",
      "react/no-unused-prop-types": "error",
      "react/jsx-no-duplicate-props": "error",
      "react/no-unused-state": "error",
      "react/jsx-uses-vars": "error",
      "react/prop-types": "error",
      "react/react-in-jsx-scope": "error",
      "react/no-string-refs": "error",
      "jsx-a11y/href-no-hash": [
          0
      ],
      "react/no-unescaped-entities": "error",
      "react/display-name": "error",
      "react/jsx-pascal-case": "error",
      "array-callback-return": "error",
      "no-loop-func": "error",
      "jsx-a11y/anchor-is-valid": "error",
      "prefer-const": [
          "error",
          {
              "destructuring": "any",
              "ignoreReadBeforeAssign": false
          }
      ],
      "no-var": "error"
  },
  "settings": {
      "react": {
          "version": "16.5"
      }
  }
}

/node_modules/eslint-config-react-app/base.js文件

'use strict';
module.exports = {
  root: true,

  parser: '@babel/eslint-parser',

  plugins: ['react'],

  env: {
    browser: true,
    commonjs: true,
    es6: true,
    jest: true,
    node: true,
  },

  parserOptions: {
    sourceType: 'module',
    requireConfigFile: false,
    babelOptions: {
      presets: [require.resolve('babel-preset-react-app/prod')],
    },
  },

  settings: {
    react: {
      version: 'detect',
    },
  },

  rules: {
    'react/jsx-uses-vars': 'warn',
    'react/jsx-uses-react': 'warn',
  },
};

在我的 package json 文件中：

"devDependencies": {
    "@babel/eslint-parser": "^7.16.5",
    "@babel/plugin-transform-react-jsx": "^7.16.7",
    "@babel/preset-react": "^7.16.7",
    "babel-jest": "^27.4.5",
    "dotenv-webpack": "^7.0.3",
    "eslint": "^8.6.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-jsx-a11y": "^6.5.1",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-react": "^7.28.0",
    "jest": "^27.4.5",
    "ts-jest": "^27.1.2"
  }

節點版本：17 npm 版本：8 操作系統類型：Ubuntu Linux

對上述錯誤的任何修復將不勝感激。 謝謝。

Answer 1

將您的文件夾“文檔”重命名為“文檔”。

Answer 2

因為 create-react-app 正在引入 react eslint 插件，所以在 package.json 配置中不需要它。 嘗試刪除它。

Answer 3

保持所有目錄的名稱（包括您的 react-app 目錄）全部小寫。 希望它能解決你的問題。