Create-react-app: [eslint-config-react-app] Recommended way of config integration with ESLint, TypeScript, Prettier and VS Code

[bennettdams]

People use VS Code a lot. It is also recommended in the docs, but it is not explained on how to configure it together with ESLint, Prettier & TypeScript together with eslint-config-react-app.

Every two months there is a new Medium article for this topic, as the configuration/dependencies always change. Wouldn't it be nice if CRA had an official documentation on how to integrate all these with a step-by-step tutorial on the CRA website?

Describe the solution you'd like

I would like the docs to provide all the steps needed to integrate eslint-config-react-app and the additional features in their development setup.

Two major parts:

• What do I need to configure manually in the files of my CRA project? (e. g. .eslintrc.js)
  Do I need additional dependencies? How to integrate other ESLint plugins?
• What do I need to configure manually in my VS Code setup? (e. g. for the ESLint plugin (dbaeumer.vscode-eslint or the Prettier plugin)

Possible combinations that are most common:

| No. | CRA dependencies | eslint-config-react-app | Prettier | TypeScript |
|-----|-----|-------------------------|----------|------------|
| 1 | x | x | | |
| 2 | x | x | x | |
| 3 | x | x | x | x |

For ESLint and Prettier, there should be an explanation not only how to combine the configurations, but also on how to actually use the configuration in VS Code. Also, when using Prettier, you need to make sure that its rules don't conflict with ESLint rules.

The following is the configuration I'm running with right now for ESLint + TypeScript + Prettier (thanks, @robertcoopercode):

module.exports = {
  parser: "@typescript-eslint/parser",
  extends: [
    "react-app", // Uses the recommended rules Create React App
    "plugin:@typescript-eslint/recommended", // Uses the recommended rules from @typescript-eslint/eslint-plugin
    "prettier/@typescript-eslint", // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier
    "plugin:prettier/recommended" // Should be last in the list. Enables eslint-plugin-prettier and eslint-config-prettier. This will display prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
  ],
  parserOptions: {
    ecmaFeatures: {
      jsx: true // Allows for the parsing of JSX
    },
    ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
    sourceType: "module" // Allows for the use of imports
  },
  rules: {},
  settings: {
    react: {
      version: "detect" // Tells eslint-plugin-react to automatically detect the version of React to use
    }
  }
};

It's a hassle to keep all the configuration up to date and that, in my opinion, is what CRA should try to solve.

Describe alternatives you've considered

A possible alternative to requiring manual changes in the config files would be a CLI tool that automatically creates/modifies them. An explanation on how to integrate with VS Code would still be needed on the website though.

UPDATE

I decided to create a website on my own, feel free to check it out and contribute:

Website: https://eslintconfig.dev
Repo: https://github.com/bennettdams/eslintconfig.dev

[KenCoder]

This is an excellent proposal. I just spent several hours trying to get the ESLint warnings displayed in VSCode to match those reported by CRA, and failed. As bennetdams said, the problem is that there are too many suggestions, and given how much CRA hides everything is voodoo for the average user.

[lmcarreiro]

@KenCoder I just spent several hours trying to get this to work too... Are you trying to use custom eslintrc config too?

Didn't this simple eslintrc config on your workspace worked?

{
  extends: ["react-app"]
}

[KenCoder]

I tried that and it didn't work. I am not trying to use custom eslintrc although I did create that file to try to solve my problems.

My ESLint output in VSCode displays the following error over and over again, and no amount of "yarn adding" I have tried solved it, nor has various incantations of eslintrc I found, including the one you mention.

Failed to load plugin 'import' declared in 'client/package.json » eslint-config-react-app': Cannot find module 'eslint-plugin-import'

[tobiaskraus]

I also have spent hours without success in trying to make my custom .eslintrc.js (with @typescript-eslint/recomended, other plugins and own rules) work with npm run start (react-scripts start).

I added EXTEND_ESLINT=true to .env file, disabled the webpack cache in node_modules/react-scripts/config/webpack.config.js (see issue https://github.com/facebook/create-react-app/issues/9007), and removed "eslintConfig": { "extends": "react-app" }, from package.json (also tried it with it).

But there are still errors shown like @typescript-eslint/explicit-function-return-type which are not part of my config (not part of plugin:@typescript-eslint/recommended), and these errors/warnings don't show up when running my eslint src/**/*.{ts,tsx} which should use the same settings and therefore I expect the same result.

Somehow it seems, that react-scripts modifies my eslint settings (doesn't ignore them completely), as changing rules in rules array reflect in the yarn start output but there are more rules applied than the plugins / rule sets I extend from + my own rules.

[tobiaskraus]

I found my issue: webpack uses react-scripts own version of eslint plugins which was outdated and applied therefore different recommended rules (which i extended from).

In #9083 I explained this issue in details and proposed to give the option, to use own eslint plugins (or own versions).

This proves again the point of @bennettdams

I totally agree, that this whole topic is super complicated to research (so many articles and ways to implement) and many possible mistakes you can do. Therefore, a better documentation from create-react-app would help.

[Svish]

May I suggest, if this is done, to base the examples on the simpler .eslintrc.json, rather than .js with module.exports and stuff?

When I started out in "the linting world", not too long ago, not too familiar with node and old (not ES6) module stuff, examples using .js added some unnecessary noise, in my opinion.

[anthonyalayo]

Every 6 months to a year I need to search "medium eslint create react app" and some other tags to find the latest config. This would be amazing.

[bennettdams]

Hey!
We're now ~5 months in, so I decided to create a website on my own:

https://eslintconfig.dev/

It should be a place for curated collections of ESLint configurations for all the different templates (Create React App, Next.js, Vue, ...) and setups (TypeScript, Prettier, ... or combinations of those).

I would love contributions for other setups, versions or updates, so I don't have to read another Medium article again 😅

https://github.com/bennettdams/eslintconfig.dev

[tonystaark]

@bennettdams Damn the world owes u a Noble Prize..

[tonystaark]

@bennettdams your create-react-app with typescript and prettier using eslint@^7.0.0 which contradicts with the default dependecy requirement from CRA which is eslint@^6.6.0

[bennettdams]

@bennettdams your create-react-app with typescript and prettier using eslint@^7.0.0 which contradicts with the default dependecy requirement from CRA which is eslint@^6.6.0

The same config should also work for ESLint v6.6.0.
Let us use the repository for future questions to avoid spamming this CRA issue.

Btw: CRA v4 is right around the corner, which also comes with ESLint v7.