Eslint Tutoriel : Comment Configurer pour un Code Propre

Votre code JavaScript est un peu le bazar ? Vous passez trop de temps à chasser des bugs simples comme une variable mal déclarée ? Vous travaillez en équipe et chacun code à sa manière, ce qui rend la relecture compliquée ?

ESLint est l’outil qu’il vous faut. C’est un linter : il analyse votre code en temps réel et vous signale les erreurs de syntaxe ou les entorses aux bonnes pratiques. Ce tutoriel vous montre comment installer et configurer ESLint pas à pas pour obtenir un code propre, cohérent et avec moins de bugs.

Prérequis et Installation Rapide d’ESLint

Avant de commencer, vous avez juste besoin de deux choses sur votre machine. Si vous les avez déjà, vous pouvez passer directement aux commandes d’installation.

• Node.js doit être installé. ESLint demande une version récente (généralement `^20.19.0`, `^22.13.0`, ou `>=24`). Vous pouvez trouver la dernière version de Node.js sur le site officiel.
• Un fichier package.json à la racine de votre projet. Si vous n’en avez pas, ouvrez un terminal dans votre dossier et tapez la commande npm init -y pour en créer un rapidement.

C’est tout. Maintenant, on peut installer ESLint. Le plus simple est d’utiliser l’assistant de configuration. Il va vous poser quelques questions sur votre projet (quel framework vous utilisez, si c’est pour le navigateur ou Node, etc.) et créer le fichier de configuration pour vous.

Choisissez la commande qui correspond à votre gestionnaire de paquets :

npm init @eslint/config@latest

yarn create @eslint/config

pnpm create @eslint/config@latest

Suivez les questions. L’assistant va ensuite installer les dépendances nécessaires (comme eslint) en utilisant npm install ou yarn add avec l’option --save-dev, car c’est un outil de développement.

Comprendre le fichier de configuration `.eslintrc.js`

Une fois l’assistant terminé, vous verrez un nouveau fichier dans votre projet : .eslintrc.js (ou .json, .yaml selon votre choix). C’est le cerveau d’ESLint. C’est ici que vous définissez toutes les règles pour votre projet.

Un fichier de configuration de base contient plusieurs sections importantes :

• env: Indique à ESLint où votre code va tourner. Par exemple, browser: true lui dit de reconnaître les variables globales du navigateur comme window ou document.
• extends: Permet d’utiliser des configurations prêtes à l’emploi. "eslint:recommended" est une base solide qui active les règles les plus importantes pour éviter les bugs courants.
• parserOptions: Configure comment ESLint doit analyser votre code. ecmaVersion: 'latest' permet d’utiliser la syntaxe JavaScript la plus récente.
• plugins: Ce sont des extensions qui ajoutent des règles spécifiques. Par exemple, si vous développez avec React, vous utiliserez un plugin React pour vérifier les bonnes pratiques du framework.
• rules: Le cœur de la personnalisation. C’est ici que vous pouvez affiner, désactiver ou modifier chaque règle pour qu’elle corresponde aux besoins de votre projet.

module.exports = {
  // Définit les environnements. Ici, le code est pour le navigateur et utilise ES2021.
  env: {
    browser: true,
    es2021: true,
    node: true, // Reconnaît les variables de l'environnement Node.js
  },
  // On part de la configuration recommandée par ESLint.
  extends: 'eslint:recommended',
  parserOptions: {
    ecmaVersion: 'latest', // Utilise la dernière version de JavaScript
    sourceType: 'module', // Permet d'utiliser les modules (import/export)
  },
  // Ici, on personnalise les règles.
  rules: {
    // Force l'utilisation de points-virgules à la fin des lignes.
    // "error" signifie que ce sera une erreur bloquante.
    'semi': ['error', 'always'],
    // Force l'utilisation de guillemets simples pour les chaînes de caractères.
    // "warn" signifie que ce sera un simple avertissement.
    'quotes': ['warn', 'single'],
    // Empêche les variables déclarées mais jamais utilisées.
    'no-unused-vars': 'warn',
  },
};

Lancer ESLint et corriger les erreurs

Maintenant que tout est configuré, vous pouvez analyser votre code. Pour vérifier un fichier spécifique, utilisez la commande npx eslint suivie du nom du fichier.

npx eslint mon-fichier.js

Pour analyser tout votre projet (tous les fichiers .js), vous pouvez utiliser un point.

npx eslint .

Le plus intéressant est la correction automatique. ESLint peut corriger lui-même beaucoup de problèmes simples (comme les points-virgules manquants ou le mauvais type de guillemets). Pour ça, il suffit d’ajouter l’option --fix.

npx eslint . --fix

Ajouter des scripts dans package.json

Pour vous simplifier la vie, ajoutez ces commandes comme scripts dans votre fichier package.json. Ça vous évite de les retaper à chaque fois.

{
  "scripts": {
    "lint": "eslint .",
    "lint:fix": "eslint . --fix"
  }
}

Maintenant, vous pouvez simplement lancer npm run lint pour vérifier le code, et npm run lint:fix pour le corriger.

Aller plus loin : Personnaliser les règles et utiliser des plugins

La force d’ESLint réside dans sa flexibilité. La configuration de base est un bon point de départ, mais vous voudrez sûrement l’adapter à vos besoins.

Modifier ou désactiver une règle

Dans la section rules de votre fichier de configuration, vous pouvez modifier n’importe quelle règle. Chaque règle peut avoir trois niveaux :

• "off" (ou 0) : La règle est complètement désactivée.
• "warn" (ou 1) : ESLint affichera un avertissement qui n’empêchera pas le code de fonctionner. C’est utile pour les règles de style.
• "error" (ou 2) : ESLint affichera une erreur. C’est obligatoire pour les problèmes qui peuvent causer des bugs.

Par exemple, si la règle des points-virgules obligatoires vous ennuie, vous pouvez simplement la désactiver :

'rules': {
  'semi': 'off'
}

Ajouter un plugin (exemple avec React)

Si vous utilisez un framework comme React, Vue ou Svelte, vous devriez installer un plugin ESLint correspondant. Ces plugins contiennent des règles spécifiques au framework pour éviter les erreurs courantes.

Par exemple, pour un projet React, vous installeriez le plugin avec npm install eslint-plugin-react --save-dev. Ensuite, vous l’activeriez dans votre fichier .eslintrc.js.

module.exports = {
  // ... autres configurations
  extends: [
    'eslint:recommended',
    'plugin:react/recommended' // Ajoute les règles recommandées pour React
  ],
  plugins: [
    'react' // Déclare le plugin
  ],
  // ...
};

Intégrer ESLint à votre éditeur (VS Code)

Lancer des commandes, c’est bien, mais voir les erreurs directement pendant que vous écrivez, c’est mieux. C’est là que l’intégration à votre éditeur de code change tout.

Si vous utilisez VS Code, installez l’extension officielle ESLint (développée par Microsoft). Une fois installée, elle détectera automatiquement votre fichier de configuration .eslintrc.js.

Les avantages sont immédiats :

• Les erreurs sont soulignées en rouge ou en jaune en temps réel, directement dans votre code.
• Vous pouvez passer votre souris sur une erreur pour voir l’explication de la règle ESLint.
• Vous pouvez configurer l’extension pour corriger automatiquement les problèmes à chaque sauvegarde de fichier. C’est un gain de productivité énorme.

FAQ – Questions fréquentes sur ESLint

Quelle est la différence entre ESLint et Prettier ?

C’est une question très courante. ESLint et Prettier ne font pas la même chose, mais ils sont très complémentaires.

• ESLint analyse la qualité du code : Il cherche les bugs potentiels (variables non utilisées, code inatteignable) et s’assure que vous suivez les bonnes pratiques.
• Prettier s’occupe du formatage du code : Il se fiche de la qualité, son seul but est que le code soit formaté de manière cohérente (espaces, retours à la ligne, virgules, etc.).

Le mieux est d’utiliser les deux ensemble. ESLint s’occupe des bugs, et Prettier s’occupe du style.

Comment ignorer des fichiers ou dossiers ?

Parfois, vous ne voulez pas qu’ESLint analyse certains fichiers (comme les fichiers générés automatiquement ou les dépendances dans node_modules). Pour ça, créez un fichier nommé .eslintignore à la racine de votre projet.

Ce fichier fonctionne exactement comme un .gitignore. Il suffit d’y lister les fichiers ou dossiers à ignorer, un par ligne.

Peut-on utiliser ESLint avec TypeScript ?

Oui, absolument. Pour que ESLint comprenne la syntaxe de TypeScript, vous devez installer et configurer un plugin spécifique. Le paquet principal est @typescript-eslint/parser. Il permet à ESLint d’analyser le code TypeScript. Il est généralement utilisé avec @typescript-eslint/eslint-plugin, qui contient des règles spécifiques à TypeScript.