Repository: create-react-app
Issue: [eslint-config-react-app] Recommended way of config integration with ESLint, TypeScript, Prettier and VS Code
Labels: issue: proposal,needs triage

<!--
  Provide a clear and concise description of what the problem is.
  For example, "I'm always frustrated when..."
-->

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

<!--
  Provide a clear and concise description of what you want to happen.
-->

I would like the [docs](https://create-react-app.dev/docs/setting-up-your-editor) 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):

```javascript
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

<!--
  Let us know about other solutions you've tried or researched.
-->

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](https://github.com/facebook/create-react-app/issues/8849#issuecomment-683471144), feel free to check it out and contribute:

Website: [https://eslintconfig.dev](https://eslintconfig.dev)
Repo: [https://github.com/bennettdams/eslintconfig.dev](https://github.com/bennettdams/eslintconfig.dev)