Comment configurer ESLint JS en 2026 (Guide complet)

Introduction

ESLint est l'outil de linting incontournable pour JavaScript en 2026, capable de détecter plus de 500 erreurs potentielles, d'imposer des conventions de code et d'automatiser les corrections via --fix. Dans un écosystème où les projets grandissent rapidement, ESLint prévient les bugs, uniformise le style et accélère les revues de code – imaginez un gardien vigilant qui corrige votre code avant même les tests unitaires.

Ce tutoriel intermediate vous guide pas à pas pour une configuration optimale : de l'installation à l'intégration avec Prettier et VSCode. Vous obtiendrez un setup production-ready, avec des exemples complets pour un projet vanilla JS, extensible à React ou Node.js. À la fin, votre équipe gagnera en productivité, réduisant les merges conflicts de 40% typiquement. Prêt à transformer vos warnings en code impeccable ?

Prérequis

Node.js 20+ installé
Un projet JavaScript existant (ou créez-en un avec npm init -y)
Connaissances de base en npm et JSON
Éditeur comme VSCode (recommandé pour l'extension ESLint)

Installation d'ESLint et dépendances

terminal

npm init -y
npm install --save-dev eslint eslint-config-prettier prettier @eslint/js globals

Cette commande initialise un projet et installe ESLint avec Prettier pour l'auto-formatage, @eslint/js pour les configs JS modernes, et globals pour les variables globales comme console. Évitez eslint --init obsolète en 2026 ; optez pour une config flat. Vérifiez avec npx eslint --version.

Configuration de base ESLint

Maintenant, créons le fichier de configuration principal. ESLint utilise un format flat config depuis v9, plus simple et performant que l'ancien .eslintrc. Cela permet une modularité accrue, comme des imports de configs partagées.

Fichier ESLint flat config de base

eslint.config.js

import js from '@eslint/js';
import globals from 'globals';

export default [
  js.configs.recommended,
  {
    languageOptions: {
      globals: globals.browser,
      sourceType: 'module',
    },
    rules: {
      'no-unused-vars': 'warn',
      'no-console': 'off',
    },
  },
];

Cette config importe la recommandée d'ESLint et étend avec des globals browser pour éviter les faux positifs sur window ou document. On désactive no-console pour le dev mais garde no-unused-vars en warn. Testez avec npx eslint . – corrigez les erreurs pour valider.

Ajout de règles personnalisées et plugins

Pour un projet réel, étendons avec des règles strictes sur les imports et les promesses. Introduisons aussi eslint-plugin-import pour ordonner les imports alphabétiquement.

Installation et config avec plugin import

terminal

npm install --save-dev eslint-plugin-import

Installe le plugin pour analyser les imports statiques. Nécessaire pour des règles comme import/order. Relancez ESLint après pour appliquer.

ESLint config étendue avec import rules

eslint.config.js

import js from '@eslint/js';
import globals from 'globals';
import importPlugin from 'eslint-plugin-import';

export default [
  js.configs.recommended,
  ...importPlugin.configs.recommended,
  {
    plugins: { import: importPlugin },
    languageOptions: {
      globals: globals.browser,
      sourceType: 'module',
    },
    rules: {
      'no-unused-vars': 'error',
      'no-console': 'warn',
      'import/order': [
        'error',
        {
          groups: ['builtin', 'external', 'internal', 'parent', 'sibling', 'index'],
          'newlines-between': 'always',
        },
      ],
      'import/no-unresolved': 'error',
    },
  },
];

Ajoute le plugin import avec configs.recommended et une règle import/order qui sépare les groupes d'imports par saut de ligne. Passez no-unused-vars en 'error' pour bloquer les commits sales. Cela impose un style lisible, comme un catalogue trié.

Intégration avec Prettier

Prettier formate automatiquement ; ESLint lint. Les combiner évite les conflits : ESLint cède sur le style à Prettier.

Config Prettier et scripts npm

package.json

{
  "name": "eslint-tutorial",
  "version": "1.0.0",
  "scripts": {
    "lint": "eslint . --ext .js",
    "lint:fix": "eslint . --ext .js --fix && prettier --write .",
    "format": "prettier --check .",
    "format:fix": "prettier --write ."
  },
  "prettier": {
    "semi": true,
    "singleQuote": true,
    "trailingComma": "es5"
  }
}

Ajoute des scripts pour lint:fix qui corrige ESLint puis Prettier. La config Prettier inline définit semi-colons et quotes. Utilisez npm run lint:fix pour tout nettoyer en une commande.

Exemple de fichier à linter

index.js

console .log('Hello');

function unused() {}

import fs from 'fs';
import { readFile } from 'fs/promises';

async function test() {
  const data = await readFile('./file.txt');
  console.log(data.toString());
}

test();

Ce code a des erreurs : espace avant .log, var unused, imports non ordonnés. Lancez npm run lint : ESLint signale tout. Puis lint:fix corrige imports, espace et supprime unused.

Intégration VSCode

Installez l'extension ESLint (Microsoft) et Prettier dans VSCode. Ajoutez au .vscode/settings.json : { "eslint.format.enable": true, "editor.formatOnSave": true } pour auto-fix au save.

Ignore file pour ESLint

.eslintignore

node_modules/
dist/
*.min.js
build/

Ignore les dossiers build et deps pour accélérer le linting (x10). Essentiel en CI/CD pour ne pas scanner des millions de lignes inutiles.

Bonnes pratiques

Utilisez flat config : Plus rapide et moderne que .eslintrc.
Intégrez en pre-commit : Avec Husky + lint-staged pour lint:fix avant push.
Règles progressives : Commencez 'warn', passez 'error' après migration.
Partagez la config : Publiez eslint.config.js sur npm pour monorepos.
CI obligatoire : Ajoutez npm run lint dans GitHub Actions pour bloquer les PR sales.

Erreurs courantes à éviter

Conflits Prettier/ESLint : Oubliez eslint-config-prettier – ajoutez-le en dernier dans la config pour désactiver les règles style.
Globals manquants : Sans globals.node ou browser, faux positifs sur process ou fetch.
Pas de --fix : Les 80% des erreurs sont auto-corrigées ; toujours l'executer.
Ignore incomplet : Lint node_modules ralentit tout ; toujours un .eslintignore.

Pour aller plus loin

Passez à TypeScript avec @typescript-eslint/eslint-plugin ou React via eslint-plugin-react-hooks. Explorez notre formation ESLint avancé pour monorepos et CI/CD. Docs officielles : eslint.org. Rejoignez notre Discord pour des configs partagées.

Comment configurer ESLint pour JavaScript en 2026