ESLint: comment coder proprement en JavaScript

Rayed Benbrahim

Publié le 28 avril 2020

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.

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.

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 ESLint
function sum (a, b) {
  return a+b
}

// Après ESLint
function 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.

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 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é.

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.

Derniers articles

Avoir des tests automatisés permet à une application d'être plus durable et résistante aux évolutions. Entre les tests unitaires, tests fonctionnels ou tests end-to-end, comment prioriser son temps de dev?

L'agent de développeur vous accompagne et vous informe tout au long de votre carrière pour vous aider à atteindre vos objectifs. Découvrez pourquoi faire appel à un agent

En tant que développeur backend, vous serez attendu sur plusieurs problématiques qui ne sont pas abordées lors des tutos ou des formations. Découvrez les points à travailler pour devenir un bon développeur backend.

Après un an de loyaux services, j'ai décidé de migrer de Wordpress vers une stack NextJS. Découvrez les enjeux d'une telle migration.

Pour devenir développeur employable après une reconversion, il va falloir continuer à travailler sur votre montée en compétences et assurer une veille techno active afin d'arriver au niveau nécessaire pour décrocher votre premier CDI. Découvrez comment prioriser les différentes notions tech pour monter en compétences efficacement

En tant que développeur spécialiste du data scraping, je suis régulièrement sollicité par des personnes ou des entreprises souhaitant automatiser certains processus. Le tutoriel d’aujourd’hui reprend l’un de ces projets, réalisé pour une startup qui cherchait à effectuer une veille automatisée via un bot Instagram.