@typescript-eslint/eslint-plugin 已安装但在 vs code lint 任务中抛出错误并要求不存在的 @typescript-eslint 包

Question

使用 "react-scripts": "^4.0.3" 样板文件创建项目，并且为了在与 typescript 项目的反应中包含 eslintrc.js 文件，我已经尝试 eslint --init它创建了一个默认的eslintrc.js，下面是内容。

在全球范围内拥有 eslint v 7.32.0

eslintrc.js

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 12,
    sourceType: 'module',
  },
  plugins: ['react', '@typescript-eslint'],
  rules: {},
};

但是 vs 代码中的 es lint 任务抛出错误

(node:37609) UnhandledPromiseRejectionWarning: TypeError: Failed to load plugin '@typescript-eslint' declared in '.eslintrc.js': Class extends value undefined is not a constructor or null

package.json

"devDependencies": {
    "@types/classnames": "^2.3.1",
    "@types/react-redux": "^7.1.19",
    "@types/react-router-dom": "^5.3.1",
    "@typescript-eslint/parser": "^4.33.0",
    "eslint": "^7.32.0",
    "eslint-plugin-import": "^2.25.2",
    "typescript": "^4.4.4"
  },
 "dependencies": {
    "@types/jest": "^26.0.15",
    "@types/node": "^12.0.0",
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-redux": "^7.2.5",
    "react-router-dom": "^5.3.0",
    "react-scripts": "^4.0.3",
    "redux": "^4.1.1",
}

现在当我运行下面的命令安装丢失的包时

npm i --save-dev @typescript-eslint/eslint-plugin

它在终端中抛出错误

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: react-app@0.1.0
npm ERR! Found: @typescript-eslint/parser@4.33.0
npm ERR! node_modules/@typescript-eslint/parser
npm ERR!   dev @typescript-eslint/parser@"^4.33.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer @typescript-eslint/parser@"^5.0.0" from @typescript-eslint/eslint-plugin@5.0.0
npm ERR! node_modules/@typescript-eslint/eslint-plugin
npm ERR!   dev @typescript-eslint/eslint-plugin@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

npm ERR! A complete log of this run can be found in

所以按照建议尝试了选项

npm i --save-dev @typescript-eslint/eslint-plugin --legacy-peer-deps

它已成功安装，但版本 (5.x) 高于 @typescript-eslint/parser 版本，并且如 eslint-plugin documentation

中所述

@typescript-eslint/parser 和@typescript-eslint/eslint-plugin 使用相同的版本号很重要。

所以重新安装类似版本的包

> npm install --save-dev @typescript-eslint/eslint-plugin@4.33.0

但在 vs 代码中它仍然抛出

的错误

UnhandledPromiseRejectionWarning: TypeError: Failed to load plugin '@typescript-eslint' declared in '.eslintrc.js': Class extends value undefined is not a constructor or null

所以我尝试安装

npm install --save-dev @typescript-eslint

但它抛出错误

npm ERR! code EINVALIDTAGNAME
npm ERR! Invalid tag name "@typescript-eslint": Tags may not have any characters that encodeURIComponent encodes.

也尝试过更新 es lint 最新版本 8.0，但它会产生另一个问题。

我知道这是因为我正在尝试安装一个不存在的包，但如何解决这个问题？我在这里遗漏了什么吗？

vscode - v 1.61.1
ubuntu - v 20.04

Answer 1

在 eslint plugin naming convention 检查后，发现我必须按照以下语法安装缺少的 @typescript-eslint

npm install --save-dev @typescript-eslint/eslint-plugin

这解决了问题，但出现了新的错误，未指定反应版本，因此在“设置”键中添加。

eslintrc.js

// eslint-disable-next-line no-undef
module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 12,
    sourceType: 'module',
  },
  plugins: ['react', '@typescript-eslint'],
  rules: {
    '@typescript-eslint/no-explicit-any': 'off',
    'react/react-in-jsx-scope': 'off',
    '@typescript-eslint/explicit-module-boundary-types': 'off',
  },
  settings: {
    react: {
      version: 'latest',
    },
  },
};

package.json

"devDependencies": {
    "@types/classnames": "^2.3.1",
    "@types/react-redux": "^7.1.19",
    "@types/react-router-dom": "^5.3.1",
    "@typescript-eslint/eslint-plugin": "^4.33.0",
    "@typescript-eslint/parser": "^4.33.0",
    "eslint": "^7.32.0",
    "eslint-plugin-import": "^2.25.2",
    "redux-devtools": "^3.7.0",
    "redux-devtools-extension": "^2.13.9",
    "typescript": "^4.4.4"
  }

tsconnfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "noImplicitAny": false,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "downlevelIteration": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": ["src"]
}

@typescript-eslint/eslint-plugin 已安装但在 vs code lint 任务中抛出错误并要求不存在的 @typescript-eslint 包

@typescript-eslint/eslint-plugin installed but throw error in vs code lint task and ask for non existing @typescript-eslint package

npm

react-scripts

eslintrc

typescript-eslint