I'm working on a React application and I would like to have a linter set up so that I can see all the warning/errors in the console.
The docs doesn't say much: https://create-react-app.dev/docs/setting-up-your-editor/
I have added EXTEND_ESLINT=true
in my .env.dev
file and I have created a .eslintrc.json
file as well, with the following content (taken from the docs):
{
"eslintConfig": {
"extends": ["react-app", "shared-config"],
"rules": {
"additional-rule": "warn"
},
"overrides": [
{
"files": ["**/*.ts?(x)"],
"rules": {
"additional-typescript-only-rule": "warn"
}
}
]
}
}
Every rule I try to add won't do anything, I still see no warnings in the console and on top of that if I try to run the linter from the command line:
npx eslint ./src
I get the following error:
ESLint configuration in .eslintrc.json is invalid:
- Unexpected top-level property "eslintConfig".
What am I missing?
You can either create a .eslintrc.js
file inside your src
folder, with this syntax:
module.exports = {
extends: ["react-app", "shared-config"],
rules: {
"additional-rule": "warn"
},
overrides: [
{
"files": ["**/*.ts?(x)"],
"rules": {
"additional-typescript-only-rule": "warn"
}
}
]
}
Or add this to your package.json
(not a .eslintrc.json file):
"eslintConfig": {
"extends": ["react-app", "shared-config"],
"rules": {
"additional-rule": "warn"
},
"overrides": [
{
"files": ["**/*.ts?(x)"],
"rules": {
"additional-typescript-only-rule": "warn"
}
}
]
}
您可以简单地在 package.json 中添加插件规则和配置,而无需创建 .eslintrc.json 和 env 变量
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.