Comment ajouter ESLint dans un projet React

L'ajout de règles Linting à un projet React est indispensable lorsqu'il s'agit d'améliorer la qualité du code, de le rendre plus cohérent et d'éviter les bugs.

Cet article a été publié pour la première fois sur le blog MyDevPa.ge, consultez-le pour découvrir des didacticiels utiles pour les développeurs de logiciels.

Il existe un outil de peluchage JavaScript open source populaire appelé ESLint, qui est utilisé pour détecter automatiquement les modèles incorrects trouvés dans le code JavaScript.

Voici une méthode étape par étape pour ajouter des règles de peluchage aux projets React :

Installation d'ESLint

Tout d'abord, nous devons installer ESLint dans notre projet React en tant que devDependencies car nous n'en avons pas besoin en production.

Pour installer, nous utiliserons la commande ci-dessous.

npm i -D eslint

Initialiser ESLint

Ensuite, nous devrons initialiser la configuration ESLint, en ajoutant un fichier de configuration .eslintrc.json dans le dossier racine de notre projet.

Voici un exemple de configuration.

{
  "extends": [
    "eslint:recommended",
    "plugin:import/errors",
    "plugin:react/recommended",
    "plugin:jsx-a11y/recommended"
  ],
  "plugins": ["react", "import", "jsx-a11y"],
  "rules": {
    // Here we can add our custom rules.
  },
  "parserOptions": {
    "ecmaVersion": 2021,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "env": {
    "es6": true,
    "browser": true,
    "node": true
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  }
}

Dans notre .eslintrc.json ajoutez la propriété extends et plugin.

{
  "extends": [
    "eslint:recommended",
    "plugin:import/errors",
    "plugin:react/recommended",
    "plugin:jsx-a11y/recommended"
  ],
  "plugins": ["react", "import", "jsx-a11y"]
}

Comme nous avons ajouté divers plugins, nous devons d'abord les installer en tant que devDependencies en exécutant la commande ci-dessous.

npm install -D eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react

Ajout de règles

Les règles sont utilisées à des fins de configuration. Nous pouvons définir le niveau d'erreur des règles de trois manières différentes.

• off ou 0 : cela désactivera la règle.
• avertir ou 1 : cela activera la règle en guise d'avertissement.
• erreur ou 2 : cela activera la règle comme une erreur.

? Aide-mémoire JavaScript Strings pour toutes les méthodes

Ajoutons quelques règles à notre fichier de configuration, nous pouvons ajouter d'autres règles selon notre choix dans la liste de toutes les règles mentionnées ci-dessus.

"rules": {
  "react/prop-types": 0,
  "indent": ["error", 2],
  "linebreak-style": 1,
  "quotes": ["error", "double"]
}

Ajout de scripts pour le linting

Enfin, ajoutons quelques commandes dans notre propriété package.json « scripts » pour exécuter ESLint.

"scripts": {
  "lint": "eslint \"src/**/*.{js,jsx}\"",
  "lint:fix": "eslint \"src/**/*.{js,jsx}\" --fix"
}

Félicitations, maintenant si vous essayez d'exécuter l'une de ces commandes, cela devrait faire l'affaire !

Après cela, vous pouvez continuer à personnaliser les règles de peluchage à votre guise pour garantir la cohérence et la qualité du code.

Visitez MyDevPa.ge pour créer votre site Web de portfolio gratuit en une minute gratuitement !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!