» npm install eslint-plugin-react
Videos
» npm install eslint-plugin-react-hooks
Yes, create-react-app comes with eslint config.
How do I enable and extend it correctly?
You can check how to extend it here.
{
"eslintConfig": {
"extends": ["react-app", "shared-config"],
"rules": {
"additional-rule": "warn"
},
"overrides": [
{
"files": ["**/*.ts?(x)"],
"rules": {
"additional-typescript-only-rule": "warn"
}
}
]
}
}
How do I enable it?
You need to integrate it with your IDE.
How do I run it?
After integrating it, an eslint server will be running in the background and will enable linting for your IDE (sometimes restarting IDE required).
I checked all your claims after running npx create-react-app example:
...one cannot run the eslint command in the project root.
You can:
eslint is installed as part of the project dependency, just by running eslint globally (eslint [cmd]) you need to ensure it installed globally (not recommended).
...ESLint does not seem to be a dependency within package.json.
Why should it be? That's why you using a starter like CRA. It's an inner dependency, you don't need to worry about it, that's CRA's job.
...VS Code doesn't pick up that there is ESLint present.
It does, check the OUTPUT tab and look for ESLint to see the server's output.
...there is no .eslintrc.* file in the project root.
You get the default configuration from CRA (which is hidden from you for focusing on coding). Add such file if you want to override it (you can also extend it, check the docs).
It's very useful to understand what eslint actually is and how we use it React development, check out related question "Do React hooks really have to start with “use”?".
To expand on the top comment's answer:
...ESLint does not seem to be a dependency within package.json.
Why should it be? That's why you using a starter like CRA. It's an inner dependency, you don't need to worry about it, that's CRA's job.
A project created with create-react-app will have react-scripts as a dependency.
react-scripts has eslint installed as a dependency, as seen in react-scripts package.json.
You can see if a package is installed (and where) by running npm ls <package> in your project root.
npm ls eslint shows:
└─┬ [email protected]
└── [email protected]
This shows the dependency tree that we manually investigated by looking in GitHub at react-scripts.
So - a project made with create-react-app does come with eslint. As it is a dependency, not something globally installed, then it must be ran with a npm script.
This is why running eslint . in your terminal does not work, but using
"lint": "eslint .",
then npm run lint does. (though you may with to make the command eslint --ignore-path .gitignore . due to a current bug).
Similarly, the eslint configs are installed in react-scripts, then referenced in the default project output's own package.json.