Qu’est-ce qu’un linter ? Comprendre ESLint et son importance pour le Clean Code

Lorsque plusieurs développeurs travaillent sur le même code, les incohérences de style et les erreurs cachées peuvent vite s’accumuler. C’est là qu’interviennent les linters. Ils vérifient automatiquement les problèmes potentiels du code et imposent un style cohérent dans le projet.

Cet article explore ce qu’est un linter, les raisons d’en utiliser un et pourquoi ESLint est devenu l’outil de référence dans l’écosystème JavaScript et TypeScript.

Ce que les linters détectent

Un linter analyse votre code et détecte plusieurs catégories de problèmes avant qu’ils provoquent des bogues ou des incohérences.

• Erreurs de syntaxe → Problèmes qui rendent le code invalide ou inexécutable. Exemples :

  • Parenthèses ou crochets manquants → if (user.isLoggedIn {
  • Chaînes non terminées → console.log("Hello)
  • Instructions return mal placées ou manquantes.

• Problèmes de qualité du code → Motifs qui respectent la syntaxe mais peuvent provoquer des erreurs à l’exécution ou de la confusion. Exemples :

  • Variables inutilisées → Déclarer const result = computeValue(); sans jamais utiliser result.
  • Code inaccessible → Placer des instructions après un return.
  • Variables masquées → Réutiliser un nom de variable provenant d’une portée extérieure.

• Incohérences de style → Différences de mise en forme et de style qui compliquent la lecture. Exemples :

  • Points-virgules manquants ou indentation incohérente.
  • Utilisation de "double quotes" dans un fichier et de 'single quotes' dans un autre.
  • Mélange de tabulations et d’espaces pour l’indentation.

• Non-respect des bonnes pratiques → Code techniquement fonctionnel, mais contraire aux approches recommandées. Exemples :

  • Utilisation d’API dépréciées, comme ReactDOM.render() dans React 18.
  • Utilisation de var plutôt que de let ou const.
  • Appel de fonctions asynchrones sans await.
  • Utilisation de == plutôt que de ===, ce qui peut entraîner des bogues subtils de conversion implicite des types.

Les linters comme ESLint ne se limitent pas à détecter les erreurs. Ils imposent des conventions et empêchent les mauvaises habitudes d’entrer dans le dépôt.

Pourquoi utiliser un linter ?

1. Détecter les erreurs tôt

Les linters détectent les problèmes avant même l’exécution de l’application. ESLint peut par exemple signaler une variable non définie ou un await manquant dans une fonction asynchrone, ce qui économise du temps de débogage.

2. Assurer la cohérence

Un linter impose un style de code unifié dans l’équipe et évite les débats inutiles sur les tabulations, les espaces ou l’emplacement des virgules.

3. Améliorer la qualité du code

Les linters encouragent un code plus propre et maintenable en signalant des motifs complexes ou risqués, comme les callbacks profondément imbriqués ou les imports inutilisés.

4. S’intégrer au processus de travail

Ils s’exécutent automatiquement dans l’IDE, lors des commits via des hooks de pré-commit comme Husky, ou dans les pipelines CI/CD. Le code reste ainsi propre à chaque étape.

Focus sur ESLint : la référence pour JavaScript et TypeScript

ESLint est le linter le plus populaire de l’écosystème JavaScript, largement utilisé pour les projets React, Node.js et TypeScript.

🔧 Fonctionnalités clés

• Configuration très poussée → Adaptez chaque règle à votre style.
• Écosystème de plugins → Ajoutez les plugins de la communauté, notamment pour React, Jest, la sécurité ou l’accessibilité.
• Prise en charge de TypeScript → Intégration complète via @typescript-eslint.
• Règles avec correction automatique → De nombreux problèmes peuvent être corrigés automatiquement avec :
  Copier le code

  npx eslint . --fix
  

• Intégrations → Fonctionne avec VS Code, WebStorm, GitHub Actions et presque tous les systèmes de CI.

Configurer ESLint

Vous pouvez installer et configurer ESLint dans votre projet avec :

npx eslint --init

Si vous utilisez ESLint v8.23 ou une version ultérieure, cette commande crée un fichier Flat Config nommé eslint.config.mjs, à la place de l’ancien format .eslintrc.json. Ce format moderne utilise les modules JavaScript et améliore les performances ainsi que la clarté.

Voici un exemple simple de configuration pour un projet Next.js et TypeScript :

// eslint.config.mjs
import js from '@eslint/js'
import tseslint from 'typescript-eslint'
import prettier from 'eslint-config-prettier'
import { FlatCompat } from '@eslint/eslintrc'

const compat = new FlatCompat({ baseDirectory: import.meta.dirname })

export default [
  js.configs.recommended, // Core JavaScript best practices
  ...tseslint.configs.recommended, // TypeScript-specific linting
  ...compat.extends('next/core-web-vitals'), // Next.js and React recommendations
  prettier, // Avoid rule conflicts with Prettier
  {
    files: ['**/*.{js,jsx,ts,tsx}'],
    rules: {
      'no-console': ['warn', { allow: ['warn', 'error'] }],
      '@typescript-eslint/no-unused-vars': [
        'warn',
        { argsIgnorePattern: '^_', varsIgnorePattern: '^_' },
      ],
      semi: ['error', 'always'],
    },
  },
]

Explication

Détaillons ce qui se passe :

js.configs.recommended

Charge les règles fondamentales recommandées d’ESLint, qui couvrent les problèmes JavaScript courants comme :

• Les variables inutilisées
• Le code inaccessible
• Les instructions de retour manquantes
• Les erreurs de syntaxe

tseslint.configs.recommended

Ajoute des règles adaptées à TypeScript, qui détectent par exemple :

• Les imports inutilisés
• L’utilisation incorrecte des types
• Les variables déclarées mais jamais utilisées dans les fichiers .ts/.tsx

compat.extends('next/core-web-vitals')

Applique les règles Next.js et React, notamment :

• Les bonnes pratiques d’accessibilité (a11y)
• La vérification de l’utilisation des React Hooks
• Les avertissements de performances, comme l’utilisation de <img> au lieu de <Image>

prettier

Désactive les règles de linting liées à la mise en forme qui entreraient en conflit avec Prettier.

rules

Personnalisations propres au projet :

• 'no-console': ['warn'] → Autorise console.warn et console.error, mais signale les autres appels à la console.
• '@typescript-eslint/no-unused-vars' → Signale les variables ou paramètres déclarés mais inutilisés, en ignorant ceux dont le nom commence par _.
• 'semi': ['error', 'always'] → Impose l’utilisation des points-virgules.

Cette configuration fournit :

• Un linting JavaScript et TypeScript fiable
• Les bonnes pratiques Next.js intégrées
• Une compatibilité automatique avec Prettier
• Des règles simples et claires qui rendent le code cohérent, lisible et sans bogues

Une fois ce fichier en place, vous pouvez analyser votre projet avec :

npm run lint

Ou corriger automatiquement les problèmes qui le permettent :

npm run lint -- --fix

ESLint et les autres linters

Depuis la dépréciation officielle de TSlint au profit d’ESLint, presque tous les projets JavaScript et TypeScript modernes utilisent ESLint.

Bonnes pratiques avec ESLint

• Associez ESLint à Prettier pour la mise en forme automatique du code.
• Ajoutez les vérifications ESLint aux hooks de pré-commit Git avec Husky ou lint-staged.
• Exécutez-le dans votre pipeline CI pour imposer la qualité du code dans les demandes de fusion.
• Vous pouvez utiliser des paquets recommandés comme eslint-config-airbnb ou eslint-plugin-react

Conclusion

Les linters sont essentiels pour conserver un code propre, cohérent et sans erreurs, particulièrement dans les projets collaboratifs. Parmi eux, ESLint se distingue comme l’outil le plus flexible et puissant pour les développeurs JavaScript et TypeScript.

Que vous travailliez seul ou dans une grande équipe, intégrer ESLint à votre processus garantit un code professionnel, lisible et maintenable à long terme.

Vous voulez voir ESLint en action ? Consultez sa documentation officielle ou ajoutez-le à votre projet avec npx eslint --init.