How is ESLint integrated into Create React App?

Question

When I run npx create-react-app ..., a bare-bone React project is being created for me. When I then peek into package.json, there seems to be some evidence of ESLint to be present, as there is this:

"eslintConfig": {
  "extends": "react-app"
},

However, whenever I install ESLint as a dev dependency and configure it -- as I usually do --, VS Code seems to pick it up. In this case, VS Code does not seem to recognize that there is any kind of linter present/configured. This is not super surprising, as ESLint is not a dependency of the React project I just generated -- at least not according to package.json. When I try to run eslint . within the project's root directory, it says "command not found".

I tried to breathe life into this ESLint configuration by expanding it, so now I have this:

"eslintConfig": {
  "extends": ["react-app", "eslint:recommended", "google"],
  "rules": {
    "semi": ["error", "always"],
    "quotes": ["error", "double"]
   }
},

This changes nothing. I manipulated the source code in a way that I know it violates the above configuration, yet, I have not been signaled any wrongdoing.

This leads me to a simple question: Do projects generated by create-react-app come with some kind of ESLint configuration, and, if so, how do I enable and extend it correctly?

As I am being referred to the number one Google hit that comes up when searching "create react app eslint" -- which I have obviously read --, let me clarify what I mean:

ESLint is obviously integrated into Create React App in a different way than it would be if it had been manually added to the project using like so. This is not only evident by the sheer number of people who post about their struggles of getting the two to work together. This is also evident as...

• ...one cannot run the eslint command in the project root.
• ...ESLint does not seem to be a dependency within package.json.
• ...VS Code doesn't pick up that there is ESLint present.
• ...there is no .eslintrc.* file in the project root.
• ...etc.

So: How do I go about ESLint in the context of Create React App? For starters: How do I run it? How do I expand it? And why does VS Code not pick it up -- even though it usually notices the presence of ESLint?

Answer 1

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).

---

Its 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”?".

Answer 2

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:

└─┬ react-scripts@4.0.3
  └── eslint@7.21.0 

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.

Answer 3

your question makes perfect sense. I found that this works:

• run ESLint in VS Code with 'npx eslint' (shows all the options) or also 'npx eslint .'
• add a script to package.json "lint": "eslint ." and then use 'npm run lint'

I did not have a problem with integrating ESLint to VS Code. After installing VS Code extension for ESLint, I automatically see the warnings/errors in VS Code under Problems.