![](/img/trans.png)
[英]My create-react-app is failing to compile due to ESLint error
[英]Eslint error causing create-react-app failed to compile
我正在使用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
對不起。 我不能發表評論,但我真的很想幫助你。
我假設您已經使用npm install eslint --save-dev
並使用node_modules/.bin/eslint --init
回答提示中的問題定義了默認配置。
我注意到在您的.eslintrc.js
文件中,extends 選項中缺少 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
你的package.json
這部分是不需要的; 因為你有一個 aslant 配置文件,它應該被移動到.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'
]
然而; 在此時(7.31.11)
的最新版本的eslint-config-react-app
插件中,除非我從我的項目中刪除react-app/jest
eslint 配置extends
部分。
這就是我最終來到這里的原因,目前正試圖找出造成這種情況的原因。
更新:所以我的問題是因為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
的路徑也應該有效; 除了與配置插件的任何沖突。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.