Practical Programming
eslint node

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.

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.

Prévenir certains bugs

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 ?

ESLint dans une boucle for comprenant un bug
Toujours pas trouvé le bug dans ce code ?

Toujours pas trouvé ?

Et celui-ci ?

Code JavaScript cachant une erreur relevée par ESLint

Dans ces deux exemples, les bugs sont dûs à 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 interrompu 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 minute à 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 ‘simple 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.

Au delà du choix de guillemets, ESLint peut également vous formatter votre code comme sur l’exemple ci-dessous.

fonction javascript formatée par ESLint

ESLint sur votre projet NodeJS

Installation

Pour faire fonctionner ESLint sur votre projet NodeJS, 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 eslint --dev

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.

Par défaut ESLint va étendre les règles que vous aurez choisi à 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.

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 plugin à 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.

Follow us

Don't be shy, get in touch. We love meeting interesting people and making new friends.

Most popular

Most discussed