CRA + Eslint + Prettier

CRA (Create React App) uses eslint under the hood. How do you benefit from your favorite config avoiding doing an npm run eject ? I explain to you

Install CRA

npx create-react-app [app-name] --template typescript

Configure Prettier

• Install dependencies

npm i --save-dev prettier eslint-config-prettier eslint-plugin-prettier

• Create .prettierrc file

//.prettierrc
{
  "bracketSpacing": true,
  "printWidth": 100,
  "singleQuote": true,
  "tabWidth": 4,
  "trailingComma": "all",
  "jsxBracketSameLine": true,
  "useTabs": false,
  "arrowParens": "avoid"
  //...
}

• Configure package.json

//package.json
"eslintConfig": {
  "extends": ["react-app", "prettier"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error",
  },
  "overrides": [
    {
      "files": ["**/*.ts?(x)"],
      "rules": {
        "prettier/prettier": "error",
      }
    }
  ]
}

Be careful, the rules of error type will prevent the build.