Maîtrisez React

Découvrez React et son écosystème, quel que soit votre niveau.

Améliorez votre code avec ESLint et Prettier

October 22, 2018

Tout développeur, JavaScript ou autre, a ses préférences en matière de formatage du code et de bonnes pratiques. Sur des projets personnels on est libre d’appliquer ce que l’on souhaite, et en entreprise ou sur un projet à plusieurs, ces bonnes pratiques sont généralement documentées pour l’équipe.

I’m not hiring him, he uses spaces not tabs
Et vous ? Tabulations ou espaces ?

Mais une chose est sûre quel que soit le projet : appliquer ces bonnes pratiques (que ce soit du formatage ou non) fait parfois perdre du temps si l’on est pas équipé des bons outils.

Dans cet article je présenterai deux outils très utilisés sur des projets JavaScript, et souvent conjointement : Prettier pour ne plus se soucier de la mise en forme du code, et ESLint pour les bonnes pratiques.

J’ai mis en place un petit projet Git que vous pouvez cloner si vous le souhaitez pour initier vos projets, ou juste si vous souhaitez avoir une vue globale des fichiers de configuration.

Laisser Prettier gérer le formatage du code

Espaces ou tabulations ? Point-virgule à la fin des lignes ? Simple ou double quote ? Les questions que l’on se pose quant au formatage sont nombreuses, mais chaque développeur a souvent des préférences bien ancrées. Prettier de formater automatiquement votre code en fonction de vos préférences, à la sauvegarde d’un fichier ou au commit par exemple.

Pour utiliser Prettier deux options s’offrent à nous :

  • l’installer via NPM ou Yarn pour l’utiliser en ligne de commande ou faire en sorte qu’il soit exécuté automatiquement au commit ;
  • l’installer en tant qu’extension dans votre IDE, pour formater automatiquement un fichier, manuellement ou à l’enregistrement.

Pour ma part j’aime mettre en place les deux en même temps, la première pour le confort d’avoir mon code formaté au fur et à mesure que je l’écris, la seconde pour le cas où je modifierais un fichier sans passer par mon IDE par exemple.

Formatage automatique au commit

Pour installer Prettier dans un projet, il suffit de l’installer par Yarn ou NPM :

$ yarn add --dev prettier
# ou :
$ npm install --save-dev prettier

Si vous souhaitez ensuite formater le code à chaque commit, vous pouvez utiliser le paquet Husky, qui permet de déclencher une commande via NPM à chaque commit Git, ainsi que lint-staged, permettant de ne lancer une commande que sur les fichiers modifiés et non sur tout le projet :

yarn add  --dev husky lint-staged
# ou :
$ npm install --save-dev husky lint-staged

Vous pouvez ensuite mettre à jour votre package.json pour y ajouter la configuration nécessaire :

{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.js": ["prettier --write", "git add"]
  }
}

Installation dans l’IDE

Prettier vous fera aussi gagner du temps si vous l’exécutez dans votre IDE à chaque sauvegarde d’un fichier. En effet, lorsque j’imbrique des fonctions dans des objets dans des tableaux etc., parfois je ne m’y retrouve plus. Une sauvegarde et hop, mon code est formaté et bien indenté, ce qui peut éviter quelques erreurs.

Pour ma part j’utilise VSCode qui propose un plugin pour Prettier, mais il en existe très sûrement un pour votre IDE ou éditeur favori.

Sur VSCode pour lancer automatiquement Prettier à l’enregistrement, pensez à activer l’option Editor: Format On Save dans les préférences.

Configuration des règles

La configuration par défaut de Prettier conviendra probablement à beaucoup de projets, mais il y a fort à parier qu’au moins un réglage par défaut vous embêtera. Vous pouvez configurer certaines règles en créant un fichier .prettierrc à la racine de votre projet, et celui-ci sera pris en compte en ligne de commande comme par le plugin de votre IDE.

Les options disponibles sont listées sur le site de Prettier ; personnellement je définis les options suivantes :

{
  "semi": false,
  "singleQuote": true
}

La première définit que je ne souhaite pas de points-virgules à la fin des lignes, la seconde que je préfère les simple quotes aux doubles. Question de préférences personnelles :)

Éviter les erreurs avec ESLint

Prettier permet d’imposer des pratiques en terme de forme, là où ESLint vérifiera plutôt le fond (il peut également vérifier la forme, mais Prettier est plus performant à ce niveau). En effet ESLint pourra vous signaler qu’une variable n’est pas utilisée, qu’une fonction est dépréciée, ou encore qu’une règle que vous avez fixée quant à l’ordre des imports dans un fichier n’est pas respectée.

Bref, ESLint vous permet de vérifier beaucoup de choses, certaines nativement, d’autres par l’intermédiaire de plugins. Des plugins vont par exemple être consacrés à React, en implémentant des bonnes pratiques stipulées dans la documentation de React.

Configuration des règles

La configuration d’ESLint dans un projet n’est cependant pas aussi triviale que celle de Prettier. Voici par exemple comment mettre en place la configuration que j’utilise pour mes applications React.

Avant d’installer ESLint, voyons la configuration (dans le fichier .eslintrc.json) :

{
  "parser": "babel-eslint",
  "extends": ["eslint:recommended", "plugin:react/recommended"],
  "rules": {
    "react/display-name": 0,
    "react/prop-types": 0
  },
  "env": {
    "browser": true
  },
  "settings": {
    "react": {
      "version": "16.0"
    }
  }
}

Tout d’abord on signale à ESLint que l’on souhaite utiliser le parser babel-eslint, afin de gérer convenablement les nouveautés de JavaScript (ES2015, ES2016…). Vous avez ensuite la possibilité de définir une à une les règles que vous souhaitez utiliser, mais le plus simple est de vous baser sur des presets. Le plus classique est eslint:recommended, et pour React spécifiquement on peut utiliser en plus plugin:react/recommended.

Comme on le voit ici vous pouvez ensuite surcharger les règles en fonction de vos choix ; je désactive pour ma part les règles react/display-name et react/prop-types. Encore une fois, question de choix 😉.

La directive env vous permet de définir dans quels environnements votre code sera exécuté. Par exemple, browser fera en sorte que les variables globales document ou window ne déclenchent pas d’avertissement lorsque ESLint sera exécuté. Si vous utilisez Jest ou Node, d’autres environnements pourront être ajoutés.

Enfin settings permet de définir certains paramètres pour des plugins spécifiques ; ici nous indiquons au plugin react que la version de React utilisée est la 16.

Installation et lancement au pre-commit

Bien, notre configuration est prête, installons les dépendances nécessaires pour pouvoir l’utiliser :

$ yarn add --dev babel-eslint eslint eslint-plugin-react

De la même manière que Prettier, il est possible d’utiliser ESLint en ligne de commande, dans un hook pre-commit, ou à l’aide d’un plugin dans votre IDE.

Pour lancer automatiquement ESLint à chaque commit sur les fichier modifiés (et bloquer le commit en cas de problème), on peut réutiliser Husky et lint-staged, en ajoutant la bonne commande dans le package.json :

"lint-staged": {
  "src/**/*.js": [
    "prettier --write",
    "git add",
    "eslint --max-warnings 0"
  ]
},

Ainsi il ne sera pas possible de commiter du code sans passer la vérification ESLint. Ou en tout cas pas sans faire exprès… (On peut faire un git commit --no-verify ... pour outrepasser le pre-commit.…)

Plugin pour l’IDE

Enfin comme pour Prettier, il sera appréciable qu’ESLint soit lancé automatiquement dans l’IDE afin de voir rapidement les erreurs signalées sans attendre le commit. Et encore une fois tous les grands IDE et éditeurs disposent de leur plugin, et notamment VSCode.


J’espère vous avoir donné envie d’essayer Prettier et ESLint si vous ne les utilisez pas déjà. Comme vous avez pu le voir, leur mise en place ne présente rien de bien complexe, mais une fois qu’on y est habitué on a vraiment du mal à s’en passer. Je ne supporterais plus de devoir formater ou réindenter du code à la main, pas plus que ne supporterais de voir qu’une variable que j’ai déclarée n’est pas utilisée et qu’aucun outil ne me l’a signalé !

N’hésitez pas à partager en commentaire comment vous utilisez Prettier ou ESLint, ou les deux, ou aucun des deux.