CRA + Eslint + Prettier

CRA (Create React App) utilise eslint sous le capot, mais à moins de faire un npm run eject pour modifier sa config, comment fait-on pour pouvoir bénéficier de notre config favorite ? Je vous explique

Installer CRA

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

Configurer Prettier

• Installer les dépendances

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

• Créer le fichier .prettierrc

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

• Configurer package.json

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

Attention, les règles de type error empêcheront le build.