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

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

[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

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