Eslint 错误导致 create-react-app 无法编译
Posted
技术标签:
【中文标题】Eslint 错误导致 create-react-app 无法编译【英文标题】:Eslint error causing create-react-app failed to compile 【发布时间】:2021-02-15 20:06:15 【问题描述】:我正在使用create-react-app
建立一个网站,并且刚刚安装了eslint
。
由于某种原因,应该显示为 eslint 警告的内容显示为错误并导致 npm run start
失败。
我怎样才能绕过这个问题,让它们像以前一样显示为警告?
我的 .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'],
;
我的 package.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
【问题讨论】:
【参考方案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
运行并在您最喜欢的代码编辑器中将其与 eslint-plugin 结合使用:
"scripts":
"start": "react-scripts start",
// ...
"lint": "eslint ."
,
您可能会在某个时候构建您的应用程序,因此您应该创建一个.eslintignore
文件并在其中添加build
,因为在运行命令时会检查构建目录中的文件。
来源:https://fullstackopen.com/en/part3/validation_and_es_lint#lint
【讨论】:
感谢您的回复,我已经完成了上述所有操作,但在运行npm run start
时仍然收到带有大量 eslint 错误的 failed to compile
我得到这样的东西:drive.google.com/file/d/15jLzUyCFOKFWK2ZqQIQlmJUteEfzIsOF/… 我觉得这很奇怪,因为我习惯将它们视为警告而不是错误
你好。我已经尝试了上述解决方案,它摆脱了错误'React' was used before it was defined
,但其余错误仍然存在。我想知道这是否与我正在使用的react-scripts
版本有关。这个 repo 使用 4.0.0
,我的另一个 repo 使用 3.4.3
和相同的 eslint 版本,并且编译得很好。
我刚刚将我的react-scripts
降级为3.4.3
,现在可以编译了。我想我现在可能会坚持使用这个版本。
遇到了类似的情况,手动安装 eslint 导致编译失败。降级到 3.4.3 成功了以上是关于Eslint 错误导致 create-react-app 无法编译的主要内容,如果未能解决你的问题,请参考以下文章