Cinq plugins ESLint qui améliorent la qualité du code

Dec 1, 2025 · 4 min read

Cinq plugins ESLint qui améliorent la qualité du code

Vous avez configuré ESLint. Il détecte les variables inutilisées et signale les points-virgules manquants. Mais votre base de code continue d’accumuler des bugs subtils, des imports incohérents et des problèmes d’accessibilité qui passent à travers la revue de code. Les règles par défaut ne suffisent pas.

ESLint 9 a introduit la configuration plate (eslint.config.js), remplaçant l’ancien format .eslintrc. Ce changement simplifie l’intégration des plugins et rend la configuration plus prévisible. Que vous ayez migré ou que vous utilisiez encore l’ancien format, les bons plugins transforment ESLint d’un vérificateur basique en véritable garde-fou qualité.

Voici cinq plugins qui résolvent des problèmes réels dans les projets frontend modernes—sans alourdir votre outillage.

Points clés à retenir

typescript-eslint active un linting conscient des types qui détecte les patterns d’accès non sécurisés et les instructions await oubliées
eslint-plugin-import impose l’hygiène des modules en validant les chemins, détectant les dépendances circulaires et organisant les imports de manière cohérente
eslint-plugin-unicorn fournit plus de 100 règles qui poussent vers des patterns JavaScript modernes et préviennent les bugs subtils
eslint-plugin-jsx-a11y détecte les problèmes d’accessibilité courants dans le JSX avant qu’ils n’atteignent les utilisateurs
@eslint/css étend le linting au-delà de JavaScript pour détecter les erreurs de feuilles de style dans un workflow unifié

typescript-eslint : linting conscient des types pour les projets TypeScript

Le plugin @typescript-eslint intègre le système de types de TypeScript dans votre workflow de linting. Contrairement aux vérifications syntaxiques basiques, les règles conscientes des types détectent des problèmes qui nécessitent de comprendre les types de votre code.

Considérez une fonction qui peut retourner null. Le linting conscient des types signale les patterns d’accès non sécurisés que les erreurs d’exécution révéleraient autrement en production. Des règles comme no-floating-promises détectent les instructions await oubliées, et no-unnecessary-condition identifie les branches de code mort.

Pour les bases de code plus importantes, typescript-eslint offre Project Service, qui améliore les performances en réutilisant les instances de programme TypeScript entre les fichiers. Cela compte lors du linting de milliers de fichiers en CI.

En configuration plate, vous importez le plugin directement et déployez ses configurations recommandées. La configuration s’intègre proprement avec le modèle de configuration plate d’ESLint 9 lors de l’utilisation de la chaîne d’outils typescript-eslint standard.

eslint-plugin-import : hygiène des modules et organisation des imports

eslint-plugin-import prévient le chaos qui s’accumule dans les instructions d’import à travers une base de code en croissance.

Le plugin détecte les chemins mal orthographiés avant l’exécution, s’assure que les imports nommés correspondent aux exports réels, et signale les dépendances circulaires qui causent des bugs subtils. Sa règle no-extraneous-dependencies empêche l’import de packages non listés dans package.json—une source courante d’échecs de déploiement.

La règle import/order impose un regroupement cohérent : packages externes d’abord, puis modules internes, puis imports relatifs. Cette cohérence rend les fichiers scannables et les diffs plus propres lors de la revue de code.

Pour les équipes, ce plugin élimine les débats de style sur l’organisation des imports. Configurez-le une fois, et la correction automatique s’occupe du reste.

eslint-plugin-unicorn : prévention opiniâtre des bugs

eslint-plugin-unicorn fournit plus de 100 règles qui détectent des problèmes subtils et imposent des patterns JavaScript modernes.

Il signale Array.forEach quand for...of serait plus clair. Il détecte new Array(5) quand vous vouliez dire Array.from({ length: 5 }). Il empêche les appels process.exit() qui sautent les gestionnaires de nettoyage.

Le plugin pousse vers une syntaxe moderne : préférant Array.includes() à indexOf() !== -1, suggérant String.replaceAll() plutôt que regex avec flags globaux, et signalant les méthodes Number obsolètes.

Toutes les règles ne conviennent pas à toutes les équipes. Commencez avec le preset recommandé, puis désactivez les règles qui entrent en conflit avec les conventions de votre base de code.

eslint-plugin-jsx-a11y détecte les problèmes d’accessibilité dans le JSX avant qu’ils n’atteignent les utilisateurs.

Le plugin signale les images sans attributs alt, les boutons sans noms accessibles, et les champs de formulaire sans labels. Il détecte l’utilisation d’autoFocus qui perturbe la navigation au clavier et identifie les gestionnaires de clic sur des éléments non interactifs.

Ces règles ne garantissent pas la conformité WCAG—les outils automatisés détectent environ 30% des problèmes d’accessibilité. Mais elles préviennent les erreurs les plus courantes et intègrent la sensibilisation à l’accessibilité dans le développement quotidien.

Pour les équipes qui livrent des applications destinées aux utilisateurs, ce plugin est essentiel. Les bugs d’accessibilité affectent de vrais utilisateurs et comportent des implications légales dans de nombreuses juridictions.

@eslint/css : linting au-delà de JavaScript

ESLint s’étend maintenant au-delà de JavaScript. Le plugin @eslint/css apporte l’analyse statique aux feuilles de style, détectant les erreurs de syntaxe et imposant les conventions.

De même, html-eslint valide la structure HTML, signalant les IDs dupliqués, les attributs lang manquants et l’imbrication invalide.

Ces plugins comptent pour les projets avec des modules CSS, des templates HTML ou des bibliothèques de composants où la qualité du balisage affecte le rendu. Ils unifient votre workflow de linting sous un seul outil plutôt que de nécessiter des validateurs séparés.

Séparation des préoccupations : linting vs. formatage

Une clarification : ESLint gère la qualité du code, pas le formatage. Laissez Prettier gérer les points-virgules, les guillemets et l’indentation. Utilisez eslint-config-prettier pour désactiver les règles ESLint qui entrent en conflit avec Prettier, puis exécutez les deux outils séparément.

Cette séparation maintient votre configuration ESLint concentrée sur la détection de bugs plutôt que sur l’application de préférences de style.

Conclusion

Ces cinq plugins traitent des problèmes distincts : sécurité des types, hygiène des imports, patterns modernes, accessibilité et linting multi-langage. Ajoutez-les progressivement. Activez d’abord les presets recommandés, puis personnalisez les règles à mesure que votre équipe identifie les points de friction.

L’objectif n’est pas la rigueur maximale—c’est détecter les vrais bugs avant leur mise en production.

FAQ

La configuration plate d'ESLint 9 utilise des modules JavaScript au lieu de JSON ou YAML. Exportez un tableau d'objets de configuration depuis eslint.config.js. Chaque objet peut spécifier les fichiers à cibler, les plugins à utiliser et les règles à appliquer. La documentation ESLint fournit un guide de migration, et la plupart des plugins incluent maintenant des exemples de configuration plate dans leur documentation.

Oui. Ces plugins ciblent des préoccupations différentes et se chevauchent rarement. typescript-eslint gère la vérification des types, eslint-plugin-import gère les modules, unicorn impose les patterns, jsx-a11y couvre l'accessibilité, et @eslint/css gère les feuilles de style. Si des conflits de règles surviennent, désactivez la règle la moins spécifique dans votre configuration.

Les règles conscientes des types de typescript-eslint ajoutent une surcharge car elles nécessitent le compilateur TypeScript. Pour les grands projets, activez Project Service pour améliorer les performances. Les autres plugins ajoutent une surcharge minimale. Exécutez ESLint avec le flag --cache pour ignorer les fichiers inchangés et accélérer les exécutions répétées.

Non. Commencez avec le preset recommandé de chaque plugin, qui inclut des règles éprouvées. Surveillez l'expérience de votre équipe et désactivez les règles qui créent des frictions sans détecter de vrais bugs. L'objectif est la prévention pratique des bugs, pas la rigueur maximale.

Understand every bug

Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.