Optimisation de l’Éditeur de Code avec ESLint et Prettier en React Native

9 min de lecture

1. Introduction à ESLint et Prettier2. Installation et configuration de base3. Règles et standards de codage4. Automatisation et scripts5. Travailler avec des équipes6. Résolution de problèmes courants7. Améliorations futures et plugins

1. Introduction à ESLint et Prettier

1.1. Qu'est-ce qu'ESLint?

ESLint est un linter pour JavaScript conçu pour repérer et rapporter les motifs de code qui peuvent causer des problèmes, sans effectuer de suppositions quant à la manière dont le code doit être réparé. Les motifs ESLint sont accompagnés d'explications pour aider à comprendre et corriger le problème. Intégré à la plupart des IDEs modernes, il fournit une rétroaction instantanée, vous permettant de voir où les problèmes se posent et de les résoudre en temps réel.

Voici un exemple simple d'une règle ESLint pour s'assurer que toutes vos variables sont utilisées:

1/* eslint no-unused-vars: "error" */
2var x = 10;

Si x n'est pas utilisé ailleurs dans le code, ESLint renverra une erreur.

1.2. La mission de Prettier

Prettier est un formateur de code qui prend en charge plusieurs langages et s'intègre avec la plupart des éditeurs de texte. La principale raison d'utiliser Prettier est d'enlever toute préoccupation concernant la mise en forme du code. Vous écrivez le code comme vous le souhaitez, puis Prettier le reformate de manière cohérente.

Prenons cet exemple de code non formaté:

1function greet(person) {
2  return "Hello, " + person + "!";
3}

Après avoir été traité par Prettier, il ressemblera à ceci:

1function greet(person) {
2  return "Hello, " + person + "!";
3}

1.3. Pourquoi utiliser ces outils en React Native?

Dans un environnement de développement React Native, où le code change rapidement et où de nombreux développeurs peuvent collaborer sur le même projet, il est crucial d'avoir une base de code cohérente et exempte d'erreurs. C'est là qu'interviennent ESLint et Prettier.

Avec ESLint, vous pouvez définir des règles pour éviter les erreurs courantes et garantir que tout le monde suive les mêmes standards. Un article de AirBnB sur leurs normes de codage JavaScript montre l'importance de suivre des lignes directrices communes.

Pendant ce temps, Prettier garantit que le code a une mise en forme uniforme, quelle que soit la manière dont différents développeurs écrivent leur code. Cela améliore la lisibilité et assure que les révisions du code se concentrent sur la logique plutôt que sur les préférences stylistiques.

L'utilisation combinée de ces outils peut grandement améliorer la qualité du code, réduire les erreurs et accélérer le processus de développement.

2. Installation et configuration de base

2.1. Installation d'ESLint

Pour installer ESLint, il est recommandé de l'ajouter comme une dépendance de développement à votre projet React Native. Ceci peut être fait facilement avec npm ou yarn :

1npm install eslint --save-dev

ou

1yarn add eslint --dev

Après l'installation, vous pouvez initialiser la configuration d'ESLint en exécutant la commande suivante :

1npx eslint --init

Cette commande vous guidera à travers une série de questions pour aider à générer un fichier .eslintrc adapté à votre projet.

2.2. Configuration initiale de Prettier

Prettier est également simple à installer. Tout comme ESLint, ajoutez-le comme une dépendance de développement :

1npm install prettier --save-dev

ou

1yarn add prettier --dev

Une fois Prettier installé, créez un fichier .prettierrc à la racine de votre projet pour configurer Prettier selon vos besoins. Un exemple basique de configuration pourrait ressembler à :

1{
2  "singleQuote": true,
3  "trailingComma": "all",
4  "printWidth": 80
5}

Ce fichier indique à Prettier d'utiliser des guillemets simples, d'ajouter une virgule finale où c'est possible, et de limiter chaque ligne à 80 caractères.

2.3. Intégration avec l'éditeur de code

Pour que votre expérience de développement soit fluide, il est idéal d'intégrer ESLint et Prettier directement dans votre éditeur de code. La plupart des éditeurs modernes, comme VSCode, Atom, ou Sublime Text, ont des extensions disponibles pour ces outils.

Pour VSCode, par exemple:

  1. Installez les extensions ESLint et Prettier depuis le Marketplace.
  2. Dans les paramètres de VSCode, assurez-vous d'activer l'option "Format On Save" pour que Prettier formate automatiquement votre code à chaque enregistrement.

En combinant la puissance de ces outils avec votre éditeur de code, vous pouvez être sûr que votre code sera toujours propre, formaté de manière cohérente, et exempt d'erreurs courantes.

3. Règles et standards de codage

3.1. Comprendre les règles ESLint

ESLint est conçu pour identifier et signaler les schémas trouvés dans le code ECMAScript/JavaScript, en les rendant non conformes à certaines règles, qui sont entièrement personnalisables.

Chaque règle dans ESLint a trois composantes essentielles :

  1. Nom: Le nom de la règle. Par exemple, "no-unused-vars" est une règle qui signale les variables qui ont été déclarées mais qui ne sont jamais utilisées.
  2. Sévérité: Chaque règle peut avoir une sévérité de 0 (désactivée), 1 (avertissement) ou 2 (erreur). Cette sévérité détermine comment ESLint traite les violations de cette règle.
  3. Options: Certaines règles ont des options supplémentaires pour les personnaliser.

Exemple de configuration dans .eslintrc :

1{
2  "rules": {
3    "no-unused-vars": ["error", { "vars": "all", "args": "after-used" }],
4    "eqeqeq": "warn"
5  }
6}

Dans cet exemple, la règle "no-unused-vars" est configurée comme une erreur et a des options supplémentaires. La règle "eqeqeq" est définie comme un avertissement.

3.2. Configuration personnalisée avec Prettier

Prettier est moins axé sur les "erreurs" dans le code, et se concentre davantage sur la fourniture d'un formatage cohérent. Bien que sa philosophie soit d'offrir moins d'options pour éviter les débats sur le style, il offre tout de même certaines configurations personnalisables.

Voici quelques options courantes dans .prettierrc:

1{
2  "printWidth": 100, // Largeur maximale de la ligne
3  "tabWidth": 4, // Nombre d'espaces par indentation
4  "useTabs": false, // Utiliser des espaces plutôt que des tabs
5  "semi": false, // Ne pas utiliser de points-virgules
6  "singleQuote": true // Utiliser des guillemets simples plutôt que doubles
7}

3.3. Ensembles de règles populaires

Il existe plusieurs ensembles de règles populaires que les développeurs adoptent pour éviter d'avoir à configurer manuellement chaque règle. Ces configurations sont souvent le fruit de bonnes pratiques reconnues dans l'industrie.

  • Airbnb: eslint-config-airbnb est l'un des ensembles de règles ESLint les plus populaires. Il est strict et impose des bonnes pratiques reconnues.
  • StandardJS: eslint-config-standard est une autre configuration populaire axée sur la simplicité et la cohérence.
  • Prettier: Prettier lui-même fournit eslint-config-prettier pour désactiver toutes les règles ESLint incompatibles avec le formatage Prettier.

Pour adopter l'une de ces configurations, il suffit de l'installer via npm ou yarn et de l'ajouter à votre configuration ESLint. Par exemple, pour Airbnb :

1npm install eslint-config-airbnb --save-dev

Puis dans .eslintrc :

1{
2  "extends": "airbnb"
3}

4. Automatisation et scripts

4.1. Exécution automatique au commit

Pour garantir la qualité du code, il est essentiel de vérifier et de formater votre code avant chaque commit. Husky est un outil populaire qui facilite la création de hooks Git pour automatiser ce processus.

  1. Installation de Husky :
1npm install husky --save-dev
  1. Configuration du hook "pre-commit" :

Dans votre package.json, vous pouvez ajouter le hook suivant :

1{
2  "husky": {
3    "hooks": {
4      "pre-commit": "eslint src/ && prettier --check src/"
5    }
6  }
7}

Ainsi, avant chaque commit, ESLint vérifiera votre code source, et Prettier s'assurera que votre code est correctement formaté.

4.2. Intégration avec les CI/CD

La mise en place d'une intégration et d'une livraison continues (CI/CD) nécessite l'automatisation de la vérification de la qualité du code. Heureusement, la plupart des outils CI, comme Jenkins ou CircleCI, peuvent être configurés pour exécuter ESLint et Prettier à chaque pull request ou à chaque fusion.

Pour cela, votre fichier de configuration CI pourrait ressembler à ceci :

1pipeline:
2  - step:
3      name: "Linting et formatage"
4      script:
5        - npm run lint
6        - npm run format:check

Où lint et format:check sont des scripts définis dans votre package.json.

4.3. Résolution des conflits entre ESLint et Prettier

Il est possible que certaines règles d'ESLint entrent en conflit avec le formatage de Prettier. Pour éviter cela, il est recommandé d'utiliser le plugin eslint-config-prettier qui désactive toutes les règles ESLint qui pourraient entrer en conflit avec Prettier.

  1. Installation :
1npm install eslint-config-prettier --save-dev
  1. Ajout à votre configuration ESLint :
1{
2  "extends": ["your-existing-config", "prettier"]
3}

Ceci garantira que Prettier fonctionne harmonieusement avec ESLint, en évitant les potentiels désaccords de style de code.

5. Travailler avec des équipes

5.1. Partager les configurations

L'un des principaux avantages de l'utilisation d'ESLint et Prettier est la capacité de garantir une cohérence stylistique et de qualité du code à travers toute l'équipe. Pour ce faire, il est essentiel de partager les configurations.

  1. Utiliser des fichiers de configuration : Les configurations pour ESLint (eslintrc.js ou .eslintrc.json) et Prettier (.prettierrc) doivent être placées à la racine de votre projet. Ceci permet à chaque membre de l'équipe d'utiliser les mêmes règles.

  2. Stockage sur un dépôt git : En stockant ces fichiers de configuration sur votre dépôt git, chaque pull ou clone garantit que les règles sont suivies. De plus, GitHub et gitlab offrent des intégrations pour faciliter cette tâche.

  3. Utiliser des packages partagés : Pour les grandes équipes ou les organisations avec plusieurs projets, il est judicieux de créer un package de configuration ESLint ou Prettier partagé, et de le distribuer via npm ou yarn.

5.2. Former les membres de l'équipe

La mise en place de nouveaux outils nécessite une formation pour s'assurer que tous les membres de l'équipe sont à l'aise avec eux.

  • Ateliers et sessions de formation : Organisez des séances pour présenter ESLint et Prettier, montrer comment les utiliser, et discuter des avantages de leur application.
  • Documentation : Fournissez une documentation interne, idéalement hébergée sur un wiki d'entreprise ou sur des plateformes comme Confluence. Assurez-vous qu'elle soit constamment mise à jour.
  • Support continu : Encouragez une culture où les questions sont les bienvenues. Designez des "champions" ou des experts dans l'équipe qui peuvent aider les autres à résoudre les problèmes liés à ces outils.

📷 Image d'une session de formation en entreprise sur l'utilisation d'ESLint et Prettier.

5.3. Rétroactions et révisions de code

Les outils d'analyse de code et de formatage sont précieux, mais la révision humaine reste indispensable.

  1. Automatiser les retours : Avec des intégrations telles que GitHub Actions ou GitLab CI/CD, ESLint et Prettier peuvent automatiquement commenter les pull requests avec des problèmes de code détectés.

  2. Promouvoir des revues de code régulières : Encouragez les pairs à revoir le code les uns des autres, à discuter des solutions alternatives, et à collaborer pour améliorer la qualité du code.

  3. Intégrer les retours dans le processus de développement : En intégrant les retours d'ESLint et Prettier directement dans votre environnement de développement, comme VSCode ou WebStorm, les développeurs peuvent résoudre les problèmes en temps réel, avant même de soumettre leur code.

6. Résolution de problèmes courants

6.1. Conflits courants et comment les résoudre

Même avec les meilleurs outils, des conflits peuvent surgir. Pour ESLint et Prettier, voici quelques-uns des problèmes courants :

  • Conflits de règles : Il est possible que certaines règles de ESLint entrent en conflit avec le formatage de Prettier. Pour éviter cela, vous pouvez utiliser le plugin eslint-config-prettier qui désactive toutes les règles ESLint qui sont inutiles ou qui peuvent entrer en conflit avec Prettier.

  • Problèmes de version : Assurez-vous que tous les membres de votre équipe utilisent les mêmes versions d'ESLint, Prettier et des plugins associés pour éviter les incohérences.

  • Intégration IDE : Certains éditeurs peuvent nécessiter des configurations spécifiques pour travailler correctement avec ESLint et Prettier.

1// Pour résoudre les conflits de règles dans ESLint
2module.exports = {
3  extends: ["prettier"],
4  plugins: ["prettier"],
5  rules: {
6    "prettier/prettier": "error",
7  },
8};

6.2. Optimisation des performances de l'éditeur

Lorsque vous utilisez ESLint et Prettier sur de grands projets, il peut y avoir un impact sur les performances de votre éditeur. Voici quelques astuces pour maintenir une expérience fluide :

  • Utilisez l'option --cache avec ESLint : Cela permet à ESLint de n'examiner que les fichiers modifiés depuis le dernier passage.

  • Exclure les dossiers inutiles : Configurez ESLint et Prettier pour ignorer certains dossiers volumineux ou inutiles, tels que node_modules ou les dossiers de build.

  • Optimisez votre configuration d'éditeur : Assurez-vous que les extensions ou plugins de votre éditeur sont bien configurés. Par exemple, pour VSCode, vous pouvez utiliser l'extension ESLint pour une meilleure intégration.

6.3. Dépannage avec des bases de code volumineuses

Sur des projets de grande envergure, le dépannage peut devenir délicat. Quelques conseils pour naviguer dans ces situations :

  • Utilisez des outils de visualisation : Des outils comme eslint-plugin-import peuvent aider à visualiser les dépendances et les structures de votre code.

  • Fractionnez votre configuration : Pour de grands projets, il peut être utile de diviser votre configuration ESLint et Prettier en plusieurs fichiers pour une gestion plus facile.

7. Améliorations futures et plugins

7.1. Extensions et plugins populaires

Le monde du développement évolue rapidement, et avec lui, la gamme d'extensions et de plugins disponibles pour optimiser votre expérience avec ESLint et Prettier. Voici quelques extensions et plugins incontournables :

  • eslint-plugin-react : Ce plugin fournit des règles spécifiques à React pour améliorer la qualité et la conformité de votre code React.

  • prettier-plugin-organize-imports : Permet d'organiser automatiquement les imports dans vos fichiers pour un code plus propre. Disponible sur GitHub.

  • eslint-plugin-import : Un plugin pour aider avec l'importation/exportation et la résolution des chemins.

1// Exemple d'utilisation de eslint-plugin-react
2module.exports = {
3  plugins: ["react"],
4  rules: {
5    "react/jsx-uses-react": "error",
6    "react/jsx-uses-vars": "error",
7  },
8};

7.2. Évolutions attendues d'ESLint et Prettier

Le développement actif d'ESLint et Prettier signifie que de nouvelles fonctionnalités et améliorations sont constamment en cours. Pour rester informé des dernières mises à jour :

  • Suivez les dépôts officiels : Gardez un œil sur les dépôts GitHub d'ESLint et Prettier pour connaître les dernières releases et les discussions en cours.

  • Participez aux communautés : Rejoindre des forums de discussions ou des groupes Slack dédiés peut vous donner un aperçu des futures tendances et des problèmes courants rencontrés par la communauté.

7.3. Garder les outils à jour

Comme pour tout outil de développement, il est essentiel de garder ESLint et Prettier à jour pour bénéficier des dernières améliorations, corrections de bugs et nouvelles fonctionnalités.

  • Utilisez des gestionnaires de paquets : Avec des outils comme npm ou yarn, la mise à jour est aussi simple que npm update eslint prettier.

  • Surveillez les changements de configuration : À chaque mise à jour majeure, des modifications peuvent être apportées aux configurations par défaut ou aux règles. Assurez-vous de consulter les notes de version et de mettre à jour vos configurations en conséquence.

  • Testez après la mise à jour : Avant de déployer une mise à jour, testez toujours votre code pour vous assurer qu'il n'y a pas de régressions ou de conflits introduits par les nouvelles versions.

4.9 (25 notes)

Cet article vous a été utile ? Notez le