ESLint: Comment coder proprement en JavaScript

Un code de qualité ne se fait pas du premier coup. C’est le cumul d’itérations et de feedback sur le code qui vont permettre d’améliorer sa fiabilité, sa stabilité, sa performance et sa lisibilité. ESLint permet d’avoir une boucle de feedback instantanée sur la qualité du code que vous venez d’écrire, vous permettant de le corriger immédiatement et vous concentrer sur de vrais problèmes.

🧑‍🎓 Vous souhaitez apprendre à utiliser NodeJS 📖 ?
Practical Node vous enseigne les bonnes pratiques NodeJS pour être opérationnel dès le premier jour !

Pourquoi utiliser ESLint?

L’intérêt d’ESLint va bien au-delà d’une simple correction syntaxique pour rendre votre code plus uniforme. C’est une véritable béquille intellectuelle pour développeurs de façon à passer plus de temps à livrer un programme fonctionnel plutôt que faire de la chasse au bug.

Identifier les bugs à l’écriture plutôt qu’au runtime

Aucun développeur n’est à l’abri d’ajouter un bug dans son code. L’effort intellectuel pour développer une application est conséquent. Il demande d’avoir à l’esprit un cheminement par lequel on veut faire transiter une information pour en ressortir un comportement donné. C’est pourquoi il n’est pas rare de se retrouver à débugger son code pendant des heures pour trouver une erreur qui peut sembler stupide.

Par exemple, combien de temps vous faut-il pour trouver le bug qu’il y a dans ce code ?

for (const i=0; i<3; i++){  console.log(i)}

Et celui-ci ?

let reader = "Rayed"if (reader = "Samy") {  console.log('Hello Samy')} else {  console.log('Hello ${reader}')}

Dans ces deux exemples, les bugs sont dus à des erreurs triviales, pourtant même des développeurs seniors peuvent les faire.

Dans le premier cas, nous avons tellement l’habitude de déclarer nos variables dans des constantes que par réflexe on peut se retrouver à déclarer notre itérateur en tant que constante. Du coup impossible d’incrémenter la variable. A vous maintenant de débugger votre code en essayant de comprendre pourquoi votre code n’entre qu’une fois dans la boucle.

Dans l’exemple suivant, l’erreur peut être due à une simple faute de frappe et d’une inattention parce qu’un collègue vous a interrompus ou que vous avez une nouvelle notification sur votre téléphone. Pourtant, JavaScript ne va pas vous alerter de votre erreur. Il va simplement toujours rentrer dans le bloc if. Vous vous en rendrez compte rapidement au lancement de votre app. Sauf si vous avez codé plusieurs dizaines de lignes dans plusieurs fichiers et qu’il vous faut quinze minutes à remonter ce nouveau code avant de retrouver cette erreur d’inattention.

Uniformiser le style à travers la codebase

ESLint sert également à uniformiser votre style syntaxique à travers votre codebase. Entre des ‘simples guillemets’ ou des « doubles guillemets », JavaScript ne fait pas la différence. Par contre ESLint va permettre de définir lequel des deux utiliser et forcer la correction à chaque fois que la règle n’est pas appliquée. Cette dictature syntaxique est surtout utile lorsque vous êtes à plusieurs à développer sur une même codebase.

En configurant votre linter, vous pourrez choisir un set de règles, puis si nécessaire, le personnaliser. Ces règles vont imposer une syntaxe, interdire l’utilisation de certaines fonctions, imposer le respect de certaines normes.

ESLint peut également vous formatter votre code comme sur l’exemple ci-dessous.

// Avant ESLintfunction sum (a, b) {  return a+b}// Après ESLintfunction sum = (a,b)=> a+b

Comment installer ESLint

Pour faire fonctionner ESLint sur votre projet, il faut que vous preniez le temps de vérifier votre version de node. Celle-ci doit être supérieure à 11.10

Saisissez ensuite la commande:

npm install eslint --save-dev

ou

yarn add -D eslint

Une fois installé sur votre projet, vous pouvez lancer la configuration du projet via la commande npx eslint --init. Votre terminal va ensuite vous poser une série de questions pour configurer ESLint en fonction de votre projet.

Configuration

Après l’installation d’ESLint sur votre projet, vous retrouverez un fichier .eslintrc à la racine de votre projet. Celui se présente au format JavaScript en commençant par un module.exports ou au format YAML. C’est dans ce fichier que se définissent vos règles de lint.

{    "extends": "eslint:recommended",    "rules": {        "semi": ["error", "always"],        "quotes": ["error", "double"]    }    }

Par défaut ESLint va étendre les règles que vous aurez choisies à l’installation. Ce sont des règles définies par Google, Airbnb ou les standards d’ESLint. Vous pouvez les surcharger ou définir des configurations avancées.

Dans cette configuration, les règles standards d’ESLint s’appliqueront. Les règles personnalisées, présentes dans l’objet rules vont signaler une erreur dans le cas où il manque un point-virgule ou si une String est déclarée en utilisant des simples guillemets au lieu de doubles.

Le fichier .eslintrc est obligatoire pour qu’ESlint puisse savoir quelles sont les règles à imposer.

env: L’Environnement

ESlint a besoin de savoir sur quel environnement doit tourner le code qu’il va analyser. Suivant qu’il s’agisse d’analyser du code destiné à tourner sur un navigateur, du code NodeJS à destination du serveur, du code de tests unitaires, les règles à suivre vont changer.

Vous pouvez définir plusieurs environnements pour un même fichier .eslintrc:

{    "env": {        "browser": true,        "node": true    }}

Les plugins

Les plugins sont des sets de règles rédigées par la communauté. Par défaut, le plugin eslint:recommended est proposée. Il existe toutefois de nombreux plugins tels que eslint-plugin-react, eslint-plugin-vue ou eslint-plugin-node. Vous trouverez ici une liste de plugins dans laquelle faire votre marché.

Les règles

En complément des règles fournies dans les plugins, ESlint permet aussi de configurer ou de surcharger des règles suivant vos besoins.

Il existe 3 niveaux de paramétrage pour chaque règle:

• « off » ou 0 permet de désactiver une règle
• « warn » ou 1 donne un avertissement
• « error » ou 2 donne une erreur bloquante, soulignée en rouge dans votre IDE

Ces règles, dont vous pourrez retrouver la liste ici, seront contrôlées dans toute votre codebase.

Il est possible qu’à certains endroits de votre code vous souhaitiez permettre une entorse à la règle qu’ESlint tente d’imposer. Ajoutez en première ligne de votre fichier le code /* eslint-disable nom-de-la-regle */ pour désactiver une règle sur tout un fichier ou /* eslint-disable-next-line */ juste au-dessus de l’endroit où vous voulez faire taire ESlint si vous souhaitez un ciblage plus précis.

En règle générale, il vaut mieux éviter au maximum de faire des exceptions pour maintenir un code source standardisé. Trop d’exceptions vont annuler les bienfaits qu’ESlint apporte.

Linter son code

Pour exécuter les vérifications d’ESLint sur votre code, il vous suffit de taper la commande eslint --ext .js. ESLint va lister l’ensemble des points à corriger dans votre code.

En complément d’ajouter ESLint sur votre projet, je vous encourage à ajouter le plug-in à votre éditeur IDE. Que ce soit pour WebStorm ou VSCode, les plugins ESLint vont vous permettre de vous alerter en temps réel si votre code présente des anomalies. Il pourra également corriger automatiquement toutes les erreurs à chaque fois que vous sauvegarderez le fichier.

Aller plus loin en combinant ESLint avec Prettier

Prettier vient en complément de ESLint et vient forcer la correction de vos erreurs suivant un set de règles. Là où ESLint de base ne fait que lister les erreurs, Prettier vient scanner votre fichier à la recherche d’erreurs de style et vient automatiquement les corriger.

Il est possible d’utiliser Prettier en complément d’ESLint à condition d’avoir configuré le même set de règles.