Gegenwärtig verlassen sich Entwickler auf ESLint und Prettier, um die Codequalität und -konsistenz als wichtigen Teil der Entwicklungsarbeit zu gewährleisten. Diese beiden Tools sind zwar für sich genommen sehr leistungsfähig, aber die gemeinsame Arbeit mit ihnen führt häufig zu Linter-Konflikten und Formatierungsproblemen, die Entwickler verärgern und automatisierte Pipelines stören können. Diese Schritt-für-Schritt-Anleitung hilft Ihnen dabei, die Ursachen für diese Konflikte aufzuspüren, Ihre Werkzeuge entsprechend zu konfigurieren und eine Codierungsumgebung mit maximaler Produktivität zu schaffen.
Das Problem verstehen: Warum Linters und Formatierer aneinander geraten
Bevor Sie sich auf Lösungen stürzen, sollten Sie den Unterschied zwischen einem Linter und einem Formatierer kennen:
- Linters (wie ESLint) analysieren Ihren Code auf mögliche Fehler, Codegerüche und stilistische Probleme.
- Formatierer (wie Prettier) passen die Struktur und das Layout des Codes automatisch an, um Lesbarkeit und Konsistenz zu gewährleisten
Wenn diese beiden Werkzeuge versuchen, dasselbe zu tun, aber auf leicht unterschiedliche Weise, ist ein Konflikt zwischen den beiden Linting-Werkzeugen vorprogrammiert. ESLint könnte Sie zum Beispiel vor einem fehlenden Semikolon warnen, während Prettier es dann je nach Konfiguration einfügt oder entfernt. Ein häufiges Tauziehen, das in Ihrer Codebasis ziemlich frustrierend sein kann.
Schritt 1: Entscheiden Sie, welches Tool was kann
Um Formatierungsprobleme zu vermeiden, sollten Sie den Anwendungsbereich für jedes Werkzeug klar definieren. Ein gängiger Ansatz:
- Überlassen Sie Prettier die Formatierung (Zeilenlänge, Einrückung, Abstände)
- ESLint kümmert sich um die Codequalität und mögliche Fehler
✅ Empfohlen:
- Verwenden Sie das Paket eslint-config-prettier, um Formatierungsregeln in ESLint zu deaktivieren
- Verwenden Sie das Paket eslint-plugin-prettier, um Prettier-Formatierungsprobleme als ESLint-Fehler zu melden
Schritt 2: Installieren und konfigurieren Sie Prettier
Prettier funktioniert am besten, wenn es explizit konfiguriert ist. Erstellen Sie eine .prettierrc- oder prettier.config.js-Datei mit den Einstellungen Ihres Teams.
Beispiel:
{
“semi”: true,
“singleQuote”: true,
“tabWidth”: 2,
“printWidth”: 100
}
✅ Tipps:
- Verlassen Sie sich nicht ausschließlich auf die Standardeinstellungen des Editors
- Teilen Sie Ihre Konfiguration im Projekt-Repository, um die Konsistenz zwischen den Teams zu gewährleisten
Schritt 3: ESLint einrichten und mit Prettier integrieren
Um zu vermeiden, dass sich ESLint und Prettier gegenseitig auf die Füße treten, installieren Sie diese Pakete:
npm install –save-dev eslint prettier eslint-config-prettier eslint-plugin-prettier
Dann aktualisieren Sie Ihre .eslintrc.js-Datei:
module.exports = {
extends: [
‘eslint:recommended’,
‘plugin:prettier/recommended’ // Aktiviert eslint-plugin-prettier und eslint-config-prettier
],
plugins: [‘prettier’],
rules: {
‘prettier/prettier’: ‘error’
}
};
Diese Konfiguration stellt sicher, dass ESLint die Formatierungsaufgaben an Prettier delegiert und so Linter-Konflikte reduziert.
Schritt 4: Verwenden Sie eine konsistente Dateiformatierung in Ihrem Editor und CI/CD
Selbst mit der richtigen Konfiguration können Formatierungsprobleme auftreten, wenn verschiedene Umgebungen unterschiedliche Formatierungsregeln anwenden. Sichern Sie die Konsistenz durch:
- Installieren von Prettier- und ESLint-Erweiterungen in Ihrer IDE
- Hinzufügen von Format-/Lint-Skripten zu package.json
- Ausführen dieser Skripte in Ihren CI/CD-Pipelines
Example scripts:
“Skripte”: {
“lint”: “eslint .”,
“format”: “prettier –write .”
}
Schritt 5: Automatische Formatierung beim Speichern und Bestätigen
Um menschliche Fehler zu vermeiden, automatisieren Sie die Formatierung mit Tools wie:
- Editor-Integration (z. B. VS Code: editor.formatOnSave = true)
- Lint-staged: Formatiert nur geänderte Dateien vor einer Übergabe
- Husky: Auslösen von Pre-Commit-Hooks zur Erzwingung der Formatierung
Installieren:
npm install –save-dev husky lint-staged
Zu package.json hinzufügen:
“lint-staged”: {
“*.js”: [“eslint –fix”, “prettier –write”]
}
Dadurch wird sichergestellt, dass Formatierungsprobleme erkannt und behoben werden, bevor der Code überhaupt in das Repository gelangt.
Schrit t 6: Validierung der endgültigen Ausgabe
Führen Sie einen vollständigen Lint- und Formatierungsdurchlauf durch, bevor Sie den Code zusammenführen oder freigeben. Dies stellt sicher, dass keine Linter-Konflikte oder Formatierungsprobleme bestehen.
✅ Profi-Tipps:
- Verwenden Sie GitHub Actions oder GitLab CI zur automatischen Durchführung von Lint Checks
- Integrieren Sie Badge-Indikatoren (z. B. “Lint passing”) in Ihre README, um sie sichtbar zu machen.
Abschließende Überlegungen
Während es bei der Lösung von Linter-Konflikten und Formatierungsproblemen scheinbar eher darum geht, ein Werkzeug gegen ein anderes auszuwählen, liegt die eigentliche Aufgabe darin, die Werkzeuge zusammenarbeiten zu lassen. Wenn Sie Prettier für die Formatierung und ESLint für die Codelogik und -struktur zuständig sind, erhalten Sie eine Entwicklungsumgebung, die wartbar und konfliktfrei ist. Standardisieren Sie Konfigurationen und automatisieren Sie den Formatierungsprozess, und schulen Sie dann Ihr Team – so wird die Codierung rationalisiert und die Pull-Requests werden sauberer.
Warum TechNow die vertrauenswürdige Wahl für DevOps und Codequalität in Deutschland ist
Im Bereich der effizienten Entwicklungsabläufe ist TechNow der führende IT Support Dienstleister in Deutschland. Es ist spezialisiert auf DevOps-Best-Practices, CI/CD-Pipeline-Setups und die größten Pain Points der Entwickler: Linter-Konflikte und Formatierungsprobleme. Wenn es um die Entwicklung leicht skalierbarer Frontend-Anwendungen oder Cloud-nativer Services geht, synchronisiert TechNow Tools wie ESLint und Prettier mit Ihren Entwicklungsstandards. Arbeiten Sie mit TechNow zusammen, um eine Lösung aus einer Hand zu erhalten, die Sie dabei unterstützt, sauberere, schnellere und konformere Codebases zu erstellen, die für Ihr Team und Ihren Tech-Stack geeignet sind.
