[英]@typescript-eslint/eslint-plugin installed but throw error in vs code lint task and ask for non existing @typescript-eslint package
create project with "react-scripts": "^4.0.3"
boilerplate and in order to include eslintrc.js file in the react with typescript project,I have tried eslint --init
and it creates a default eslintrc.js and below is the content.使用
"react-scripts": "^4.0.3"
样板创建项目,为了在与typescript项目的反应中包含eslintrc.js文件,我尝试了eslint --init
并且它创建了一个默认的eslintrc.js和以下是内容。
having eslint v 7.32.0 in global在全球拥有 eslint v 7.32.0
eslintrc.js 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: {},
};
but es lint task in vs code was throwing error但是 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
(节点:37609)UnhandledPromiseRejectionWarning:TypeError:无法加载在“.eslintrc.js”中声明的插件“@typescript-eslint”:未定义的类扩展值不是构造函数或为空
package.json包.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",
}
now when I run below command to install the missing package现在当我运行下面的命令来安装丢失的包时
npm i --save-dev @typescript-eslint/eslint-plugin
npm i --save-dev @typescript-eslint/eslint-plugin
it throws error in terminal它在终端中引发错误
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
So as per suggestion tried with option因此,根据建议尝试使用选项
npm i --save-dev @typescript-eslint/eslint-plugin --legacy-peer-deps
npm i --save-dev @typescript-eslint/eslint-plugin --legacy-peer-deps
it was installed successfully but with higher version (5.x) than the @typescript-eslint/parser
version and as per mentioned on the eslint-plugin documentation它已成功安装,但版本(5.x)高于
@typescript-eslint/parser
版本,并且如eslint-plugin 文档中所述
It is important that you use the same version number for @typescript-eslint/parser and @typescript-eslint/eslint-plugin. @typescript-eslint/parser 和 @typescript-eslint/eslint-plugin 使用相同的版本号很重要。
so re install package of similar version所以重新安装类似版本的包
> npm install --save-dev @typescript-eslint/eslint-plugin@4.33.0
but in vs code it still throw error of但在 vs 代码中它仍然抛出错误
UnhandledPromiseRejectionWarning: TypeError: Failed to load plugin '@typescript-eslint' declared in '.eslintrc.js': Class extends value undefined is not a constructor or null
UnhandledPromiseRejectionWarning:TypeError:无法加载在“.eslintrc.js”中声明的插件“@typescript-eslint”:未定义的类扩展值不是构造函数或空值
so I have tried to install所以我尝试安装
npm install --save-dev @typescript-eslint
npm install --save-dev @typescript-eslint
but it throw error但它抛出错误
npm ERR! code EINVALIDTAGNAME
npm ERR! Invalid tag name "@typescript-eslint": Tags may not have any characters that encodeURIComponent encodes.
also tried by updating es lint latest version 8.0 but it creates another problem.还尝试通过更新 es lint 最新版本 8.0 但它产生了另一个问题。
I know that this is because I am trying to install a package which does not exist but how to solve this?我知道这是因为我试图安装一个不存在的包,但如何解决这个问题? am I missing something here.
我在这里错过了什么吗?
after checking at eslint plugin naming convention , found out that I have to install the missing @typescript-eslint as following syntax检查eslint 插件命名约定后,发现我必须按照以下语法安装缺少的@typescript-eslint
npm install --save-dev @typescript-eslint/eslint-plugin
npm install --save-dev @typescript-eslint/eslint-plugin
this solved the issue but new error coming that react version is not specified , so added that in "settings" key.这解决了问题,但未指定反应版本的新错误即将出现,因此在“设置”键中添加了该错误。
eslintrc.js 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包.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 tsconfig.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"]
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.