Écrire du code en y laissant plein de petites erreurs arrive à tout développeur, qu'il soit junior ou senior ! Ce n'est rien, ce sont souvent des fautes triviales dues à une erreur de frappe ou une habitude. Cependant, il est nécessaire de les corriger.

ESLint permet de nous aider dans cette démarche. Celui-ci est un linter, c'est-à-dire un outil d'analyse statique de code qui vérifie que l'on respecte quelques règles de développement. Il va uniformiser votre code syntaxiquement, par exemple, en modifiant les guillemets. JavaScript ne fait pas la différence entre les doubles et les simples guillemets, mais ESLint oui. Si vous avez l'habitude de ne pas choisir entre les deux, il s'en chargera pour vous. ?

Son utilisation est vraiment facile, tout comme sa configuration. Seulement quelques minutes suffisent, mais cela vous permettra d'avoir un "regard extérieur" sur votre code.

ESLint s'installe avec NPM, ce qui permet de l'installer en local ou global.

Installation

Je préfère une installation locale, ce qui me permet d'avoir la configuration que je veux par projet.

npm install eslint --save-dev
# ou
yarn add -D eslint

Une fois l'outil installé, utilisez la commande suivante pour le configurer grâce à une série de questions :

npx eslint --init

Prenez le temps de répondre aux questions sans vous précipiter ! Si ESLint a besoin de paquets supplémentaires, il les installera.

Configuration

Un fichier nommé .eslintrc à la racine de votre projet contient la configuration d'ESLint. Sans celui-ci, ESLint ne fonctionnera pas.

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

}

Dans cette configuration, les règles standard 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 de simples guillemets au lieu de doubles.

Le fichier a aussi besoin de connaitre l'environnement dans lequel votre code tournera. Pour cela, il faut ajouter l'objet env comme dans l'exemple ci-dessous :

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

J'ai ajouté l'option browser pour les variables globales du navigateur ou encore es2021 pour respecter les standards d'ECMAScript 2021, soit la version 12.

Il existe plein d'autres options que vous pouvez retrouver sur la documentation officielle d'ESLint.

Les règles

Il est tout à fait possible d'éditer les règles d'ESLint en ajoutant l'objet rules au fichier de configuration.

Vous pourriez, par exemple, demander à ignorer les console.log et que les expressions régulières invalides doivent être signalés simplement en "warning" :

{
    "extends": "eslint:recommended",
    "rules": {
        "semi": ["error", "always"],
        "quotes": ["error", "double"]
    },
    "env": {
        "browser": true,
        "es2021": true
    },
    "rules": {
        "no-console": "off",
        "no-invalid-regexp": "warn"
    }
}

Pour chaque règle, vous avez trois valeurs possibles : off, warn et error.
Le nombre de règles n'étant pas limitée, vous en ajouter autant que vous le souhaitez.

Vous trouverez toutes les règles configurables sur la documentation officielle.

Vérifier son code

Maintenant que tout est installé et configuré, il ne reste plus qu'à l'utiliser ! Dans votre terminal de commande, tapez la commande suivante :

eslint --ext .js

Vous pouvez demander à ESLint de fixer les problèmes en ajoutant le drapeau --fix :

eslint --fix --ext .js

Si la commande ne vous plaît pas, il est possible de la lancer avec NPM en configurant celui-ci. Dans le fichier package.json, ajouter la ligne suivante dans l'objet scripts :

"scripts": {
    "lint" : "eslint --fix --ext .js"
}

Vous pouvez exécuter ESLint avec la commande suivante :

npm run lint

La bonne pratique veut que l'on lint notre code avant chaque push important !

ESLint vérifiera tous vos JavaScript et listera les erreurs rencontrées.

Plugins

Le mieux est d'installer un plugin sur votre IDE de façon à linter automatiquement votre code via la configuration d'ESLint. ?

L'effet sera de souligner l'erreur directement dans le code avec l'explication au lieu de lister les erreurs dans la console.

ESLint sous VSCode : https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
ESLint sous PHPStorm : https://www.jetbrains.com/help/phpstorm/eslint.html

N'oubliez pas de passer par la documentation afin d'en apprendre plus sur la configuration.