Zum Inhalt springen
Alle Technologien

ESLint der Standard-Linter für JavaScript und TypeScript

ESLint prüft JavaScript- und TypeScript-Code auf Fehler, Anti-Patterns und Stil-Verstöße, bevor sie in Produktion landen. Seine Stärke ist das große Ökosystem: Für praktisch jedes Framework und jede Konvention gibt es Regelsätze und Plugins, etwa für React, Vue, Svelte, Import-Sortierung oder Accessibility. In der Praxis kombinieren wir ESLint mit Prettier, das die reine Formatierung übernimmt, sodass ESLint sich auf Code-Qualität konzentriert. Wer ein schlankeres, schnelleres Setup bevorzugt, für den ist Biome die All-in-one-Alternative, die Linting und Formatierung in einem Werkzeug bündelt. Für Ihre Agentur binden wir das Setup in Editor, Pre-Commit-Hook und CI ein und dokumentieren das Quality-Gate so, dass Sie es unter eigenem Namen weitergeben können.

Statische Codeanalyse Systemebene
Die Rolle von ESLint im Projekt, schematisch dargestellt.

01 / Einsatz

Wofür sich ESLint eignet

  • Fehler und Anti-Patterns früh im Code finden
  • Framework-Regeln für React, Vue oder Svelte
  • Einheitliche Konventionen im Team durchsetzen
  • Import-Sortierung und Accessibility-Checks
  • Quality-Gate in der CI-Pipeline

02 / Einblick

ESLint in der Praxis

eslint.config.js
import js from '@eslint/js'
import tseslint from 'typescript-eslint'

// Flat Config (eslint.config.js), typescript-eslint v8
export default tseslint.config(
  js.configs.recommended,
  ...tseslint.configs.recommended,
  {
    files: ['**/*.{ts,tsx}'],
    rules: {
      'no-console': 'warn',
      '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
    },
  },
  { ignores: ['dist/', 'coverage/'] },
)

03 / Vorgehen

So arbeiten wir mit ESLint

  1. Regelsatz festlegen: empfohlene Basis plus framework-spezifische Plugins

  2. Zusammenspiel mit Prettier sauber trennen (Qualität und Formatierung)

  3. TypeScript-Integration über den typbewussten Regelsatz

  4. Editor-Integration (Fehler live) und Pre-Commit-Hook

  5. Einbindung in die CI-Pipeline als Quality-Gate

  6. Übergabe: dokumentierte Regeln und Begründungen

Das liefern wir bei ESLint

  • Konfiguriertes ESLint-Setup mit passenden Plugins
  • Abgestimmtes Zusammenspiel mit Prettier
  • Editor- und Pre-Commit-Integration
  • CI-Einbindung als Quality-Gate
  • Übergabe-Doku: Regeln und Konventionen

Häufige Fragen zu ESLint

ESLint oder Biome: Was empfehlen Sie?
Beide sind gute Wege. ESLint hat das größere Plugin-Ökosystem und mehr spezialisierte Framework-Regeln, ist dafür etwas langsamer und braucht mit Prettier zwei Werkzeuge. Biome bündelt Linting und Formatierung in einem schnellen Tool mit einer Konfiguration. Faustregel: ESLint plus Prettier, wenn spezifische Plugins gebraucht werden oder das Bestands-Setup gut läuft; Biome, wenn Geschwindigkeit und ein schlankes Setup zählen. Wir wählen nach Projekt-Fit.
Warum ESLint und Prettier zusammen?
Weil sie unterschiedliche Aufgaben haben. ESLint findet Fehler und setzt Code-Qualität durch, Prettier kümmert sich um die reine Formatierung (Einrückung, Zeilenumbrüche, Anführungszeichen). Sauber getrennt konfiguriert geraten sie sich nicht in die Quere: Prettier formatiert, ESLint prüft die Logik.
Lohnt sich ESLint auch für kleine Projekte?
Ja, gerade zum Start. Ein schlanker Basis-Regelsatz fängt typische Fehler ab, bevor sie zu Bugs werden, und hält den Code-Style konsistent, sobald mehr als eine Person am Projekt arbeitet. Der Aufwand ist gering, der Nutzen bei Wartung und Übergabe hoch.
Können Sie ESLint in ein bestehendes Projekt nachrüsten?
Ja. Wir führen ESLint schrittweise ein, damit nicht Hunderte Warnungen auf einen Schlag auftreten: erst eine solide Basis, dann Regel für Regel verschärfen. So bleibt der Code jederzeit lauffähig und das Team kann die Konventionen mitgehen.

ESLint für Ihr Projekt?

Beschreiben Sie uns Ihre Anforderungen. Wir besprechen, wie die Technologie in Ihr Projekt und Ihre vorhandene Infrastruktur passt.

Projekt besprechen