Me with my team, start a new React Project using the create-react-app bootstrap command. We add the eslint section on the project but we stuck with annoying error that we never found it before now. When we launch the command
yarn run lint
Here the package.json:
{
"name": "name of the app",
"version": "0.1.0",
"private": true,
"dependencies": {
"jwt-decode": "^2.2.0",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-intl": "^3.12.0",
"react-router": "^5.1.2",
"react-router-dom": "^5.1.2",
"react-scripts": "3.3.0",
"redux": "^4.0.5",
"redux-saga": "^1.1.3",
"reselect": "^4.0.0",
"styled-components": "^5.0.1"
},
"scripts": {
"analyze": "react-app-rewired build",
"build": "react-scripts build",
"cypress": "./node_modules/.bin/cypress open",
"eject": "react-scripts eject",
"lint:write": "eslint --debug src/ --fix",
"lint": "eslint --debug src/",
"prettier": "prettier --write src/*.tsx src/*.ts src/**/*.tsx src/**/*.ts src/**/**/*.tsx src/**/**/*.ts src/**/**/**/*.tsx src/**/**/**/*.ts src/**/**/**/**/*.tsx src/**/**/**/**/*.ts",
"start": "react-scripts start",
"storybook": "start-storybook -p 6006 -c .storybook",
"test": "react-scripts test",
"upgrade:check": "npm-check",
"upgrade:interactive": "npm-check --update"
},
"eslintConfig": {
"extends": "react-app"
},
"lint-staged": {
"*.(ts|tsx)": [
"yarn run prettier"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@cypress/webpack-preprocessor": "^4.1.2",
"@storybook/addon-actions": "^5.3.12",
"@storybook/addon-info": "^5.3.12",
"@storybook/addon-knobs": "^5.3.12",
"@storybook/addon-links": "^5.3.12",
"@storybook/addons": "^5.3.12",
"@storybook/preset-create-react-app": "^1.5.2",
"@storybook/react": "^5.3.12",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
"@types/jest": "^24.0.0",
"@types/jwt-decode": "^2.2.1",
"@types/node": "^12.0.0",
"@types/react": "^16.9.0",
"@types/react-dom": "^16.9.0",
"@types/react-redux": "^7.1.7",
"@types/react-router": "^5.1.4",
"@types/react-router-dom": "^5.1.3",
"@types/storybook__addon-knobs": "^5.2.1",
"@types/styled-components": "^4.4.2",
"cypress": "^4.0.1",
"eslint": "^6.8.0",
"husky": "^4.2.1",
"lint-staged": "^10.0.7",
"npm-check": "^5.9.0",
"prettier": "^1.19.1",
"react-app-rewire-webpack-bundle-analyzer": "^1.1.0",
"react-app-rewired": "^2.1.5",
"react-docgen-typescript-webpack-plugin": "^1.1.0",
"redux-devtools-extension": "^2.13.8",
"storybook-addon-jsx": "^7.1.14",
"ts-loader": "^6.2.1",
"typescript": "~3.7.2",
"webpack": "^4.41.6",
"webpack-bundle-analyzer": "^3.6.0"
}
}
We also tried to add create a.eslintrc file and add
{
"extends": "react-app"
}
But nothing change.
react-scripts
should already include ESLint and the eslint-config-react-app
ESLint config (see docs ) in your Node dependencies.
You don't need to install it separately in Create React App projects.
If ESLint is not able to find the react-app
config, there are likely conflicting or duplicate ESLint config dependencies that were installed outside of react-scripts
(ie another eslint-config-react-app
installation). You can check by using the npm ls [package]
command (ie npm ls eslint-config-react-app
).
Probably the best way to approach this is to remove those packages from package.json
to allow the configs like eslint-config-react-app
in react-scripts
to be used as intended (based on comment ) . If the problem persists after that, try removing the node_modules
folder and package-lock.json
and then reinstalling the dependencies again may work. Otherwise, upgrading to a newer npm
version may make a difference.
Your package.json
is likely missing the peer dependency eslint-config-react-app
which includes the eslint preset react-app
. You will need to follow the instructions to install it here https://www.npmjs.com/package/eslint-config-react-app .
Note: Even though this is create-react-app
which bundles it for react-scripts
, your lint
script was not able to access react-app
.
"eslintConfig": {
"extends": "react-app"
}
About .eslintrc
, you already have the config for ESLint in your package.json
so you should be safe to remove .eslintrc
.
The problem here is with the yarn
package manager. Because eslint-config-react-app
is not under the node_modules
directly and it's inside the react-scripts: node_modules\\react-scripts\\node_modules
yarn has not load that correctly (more information here )
So, currently, there are 2 options to resolve that issue:
npm
instead of yarn
.eslint-config-react-app
package in addition to the one we have inside react-scripts
.I solved this problem by using npm install
instead of yarn
.
Not sure why but I guess it's because yarn install multiple packages at a time while npm installs them one after the other. So maybe some of them are skipped or not installed properly.
从.git/hooks 中删除预提交文件解决了我的问题。
SOLVED!
I solve changing my lint script:
Old this:
"lint": "eslint --debug src/"
New to this:
"lint": "eslint --debug 'src/**/*.{js,jsx,ts,tsx}'",
我正在使用纱线,我通过重新安装 vscode 并将 eslint 降级到 7.32 解决了这个问题
If you don't use React in your project just add this in.eslintrc.js:
{
root: true,
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.