I'm trying to enable eslint linting in an ASP.NET core MVC project with React.js and typescript and am really struggling to fix the above error.

我正在尝试使用React.js和TypeScrip在ASP.NET核心MVC项目中启用eslint linting，并且正在努力修复上面的错误。

I'm using Visual Studio 2022 community edition 17.6.3 and the project template "ASP.NET Core with React.js", which in turn uses create-react-app to create a React.js application in a ClientApp subfolder of the project folder.

我使用的是Visual Studio2022社区版17.6.3和项目模板“ASP.NET Core with React.js”，它使用Create-Reaction-app在项目文件夹的一个ClientApp子文件夹中创建一个React.js应用程序。

This is the error message as reported by yarn. Similar error messages have appeared at the top of my code editor tabs when editing .tsx code files, but yarn seems to report the most comprehensive message.

这是纱线报告的错误消息。在编辑.tsx代码文件时，类似的错误消息也出现在我的代码编辑器选项卡的顶部，但Snow似乎报告了最全面的消息。

yarn run v1.22.19
$ eslint ./src/

Oops! Something went wrong! :(

ESLint: 8.48.0

ESLint couldn't determine the plugin "@typescript-eslint" uniquely.

• C:\path\to\MyProject\ClientApp\node_modules@typescript-eslint\eslint-plugin\dist\index.js (loaded in "src.eslintrc.json")


• C:\path\to\MyProject\ClientApp\node_modules\eslint-config-react-app\node_modules@typescript-eslint\eslint-plugin\dist\index.js (loaded in "src.eslintrc.json » eslint-config-react-app#overrides[0]")

Please remove the "plugins" setting from either config or remove either plugin installation.

My current understanding of this message is that the compiler has detected that different parts of my project expect different versions of @typescript-eslint and doesn't know which version to use (but I could be wrong about that and am more than happy to be corrected).

我目前对这条消息的理解是，编译器检测到我的项目的不同部分需要不同版本的@tyescript-eslint，并且不知道使用哪个版本(但我可能在这一点上是错误的，并且非常高兴得到纠正)。

I am particularly curious to understand how to read this part of the error message:

我特别想了解如何阅读这部分错误消息：

(loaded in "src.eslintrc.json » eslint-config-react-app#overrides[0]")

This seems to imply that my .eslintrc.json file contains something like

这似乎意味着我的.eslintrc.json文件包含如下内容

{
    eslint-config-react-app: {
        overrides: [
            // ???
        ]
    }
}

... except that said file contains nothing of the sort. Again, I could be reading the error message incorrectly and am more than happy to be corrected on that point.

..。只是所说的文件不包含任何这类内容。再说一次，我可能错误地阅读了错误消息，并非常高兴在这一点上得到纠正。

What I've tried

• Making sure that I've navigated to the project folder using the same casing used by the filesystem


• Manually saving changes to package.json


• Running dedupe


• Deleting the node_modules folder and package-lock.json / yarn.lock file and reinstalling all dependencies (I appreciate that this is a rather drastic move and it takes forever to complete).


• Attempting all of the above using both npm and yarn, and being sure to delete yarn.lock when using npm and to delete package-lock.json when using yarn.

My configuration

package.json

{
  "name": "myapp",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "bootstrap": "^5.3.1",
    "http-proxy-middleware": "^2.0.6",
    "jquery": "^3.7.0",
    "merge": "^2.1.1",
    "oidc-client": "^1.11.5",
    "react": "^18.2.0",
    "react-bootstrap": "^2.8.0",
    "react-dom": "^18.2.0",
    "react-in-viewport": "^1.0.0-alpha.30",
    "react-router-bootstrap": "^0.26.2",
    "react-router-dom": "^6.15.0",
    "reactstrap": "^9.2.0",
    "rimraf": "^5.0.1",
    "web-vitals": "^3.4.0"
  },
  "devDependencies": {
    "@babel/eslint-parser": "^7.22.11",
    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
    "@types/jest": "^29.5.4",
    "@types/react": "^18.2.21",
    "@typescript-eslint/eslint-plugin": "^6.4.1",
    "@typescript-eslint/parser": "^6.4.1",
    "ajv": "^8.12.0",
    "cross-env": "^7.0.3",
    "eslint": "^8.48.0",
    "eslint-plugin-flowtype": "^8.0.3",
    "eslint-plugin-import": "^2.28.1",
    "eslint-plugin-jest": "^27.2.3",
    "eslint-plugin-jest-formatting": "^3.1.0",
    "eslint-plugin-jsdoc": "^46.5.0",
    "eslint-plugin-jsx-a11y": "^6.7.1",
    "eslint-plugin-react": "^7.33.2",
    "nan": "^2.17.0",
    "react-scripts": "^5.0.1",
    "typescript": "4.3.5"
  },
  "jest": {
    "coveragePathIgnorePatterns": [
      "/src/index.js",
      "/src/reportWebVitals.js",
      "/src/service-worker.js",
      "/src/serviceWorkerRegistration.js",
      "/src/setupProxy.js",
      "/src/components/",
      "/src/Models"
    ],
    "coverageReporters": [
      "json",
      "html",
      "text"
    ]
  },
  "overrides": {
    "autoprefixer": "10.4.5",
    "semver": "^7.5.2",
    "svgo": "^2.0.0"
  },
  "resolutions": {
    "css-what": "^5.0.1",
    "nth-check": "^2.0.0"
  },
  "scripts": {
    "prestart": "node aspnetcore-https && node aspnetcore-react",
    "start": "rimraf ./build && react-scripts start",
    "build": "react-scripts build",
    "test": "cross-env CI=true react-scripts test --env=jsdom",
    "watch": "cross-env CI=true react-scripts test --env=jsdom --watchAll --coverage",
    "eject": "react-scripts eject",
    "lint": "eslint ./src/"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "peerDependencies": {
    "@babel/core": "^7.11.0",
    "@babel/plugin-syntax-flow": "^7.14.5",
    "@babel/plugin-transform-react-jsx": "^7.14.9",
    "@popperjs/core": "^2.11.8"
  }
}

.eslintrc.json

{
  "parser": "@typescript-eslint/parser",
  "extends": [
    "eslint:recommended",
    "plugin:import/errors",
    "plugin:import/warnings",
    "plugin:react/recommended",
    "plugin:jsdoc/recommended",
    "react-app"
  ],
  "env": {
    "browser": true,
    "node": true,
    "mocha": true,
    "es6": true,
    "jest": true
  },
  "overrides": [
    {
      "files": [
        "**/*.test.js"
      ],
      "env": {
        "jest": true
      },
      "plugins": [
        "jest",
        "jest-formatting"
      ],
      "rules": {
        // Omitted for brevity, I can edit them back in if needed
      }
    }
  ],
  "plugins": [
    "react",
    "import",
    "jsx-a11y",
    "jest",
    "jsdoc",
    "@typescript-eslint"
  ],
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "rules": {
    // Omitted for brevity, I can edit them back in if needed
  },
  "settings": {
    "react": {
      "version": "18"
    },
    "import/resolver": {
      "node": {
        "extensions": [ ".js", ".jsx", ".ts", ".tsx" ]
      }
    }
  }
}

tsconfig.json

{
  "compilerOptions": {
    "target": "ES6",
    "lib": ["es6", "DOM"],
    "jsx": "react",
    "module": "commonjs",
    "moduleResolution": "node",
    "types": ["jest", "node", "@types/jest"],
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "skipDefaultLibCheck": true,
    "skipLibCheck": true
  }
}

Credit to Brad Zacher's answer for drawing my attention to How do I check to see what versions are installed?

Brad Zacher的回答引起了我的注意，让我注意到如何检查安装了哪些版本？

If you have multiple versions of our tooling, it can cause various bugs for you. This is because ESLint may load a different version each run depending on how you run it - leading to inconsistent lint results.

Installing our tooling in the root of your project does not mean that only one version is installed. One or more of your dependencies may have its own dependency on our tooling, meaning npm/yarn will additionally install that version for use by that package. For example, react-scripts (part of create-react-app) has a dependency on our tooling.

You can check what versions are installed in your project using the following commands:

npm npm list @typescript-eslint/eslint-plugin @typescript-eslint/parser

Yarn yarn list --pattern "@typescript-eslint/eslint-plugin|@typescript-eslint/parser"

pnpm pnpm list @typescript-eslint/eslint-plugin @typescript-eslint/parser

If you see more than one version installed, then you will have to either use yarn resolutions to force a single version, or you will have to downgrade your root versions to match the dependency versions.

The best course of action in this case is to wait until your dependency releases a new version with support for our latest versions.

I used the yarn command, which gave the following output

我使用了纱线命令，它提供了以下输出

yarn list v1.22.19
├─ @typescript-eslint/[email protected]
├─ @typescript-eslint/[email protected]
└─ [email protected]
   ├─ @typescript-eslint/[email protected]
   └─ @typescript-eslint/[email protected]

So the solution was to downgrade @typescript-eslint/eslint-plugin and @typescript-eslint/parser to version 5.62.0 in my package.json, to match the version used by eslint-config-react-app.

因此，解决方案是将我的Package.json中的@tyescript-eslint/eslint-plugin和@tyescript-eslint/parser降级到版本5.62.0，以匹配eslint-config-reaction-app使用的版本。

I then hit a different error:

然后我犯了一个不同的错误：

There was a problem loading formatter: ...\node_modules\eslint\lib\cli-engine\formatters\stylish
Error: require() of ES Module ...\node_modules\strip-ansi\index.js from ...\assertion-lib\node_modules\eslint\lib\cli-engine\formatters\stylish.js not supported.
Instead change the require of index.js in ...\node_modules\eslint\lib\cli-engine\formatters\stylish.js to a dynamic import() which is available in all CommonJS modules.

Manually editing something in the node_modules folder didn't sound right, however it seems that this is a bug in yarn. So I deleted the yarn.lock file from my project and deleted the node_modules folder (which may have been overkill) and ran a npm install and now eslint is linting my typescript code successfully.

手动编辑NODE_MODULES文件夹中的内容听起来并不正确，但这似乎是纱线中的一个错误。因此，我从我的项目中删除了ya n.lock文件，删除了node_MODULES文件夹(这可能是过度杀伤力)，并运行了一个NPM安装，现在eslint成功地编译了我的类型脚本代码。

ESLint is warning you that there are multiple versions of the plugin installed in your workspace, and that your configuration is setup so that you've asked ESLint to import these multiple versions.

ESLint警告您，您的工作区中安装了该插件的多个版本，并且您的配置已设置好，因此您已要求ESLint导入这些多个版本。

So either you'll need to change your config to avoid this, or (more likely) you'll need to use your package manager's resolutions feature to ensure there's only one version of the plugin installed.

因此，要么你需要更改你的配置来避免这种情况，要么(更有可能的)你需要使用包管理器的分辨率功能来确保只安装了一个版本的插件。

This FAQ article might help as it lists some commands and provides some more context: https://typescript-eslint.io/linting/troubleshooting/#how-do-i-check-to-see-what-versions-are-installed

这篇常见问题解答文章可能会有所帮助，因为它列出了一些命令并提供了更多上下文：https://typescript-eslint.io/linting/troubleshooting/#how-do-i-check-to-see-what-versions-are-installed