Fünf ESLint-Plugins, die die Codequalität verbessern
Sie haben ESLint konfiguriert. Es erkennt ungenutzte Variablen und meldet fehlende Semikolons. Aber Ihre Codebasis sammelt weiterhin subtile Bugs, inkonsistente Imports und Barrierefreiheitsprobleme an, die beim Code-Review durchrutschen. Die Standardregeln reichen nicht aus.
ESLint 9 hat die Flat Config (eslint.config.js) eingeführt und ersetzt damit das veraltete .eslintrc-Format. Diese Änderung vereinfacht die Plugin-Integration und macht die Konfiguration vorhersehbarer. Egal, ob Sie bereits migriert haben oder noch das ältere Format verwenden – die richtigen Plugins verwandeln ESLint von einem einfachen Checker in ein echtes Quality Gate.
Hier sind fünf Plugins, die reale Probleme in modernen Frontend-Projekten adressieren – ohne Ihr Tooling aufzublähen.
Wichtigste Erkenntnisse
- typescript-eslint ermöglicht typbewusstes Linting, das unsichere Zugriffsmuster und vergessene
await-Anweisungen erkennt - eslint-plugin-import erzwingt Modulhygiene durch Validierung von Pfaden, Erkennung zirkulärer Abhängigkeiten und konsistente Organisation von Imports
- eslint-plugin-unicorn bietet über 100 Regeln, die moderne JavaScript-Muster fördern und subtile Bugs verhindern
- eslint-plugin-jsx-a11y erkennt häufige Barrierefreiheitsprobleme in JSX, bevor sie die Nutzer erreichen
- @eslint/css erweitert das Linting über JavaScript hinaus, um Stylesheet-Fehler in einem einheitlichen Workflow zu erfassen
typescript-eslint: Typbewusstes Linting für TypeScript-Projekte
Das Plugin @typescript-eslint bringt TypeScripts Typsystem in Ihren Linting-Workflow. Anders als einfache Syntaxprüfungen erkennen typbewusste Regeln Probleme, die ein Verständnis der Typen Ihres Codes erfordern.
Betrachten Sie eine Funktion, die möglicherweise null zurückgibt. Typbewusstes Linting meldet unsichere Zugriffsmuster, die andernfalls erst durch Laufzeitfehler in der Produktion sichtbar würden. Regeln wie no-floating-promises erkennen vergessene await-Anweisungen, und no-unnecessary-condition identifiziert tote Code-Zweige.
Für größere Codebasen bietet typescript-eslint den Project Service, der die Performance verbessert, indem TypeScripts Programminstanzen dateiübergreifend wiederverwendet werden. Das ist wichtig beim Linting von Tausenden von Dateien in der CI.
In der Flat Config importieren Sie das Plugin direkt und verteilen seine empfohlenen Konfigurationen. Das Setup integriert sich sauber in ESLints 9 Flat-Config-Modell, wenn Sie die Standard-typescript-eslint-Toolchain verwenden.
eslint-plugin-import: Modulhygiene und Import-Organisation
eslint-plugin-import verhindert das Chaos, das sich in Import-Anweisungen einer wachsenden Codebasis ansammelt.
Das Plugin erkennt falsch geschriebene Pfade vor der Laufzeit, stellt sicher, dass Named Imports mit tatsächlichen Exports übereinstimmen, und meldet zirkuläre Abhängigkeiten, die subtile Bugs verursachen. Die Regel no-extraneous-dependencies verhindert den Import von Paketen, die nicht in der package.json aufgeführt sind – eine häufige Ursache für Deployment-Fehler.
Die Regel import/order erzwingt konsistente Gruppierung: zuerst externe Pakete, dann interne Module, dann relative Imports. Diese Konsistenz macht Dateien übersichtlich und Diffs während des Code-Reviews sauberer.
Für Teams eliminiert dieses Plugin Stil-Debatten über die Import-Organisation. Einmal konfiguriert, erledigt Auto-Fix den Rest.
eslint-plugin-unicorn: Opinionierte Bug-Prävention
eslint-plugin-unicorn bietet über 100 Regeln, die subtile Probleme erkennen und moderne JavaScript-Muster durchsetzen.
Es meldet Array.forEach, wenn for...of klarer wäre. Es erkennt new Array(5), wenn Sie Array.from({ length: 5 }) meinten. Es verhindert process.exit()-Aufrufe, die Cleanup-Handler überspringen.
Das Plugin fördert moderne Syntax: bevorzugt Array.includes() gegenüber indexOf() !== -1, schlägt String.replaceAll() statt Regex mit globalen Flags vor und meldet veraltete Number-Methoden.
Nicht jede Regel passt zu jedem Team. Beginnen Sie mit dem empfohlenen Preset und deaktivieren Sie dann Regeln, die mit den Konventionen Ihrer Codebasis kollidieren.
Discover how at OpenReplay.com.
eslint-plugin-jsx-a11y: JSX-Barrierefreiheits-Linting
eslint-plugin-jsx-a11y erkennt Barrierefreiheitsprobleme in JSX, bevor sie die Nutzer erreichen.
Das Plugin meldet Bilder ohne alt-Attribute, Buttons ohne zugängliche Namen und Formulareingaben ohne Labels. Es erkennt autoFocus-Verwendung, die die Tastaturnavigation stört, und identifiziert Click-Handler auf nicht-interaktiven Elementen.
Diese Regeln garantieren keine WCAG-Konformität – automatisierte Tools erfassen etwa 30 % der Barrierefreiheitsprobleme. Aber sie verhindern die häufigsten Fehler und bauen Barrierefreiheitsbewusstsein in die tägliche Entwicklung ein.
Für Teams, die nutzerorientierte Anwendungen ausliefern, ist dieses Plugin unverzichtbar. Barrierefreiheits-Bugs betreffen echte Nutzer und haben in vielen Rechtsordnungen rechtliche Konsequenzen.
@eslint/css: Linting über JavaScript hinaus
ESLint geht jetzt über JavaScript hinaus. Das Plugin @eslint/css bringt statische Analyse zu Stylesheets und erkennt Syntaxfehler sowie erzwingt Konventionen.
Ähnlich validiert html-eslint die HTML-Struktur, meldet doppelte IDs, fehlende lang-Attribute und ungültiges Nesting.
Diese Plugins sind wichtig für Projekte mit CSS-Modulen, HTML-Templates oder Komponentenbibliotheken, bei denen die Markup-Qualität das Rendering beeinflusst. Sie vereinheitlichen Ihren Linting-Workflow unter einem einzigen Tool, anstatt separate Validatoren zu benötigen.
Separation of Concerns: Linting vs. Formatierung
Eine Klarstellung: ESLint kümmert sich um Codequalität, nicht um Formatierung. Überlassen Sie Prettier die Verwaltung von Semikolons, Anführungszeichen und Einrückungen. Verwenden Sie eslint-config-prettier, um ESLint-Regeln zu deaktivieren, die mit Prettier kollidieren, und führen Sie dann beide Tools separat aus.
Diese Trennung hält Ihre ESLint-Konfiguration darauf fokussiert, Bugs zu erkennen, anstatt Stil-Präferenzen durchzusetzen.
Fazit
Diese fünf Plugins adressieren unterschiedliche Probleme: Typsicherheit, Import-Hygiene, moderne Muster, Barrierefreiheit und sprachübergreifendes Linting. Fügen Sie sie schrittweise hinzu. Aktivieren Sie zuerst die empfohlenen Presets und passen Sie dann die Regeln an, sobald Ihr Team Reibungspunkte identifiziert.
Das Ziel ist nicht maximale Strenge – sondern echte Bugs zu erkennen, bevor sie ausgeliefert werden.
FAQs
ESLint 9s Flat Config verwendet JavaScript-Module statt JSON oder YAML. Exportieren Sie ein Array von Konfigurationsobjekten aus eslint.config.js. Jedes Objekt kann Dateien zum Targeting, zu verwendende Plugins und anzuwendende Regeln spezifizieren. Die ESLint-Dokumentation bietet einen Migrationsleitfaden, und die meisten Plugins enthalten jetzt Flat-Config-Beispiele in ihrer Dokumentation.
Ja. Diese Plugins zielen auf unterschiedliche Bereiche ab und überschneiden sich selten. typescript-eslint behandelt Typprüfung, eslint-plugin-import verwaltet Module, unicorn erzwingt Muster, jsx-a11y deckt Barrierefreiheit ab und @eslint/css behandelt Stylesheets. Wenn Regelkonflikte auftreten, deaktivieren Sie die weniger spezifische Regel in Ihrer Konfiguration.
Typbewusste Regeln von typescript-eslint erzeugen Overhead, weil sie TypeScripts Compiler benötigen. Für große Projekte aktivieren Sie den Project Service, um die Performance zu verbessern. Andere Plugins erzeugen minimalen Overhead. Führen Sie ESLint mit dem Flag --cache aus, um unveränderte Dateien zu überspringen und wiederholte Durchläufe zu beschleunigen.
Nein. Beginnen Sie mit dem empfohlenen Preset jedes Plugins, das bewährte Regeln enthält. Beobachten Sie die Erfahrungen Ihres Teams und deaktivieren Sie Regeln, die Reibung erzeugen, ohne echte Bugs zu erkennen. Das Ziel ist praktische Bug-Prävention, nicht maximale Strenge.
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.
