如何修复“ESLint 无法唯一确定插件“@typescript-eslint””？

Question

我正在尝试使用 React.js 和 typescript 在 ASP.NET core MVC 项目中启用 eslint linting，并且正在努力修复上述错误。

\n

我正在使用 Visual Studio 2022 社区版 17.6.3 和项目模板“ASP.NET Core with React.js”，该模板又使用 create-react-app 在 ClientApp 子文件夹中创建 React.js 应用程序项目文件夹。

\n

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

\n

\n

纱线运行 v1.22.19\n$ eslint ./src/

\n

哎呀！出了些问题！:(

\n

ESLint：8.48.0

\n

ESLint 无法唯一确定插件“@typescript-eslint”。

\n

\n
• C:\\path\\to\\MyProject\\ClientApp\\node_modules@typescript-eslint\\eslint-plugin\\dist\\index.js （在“src.eslintrc.json”中加载）
\n
• C:\\path\\to\\MyProject\\ClientApp\\node_modules\\eslint-config-react-app\\node_modules@typescript-eslint\\eslint-plugin\\dist\\index.js（加载于“ src.eslintrc.json \xc2\xbb eslint-config-react-app#overrides[0]")
\n

\n

请从任一配置中删除“插件”设置或删除任一插件安装。

\n

\n

我目前对此消息的理解是，编译器已检测到我的项目的不同部分需要不同版本的 @typescript-eslint 并且不知道要使用哪个版本（但我可能是错的，并且非常乐意予以更正）。

\n

我特别好奇如何阅读这部分错误消息：

\n

\n

（加载于“src.eslintrc.json \xc2\xbb eslint-config-react-app#overrides[0]”）

\n

\n

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

\n

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

\n

...除了该文件不包含任何此类内容。同样，我可能错误地阅读了错误消息，并且非常乐意在这一点上得到纠正。

\n

我尝试过的

\n

\n
• 确保我已使用文件系统使用的相同大小写导航到项目文件夹
\n
• 手动保存对 package.json 的更改
\n
• 跑步dedupe
\n
• 删除node_modules文件夹和package-lock.json/yarn.lock文件并重新安装所有依赖项（我意识到这是一个相当激烈的举动，并且需要永远完成）。
\n
• 使用npm和yarn尝试上述所有操作，并确保在使用npm时删除yarn.lock，并在使用yarn时删除package-lock.json。
\n

\n

我的配置

\n

包.json

\n

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

\n

.eslintrc.json

\n

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

\n

tsconfig.json

\n

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

\n

Answer 1

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

\n

\n

如果您有我们工具的多个版本，可能会导致各种错误。这是因为 ESLint 可能会根据运行方式每次运行加载不同的版本 - 导致不一致的 lint 结果。

\n

在项目的根目录中安装我们的工具并不意味着只安装一个版本。您的一个或多个依赖项可能对我们的工具有自己的依赖项，这意味着 npm/yarn 将另外安装该版本以供该包使用。例如，react-scripts（create-react-app 的一部分）依赖于我们的工具。

\n

您可以使用以下命令检查项目中安装的版本：

\n

新项目管理npm list @typescript-eslint/eslint-plugin @typescript-eslint/parser

\n

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

\n

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

\n

如果您看到安装了多个版本，那么您将必须使用纱线分辨率来强制使用单个版本，或者您将必须降级根版本以匹配依赖项版本。

\n

在这种情况下，最好的做法是等待您的依赖项发布支持我们最新版本的新版本。

\n

\n

我使用了yarn命令，它给出了以下输出

\n

yarn list v1.22.19\n\xe2\x94\x9c\xe2\x94\x80 @typescript-eslint/eslint-plugin@6.6.0\n\xe2\x94\x9c\xe2\x94\x80 @typescript-eslint/parser@6.6.0\n\xe2\x94\x94\xe2\x94\x80 eslint-config-react-app@7.0.1\n   \xe2\x94\x9c\xe2\x94\x80 @typescript-eslint/eslint-plugin@5.62.0\n   \xe2\x94\x94\xe2\x94\x80 @typescript-eslint/parser@5.62.0\n

\n

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

\n

然后我遇到了另一个错误：

\n

\n

加载格式化程序时出现问题： ...\\node_modules\\eslint\\lib\\cli-engine\\formatters\\stylish\nError: require() of ES Module ...\\node_modules\\strip-ansi不支持来自 ...\\assertion-lib\\node_modules\\eslint\\lib\\cli-engine\\formatters\\stylish.js 的 \\index.js。\n而是更改 . ..\\node_modules\\eslint\\lib\\cli-engine\\formatters\\stylish.js 到所有 CommonJS 模块中都可用的动态 import() 。

\n

\n

手动编辑 node_modules 文件夹中的某些内容听起来不太正确，但这似乎是yarn 中的一个错误。因此，我从项目中删除了yarn.lock文件，并删除了node_modules文件夹（这可能有点过头了）并运行了a npm install，现在eslint正在成功检查我的打字稿代码。

\n