Eslint & React

Nous avons besoin d'expliquer à ESlint comment reconnaître React pour qu'il ne nous déclare plus d'erreurs. Pour ce faire, nous avons besoin de quelques dépendances.

npm install -D eslint-plugin-import@2.27.5 eslint-plugin-jsx-a11y@6.7.1 eslint-plugin-react@7.32.2

Mettre à jour le fichier .eslintrc.json :

{
  "extends": [
    "eslint:recommended",
    "plugin:import/errors",
    "plugin:react/recommended",
    "plugin:jsx-a11y/recommended",
    "prettier"
  ],
  "rules": {
    "react/prop-types": 0,
    "react/react-in-jsx-scope": 0
  },
  "plugins": ["react", "import", "jsx-a11y"],
  "parserOptions": {
    "ecmaVersion": 2022,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "env": {
    "es6": true,
    "browser": true,
    "node": true
  },
  "settings": {
    "react": {
      "version": "detect"
    },
    "import/resolver": {
      "node": {
        "extensions": [".js", ".jsx"]
      }
    }
  }
}

Cette configuration particulière vous aide à mettre en avant les erreurs les plus courantes.

• Le plugin import aide à identifier la plupart des erreurs autour des imports, export et des modules en général.

• Le plugin jsx-a11y aide à identifier les bugs autour de l'accessibilité (par exemple, lorsqu'on oublie un l'attribut alt avec le tag 'img' html).

• Le plugin react , c'est pour les erreurs récurrentes de react.

• Avec eslint-plugin-react , il faut à présent spécifier la version de react. Ce que nous faisons dans settings.react.version = "detect" pour lui dire de regarder dans package.json.

• "react/react-in-jsx-scope": 0 permet d'éviter d'avoir une erreur si on ne spécifie pas import react.

• "react/prop-types": 0 permet d'ajouter des types aux propriétés des différents composants. Si vous souhaitez faire cela, vaudrait mieux préférer typescript.

• "import/resolver".node.extension = [".js", ".jsx"] , pour dire à Eslint de surveiller les imports et export de js et jsx pour nous.

Accéder au fichier du projet pour cette étape

Sélectionner un fichier