Eslint错误导致create-react应用程序编译失败

Question

我正在使用create-react-app构建一个网站，并且刚刚安装了eslint。

由于某种原因，本应显示为esint警告的内容显示为错误，并导致npm run start失败。

如何绕过此问题并像以前一样将其显示为警告？

My.eslintrc.js

env: {
browser: true,
es6: true,
jest: true,
},
extends: [
'airbnb-typescript',
'plugin:@typescript-eslint/recommended',
'prettier/react',
'prettier/@typescript-eslint',
'plugin:prettier/recommended',
],
globals: {
Atomics: 'readonly',
SharedArrayBuffer: 'readonly',
},
parser: '@typescript-eslint/parser',
parserOptions: {
ecmaFeatures: {
jsx: true,
},
ecmaVersion: 2018,
sourceType: 'module',
project: './tsconfig.json',
},
plugins: ['react', '@typescript-eslint'],
rules: {
'class-methods-use-this': 'off',
'additional-rule': 'warn',
},
ignorePatterns: ['**/node_modules/*', '**/build/*', 'config-overrides.js'],
};

我的包.json

"name": "device-protection-renewal-web",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.11.5",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"@types/jest": "^26.0.15",
"@types/node": "^12.19.3",
"@types/react": "^16.9.55",
"@types/react-dom": "^16.9.9",
"babel-polyfill": "^6.26.0",
"core-js": "^3.6.5",
"i18next": "^19.8.3",
"react": "^17.0.1",
"react-app-polyfill": "^2.0.0",
"react-dom": "^17.0.1",
"react-i18next": "^11.7.3",
"react-scripts": "4.0.0",
"web-vitals": "^0.2.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all",
"ie >= 9"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version",
"ie >= 9"
]
},
"devDependencies": {
"@babel/plugin-transform-arrow-functions": "^7.12.1",
"@typescript-eslint/eslint-plugin": "^4.6.1",
"@typescript-eslint/parser": "^4.6.1",
"eslint": "^7.11.0",
"eslint-config-airbnb-typescript": "^9.0.0",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-import": "^2.22.0",
"eslint-plugin-jsx-a11y": "^6.3.1",
"eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-react": "^7.20.6",
"eslint-plugin-react-hooks": "^4.1.0",
"prettier": "^2.1.2",
"typescript": "^4.0.5"
}
}```

[1]: https://i.stack.imgur.com/WUKcz.png

Answer 1

我假设您已经使用npm install eslint --save-dev安装了ESLint，并定义了一个默认配置，node_modules/.bin/eslint --init在提示中回答问题。

我注意到在您的.eslintrc.js文件中，扩展选项中缺少ESLint设置

extends: [
'eslint:recommended',
'airbnb-typescript',
'plugin:@typescript-eslint/recommended',
'prettier/react',
'prettier/@typescript-eslint',
'plugin:prettier/recommended',
],

同样在package.json中，建议ESLint拥有自己的脚本，您可以使用npm run lint运行该脚本，并将其与您喜欢的代码编辑器中的esint插件结合使用：

{
"scripts": {
"start": "react-scripts start",
// ...
"lint": "eslint ."
},
}

您可能会在某个时候构建应用程序，因此应该创建一个.eslintignore文件，并在其中添加build，因为在运行命令时，默认情况下也会检查构建目录中的文件。

来源：https://fullstackopen.com/en/part3/validation_and_es_lint#lint

Answer 2

package.json中的这一部分是不必要的；由于您有一个eslint配置文件，因此应该将其移动到.eslintrc.js。

"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
}

然后会变成这样：

extends: [
'react-app',
'react-app/jest',
'airbnb-typescript',
'plugin:@typescript-eslint/recommended',
'prettier/react',
'prettier/@typescript-eslint',
'plugin:prettier/recommended'
]

然而；在eslint-config-react-app插件的最新版本(7.31.11)中，除非我从eslint-configsextends部分中删除react-app/jest，否则我会与更新前工作的项目发生jest-plugin冲突错误。

这就是我来到这里的原因，目前我正试图找出是什么导致了这种情况。

更新：所以我的问题是因为eslint-config-react-app依赖于eslint-plugin-jest^25.7.0，而我使用的是最新的eslint-plugin-jest^27.1.6。我删除了package.json的依赖项，并将使用eslint-config-react-app附带的版本，这样就不会有任何冲突，但如果我需要新插件版本的功能，可以在上面快速安装npm i -D，将eslint配置从自动更改为手动，并指定到本地node_modules版本和.eslintrc.js的路径也可以；除了与配置插件的任何冲突之外。