Automatische Codeformatierung & Linting in Next.js

In modernen Entwicklungsprojekten ist konsistenter und gut strukturierter Code entscheidend, um Qualität und Wartbarkeit zu gewährleisten. Besonders in größeren Teams oder langfristigen Projekten kann uneinheitlicher Code schnell zu Problemen führen. Hier kommen Linting und Codeformatierung ins Spiel, um diese Herausforderungen zu bewältigen.

ESLint ist ein leistungsstarkes Tool zur Analyse von JavaScript- und TypeScript-Code, das häufige Fehler und potenzielle Probleme erkennt. Es warnt vor Codeproblemen und kann verhindern, dass fehlerhafter Code in die Produktion gelangt, indem es Builds stoppt, wenn Linting-Fehler auftreten. Gleichzeitig sorgt Prettier dafür, dass der Code einheitlich formatiert wird – unabhängig von persönlichen Vorlieben der Entwickler.

Next.js integriert ESLint standardmäßig und bietet mit dem Plugin eslint-plugin-next spezielle Regeln für Next.js-Projekte. In Kombination mit Prettier entsteht ein optimales Setup, das sowohl Fehler im Code aufdeckt als auch Formatierungsprobleme behebt.

In diesem Artikel erfährst du:

• Wie du ESLint und Prettier in einem Next.js-Projekt einrichtest
• Wie du beide Tools kombinierst, um Konflikte zu vermeiden
• Und welche Best Practices du für konsistente Codequalität anwenden solltest.

Was ist ESLint?

ESLint ist ein statisches Code-Analyse-Tool für JavaScript und TypeScript, das dabei hilft, Fehler im Code frühzeitig zu erkennen und potenzielle Probleme aufzudecken. Es überprüft deinen Code auf Basis von definierten Regeln und warnt dich, wenn diese verletzt werden. Durch die Integration in Next.js ist ESLint ein unverzichtbares Werkzeug, um die Codequalität in modernen Projekten sicherzustellen.

Wichtige Funktionen von ESLint

1. Code-Analyse
   • Erkennt Syntaxfehler, unsichere Praktiken und nicht genutzte Variablen.
   • Hilft, Inkonsistenzen und fehleranfälligen Code zu vermeiden.
2. Konfigurierbare Regeln
   • Nutze voreingestellte Regelwerke oder passe Regeln individuell an die Anforderungen deines Projekts an.
   • Beispiele:
     * no-unused-vars: Warnt vor nicht verwendeten Variablen.
     * eqeqeq: Erzwingt die Verwendung von === anstelle von ==.
3. Integration in Next.js
   Next.js integriert ESLint standardmäßig und enthält das Plugin eslint-plugin-next, das zusätzliche Regeln speziell für Next.js-Projekte bereitstellt.
   Beispiele für Regeln:
   • @next/next/no-img-element: Verhindert die Verwendung des <img>-Elements und empfiehlt stattdessen das <Image>-Element von Next.js.
   • @next/next/no-document-import-in-page: Warnt vor der Verwendung von next/document außerhalb von pages/_document.js.
4. Fehlerwarnungen und Builds
   • ESLint kann so konfiguriert werden, dass Builds fehlschlagen, wenn Linting-Fehler auftreten. Das verhindert, dass fehlerhafter Code in die Produktion gelangt.

Automatische Linting-Warnungen

ESLint zeigt dir Fehler und Warnungen direkt in deinem Code-Editor, wenn du entsprechende Integrationen wie VS Code oder WebStorm nutzt. Dadurch kannst du Probleme schon während der Entwicklung beheben.

Beispiel: ESLint-Fehler im Code erkennen

Ein einfacher JavaScript-Code mit einem Linting-Fehler:

const unusedVariable = 'I am not used';
console.log('Hello World')

Mit der Regel no-unused-vars wird eine Warnung ausgegeben, dass unusedVariable deklariert, aber nicht verwendet wird.

Mit ESLint kannst du so konsistente Standards für dein Projekt etablieren und Fehler vermeiden, bevor sie in der Produktion auftreten.

Was ist Prettier?

Prettier ist ein Code-Formatierungstool, das sicherstellt, dass dein Code unabhängig von persönlichen Stilvorlieben einheitlich formatiert wird. Im Gegensatz zu ESLint, das sich auf die Erkennung von Codefehlern und potenziellen Problemen konzentriert, liegt der Fokus von Prettier auf der Ästhetik und Konsistenz deines Codes.

Wichtige Funktionen von Prettier

1. Automatische Codeformatierung
   • Prettier formatiert deinen Code automatisch, basierend auf konfigurierten Richtlinien.
   • Beispiel: Ein falsch eingerückter oder chaotisch formatierter Code wird in eine konsistente und lesbare Struktur gebracht.
2. Sprachübergreifende Unterstützung
   • Unterstützt viele Programmiersprachen, darunter JavaScript, TypeScript, JSON, CSS, Markdown und mehr.
3. Einfache Integration
   • Prettier lässt sich leicht in Code-Editoren wie VS Code integrieren und kann automatisch beim Speichern von Dateien angewendet werden.
   • Mit ESLint kann Prettier kombiniert werden, um Konflikte zwischen Linting und Formatierung zu vermeiden.

Unterschiede zu ESLint

• Prettier: Fokus auf Codeformatierung (z. B. Einrückungen, Zeilenumbrüche, Klammern).
• ESLint: Fokus auf Codequalität und die Einhaltung von Best Practices.
• Kombination: Durch die Integration von Prettier mit ESLint kannst du sowohl Codequalität als auch Formatierung sicherstellen.

Beispiel: Automatische Formatierung mit Prettier

Vor der Formatierung:

function greet(name:string){console.log("Hello "+name+"!")}

Nach der Formatierung mit Prettier:

function greet(name: string) {
  console.log(`Hello ${name}!`);
}

Vorteile von Prettier

1. Zeitersparnis: Entwickler müssen sich nicht mehr um Formatierungsdetails kümmern.
2. Konsistenz: Der gesamte Code im Projekt folgt denselben Formatierungsregeln.
3. Einfache Bedienung: Prettier arbeitet automatisch und sorgt für einheitliche Ergebnisse.

Mit Prettier stellst du sicher, dass dein Code sauber und lesbar bleibt, unabhängig davon, wie viele Entwickler am Projekt arbeiten.

Einrichtung von ESLint in Next.js

ESLint ist in Next.js standardmäßig integriert, wodurch du direkt von den Linting-Regeln profitieren kannst, ohne zusätzliche Konfigurationen vornehmen zu müssen. Dies macht den Einstieg besonders einfach.

Automatische Einrichtung bei neuen Projekten

Wenn du ein neues Next.js-Projekt erstellst, wird ESLint automatisch eingerichtet:

npx create-next-app@latest my-next-app

Während des Setups wirst du gefragt, ob du ESLint hinzufügen möchtest. Wenn du diese Option bestätigst, wird eine Standardkonfiguration generiert, die auf die Bedürfnisse von Next.js zugeschnitten ist.

Manuelle Installation

Falls ESLint in einem bestehenden Projekt noch nicht aktiviert ist, kannst du es manuell hinzufügen:

1. Installiere die benötigten Pakete:

npm install eslint eslint-config-next --save-dev  

2. Füge eine ESLint-Konfigurationsdatei hinzu (z. B. .eslintrc.json oder .eslintrc.js):Beispiel: .eslintrc.json

{  
  "extends": "next/core-web-vitals",  
  "rules": {  
    "react/no-unescaped-entities": "off",  
    "@next/next/no-img-element": "warn"  
  }  
}  

Wichtige Next.js-spezifische Regeln

Das Plugin eslint-plugin-next bietet spezielle Regeln, die auf Next.js-Projekte abgestimmt sind:

• @next/next/no-img-element: Verhindert die Verwendung von <img> und empfiehlt stattdessen <Image> von Next.js.
• @next/next/no-head-element: Warnt vor der Verwendung von <head> und schlägt die Verwendung von next/head vor.
• @next/next/no-html-link-for-pages: Vermeidet <a> für interne Links und empfiehlt next/link.

Diese Regeln verbessern die Performance, Zugänglichkeit und die allgemeine Konsistenz in deinem Next.js-Projekt.

ESLint während des Builds ausführen

Next.js führt ESLint automatisch aus, wenn du dein Projekt baust:

npm run build

Mit ESLint hast du die Möglichkeit, potenzielle Fehler frühzeitig zu erkennen und eine konsistente Codequalität in deinem Next.js-Projekt sicherzustellen.

Einrichtung von Prettier in Next.js

Prettier sorgt dafür, dass dein Code automatisch einheitlich formatiert wird. In Kombination mit ESLint kannst du sowohl die Codequalität als auch die Konsistenz sicherstellen. Die Integration von Prettier in ein Next.js-Projekt ist einfach und bietet viele Vorteile.

Installation von Prettier

Führe den folgenden Befehl aus, um Prettier und die notwendigen Pakete zu installieren:

npm install --save-dev prettier eslint-config-prettier

Zusätzlich wird das Paket eslint-config-prettier benötigt, um Konflikte zwischen ESLint und Prettier zu vermeiden. Dieses Paket deaktiviert alle ESLint-Regeln, die mit der Formatierung kollidieren könnten.

Prettier-Konfigurationsdatei hinzufügen

Erstelle eine Konfigurationsdatei für Prettier (z. B. .prettierrc) im Stammverzeichnis deines Projekts:Beispiel: .prettierrc

{
  "semi": true,
  "singleQuote": true,
  "trailingComma": "all",
  "printWidth": 80
}

Falls du zusätzlich zu JSON eine erklärende Dokumentation möchtest, kannst du auch .prettierrc.js verwenden:Beispiel: .prettierrc.js

module.exports = {
  semi: true, // Fügt Semikolons am Ende jeder Zeile hinzu.
  singleQuote: true, // Verwendet einfache Anführungszeichen.
  trailingComma: 'all', // Setzt ein Komma nach der letzten Eigenschaft in Objekten und Arrays.
  printWidth: 80, // Maximale Zeilenlänge.
};

Integration von Prettier in ESLint

Um sicherzustellen, dass ESLint und Prettier nahtlos zusammenarbeiten, füge prettier zu den extends in deiner ESLint-Konfiguration hinzu:Beispiel: .eslintrc.json

{
  "extends": ["next/core-web-vitals", "prettier"],
  "rules": {
    "@next/next/no-img-element": "warn"
  }
}

Automatische Formatierung beim Speichern

Um Prettier bei jedem Speichern in deinem Code-Editor auszuführen, installiere die Prettier-Erweiterung für Visual Studio Code (oder deinen bevorzugten Editor). Stelle sicher, dass du folgende Einstellung aktivierst:

"editor.formatOnSave": true

Prettier manuell ausführen

Du kannst Prettier auch manuell über das Terminal ausführen:

npx prettier --write .

Dieser Befehl formatiert alle Dateien im Projekt.

Konflikte zwischen ESLint und Prettier vermeiden

Das Paket eslint-config-prettier deaktiviert alle formatierungsbezogenen Regeln von ESLint, sodass Prettier die alleinige Kontrolle über die Codeformatierung hat. Dies stellt sicher, dass beide Tools konfliktfrei zusammenarbeiten.

Mit Prettier kannst du deinen Code automatisch sauber und einheitlich halten, ohne Zeit für manuelle Formatierungen aufzuwenden.

Automatisierung mit Lint-Staged

Um sicherzustellen, dass dein Code immer den gewünschten Formatierungs- und Qualitätsstandards entspricht, kannst du Lint-Staged verwenden. Dieses Tool führt Linting und Formatierung automatisch auf allen geänderten Dateien aus, bevor sie per Git commitet werden. Dies reduziert den manuellen Aufwand und verhindert, dass schlecht formatierter oder fehlerhafter Code in das Repository gelangt.

Installation von Lint-Staged

Installiere Lint-Staged und Husky, um Git-Hooks für die Automatisierung zu verwenden:

npm install --save-dev lint-staged husky

Einrichtung von Husky

Husky hilft dir, Git-Hooks in deinem Projekt zu verwalten. Initialisiere Husky mit folgendem Befehl:

npx husky install

Füge ein Pre-Commit-Hook hinzu, das Lint-Staged ausführt:

npx husky add .husky/pre-commit "npx lint-staged"

Konfiguration von Lint-Staged

Erstelle eine Konfigurationsdatei für Lint-Staged (z. B. .lintstagedrc.js) im Stammverzeichnis deines Projekts:Beispiel: .lintstagedrc.js

const path = require('path');

const buildEslintCommand = (filenames) =>
  `next lint --fix --file ${filenames
    .map((file) => path.relative(process.cwd(), file))
    .join(' --file ')}`;

module.exports = {
  '*.{js,jsx,ts,tsx}': [buildEslintCommand, 'prettier --write'],
};

Diese Konfiguration stellt sicher, dass sowohl ESLint als auch Prettier auf alle geänderten Dateien angewendet werden:

• next lint --fix behebt Linting-Probleme in den betroffenen Dateien.
• prettier --write formatiert die Dateien gemäß den Prettier-Regeln.

Workflow mit Lint-Staged

1. Bearbeite deinen Code wie gewohnt.
2. Führe git add aus, um Änderungen zu stagen:

git add .  

3. Wenn du git commit ausführst, wird Lint-Staged automatisch ausgeführt und analysiert die gestagten Dateien. Wenn Probleme gefunden werden, stoppt der Commit-Prozess, sodass du die Fehler beheben kannst:

git commit -m "Dein Commit-Text"  

Vorteile von Lint-Staged

1. Effizienz: Nur geänderte Dateien werden analysiert und formatiert, was Zeit spart.
2. Sicherstellung der Codequalität: Fehlerhafter Code wird vor dem Commit blockiert.
3. Automatisierung: Reduziert den manuellen Aufwand und sorgt für konsistente Ergebnisse.

Mit Lint-Staged und Husky kannst du sicherstellen, dass jeder Commit den höchsten Qualitätsstandards entspricht, ohne dass Entwickler zusätzliche Schritte ausführen müssen.

Nützliche Regeln und Best Practices

Die Kombination aus ESLint und Prettier bietet dir eine solide Grundlage, um die Qualität und Konsistenz deines Codes sicherzustellen. Mit den richtigen Regeln und Best Practices kannst du das Maximum aus diesen Tools herausholen und dein Next.js-Projekt effizienter machen.

Nützliche ESLint-Regeln für Next.js

Next.js bringt mit dem Plugin eslint-plugin-next viele nützliche Regeln mit, die speziell auf Next.js zugeschnitten sind. Hier sind einige wichtige Regeln:

1. Vermeidung von <img>-Tags
   • Regel: @next/next/no-img-element
   • Verwendet das optimierte <Image>-Tag von Next.js, um bessere Performance und LCP-Werte (Largest Contentful Paint) zu erreichen.
     Beispiel:

// Vermeide:  
<img src="/image.jpg" alt="Beispiel" />  
// Nutze stattdessen:  
import Image from 'next/image';  
<Image src="/image.jpg" alt="Beispiel" width={500} height={500} />  

2. Nutzung von next/link für interne Links
   • Regel: @next/next/no-html-link-for-pages
   • Stellt sicher, dass du für interne Seitenlinks das <Link>-Tag von Next.js verwendest, um Client-seitige Navigation zu ermöglichen.
     Beispiel:

// Vermeide:  
<a href="/about">Über uns</a>  
// Nutze stattdessen:  
import Link from 'next/link';  
<Link href="/about">Über uns</Link>  

3. Keine Verwendung von <head> direkt im Code
   • Regel: @next/next/no-head-element
   • Erzwingt die Nutzung von next/head für Metadaten und <title>-Tags.
     Beispiel:

// Vermeide:  
<head>  
  <title>Meine Seite</title>  
</head>  
// Nutze stattdessen:  
import Head from 'next/head';  
<Head>  
  <title>Meine Seite</title>  
</Head>  

Sinnvolle Prettier-Optionen

Hier sind einige empfohlene Prettier-Einstellungen für Next.js-Projekte:

• Semikolons verwenden: "semi": true
• Einfache Anführungszeichen bevorzugen: "singleQuote": true
• Zeilenumbruch bei 80 Zeichen: "printWidth": 80
• Abschließende Kommata: "trailingComma": "all"

Diese Einstellungen sorgen für sauberen, konsistenten und gut lesbaren Code.

Best Practices für Linting und Codeformatierung

1. Regeln regelmäßig überprüfen
   Passe deine ESLint- und Prettier-Konfiguration an die Anforderungen deines Projekts an. Entferne nicht mehr benötigte Regeln und füge neue hinzu, wenn sich dein Projekt weiterentwickelt.
2. Automatisierte Prüfungen einrichten
   Nutze Lint-Staged und CI/CD-Tools, um Linting und Formatierung automatisch auszuführen. So wird sichergestellt, dass nur sauberer Code in das Repository gelangt.
3. Teamkonventionen definieren
   Stelle sicher, dass alle Teammitglieder die gleichen Regeln und Formatierungen verwenden. Dokumentiere die Konventionen in der Projekt-Dokumentation.
4. Editor-Integration verwenden
   Integriere ESLint und Prettier in deinen Code-Editor (z. B. VS Code), um Warnungen und automatische Formatierung direkt beim Schreiben zu erhalten.
5. Prettier und ESLint kombinieren
   Vermeide Konflikte zwischen den beiden Tools, indem du eslint-config-prettier verwendest.

Mit diesen Regeln und Best Practices stellst du sicher, dass dein Code konsistent, sauber und leicht wartbar bleibt.

Integration in CI/CD-Pipelines

Die Integration von ESLint und Prettier in deine Continuous Integration/Continuous Deployment (CI/CD)-Pipeline ist ein entscheidender Schritt, um sicherzustellen, dass nur sauberer und fehlerfreier Code in die Produktion gelangt. Dieser Prozess stellt sicher, dass jedes Commit und jeder Pull Request automatisch geprüft wird, bevor Änderungen in das Haupt-Repository integriert werden.

Vorteile der Integration

1. Automatische Qualitätssicherung
   Verhindert, dass fehlerhafter oder schlecht formatierter Code in das Repository gelangt.
2. Teamweite Konsistenz
   Stellt sicher, dass alle Entwickler denselben Standards folgen.
3. Frühes Erkennen von Problemen
   Linting- und Formatierungsprobleme werden erkannt, bevor der Code deployed wird.

Beispiel: GitHub Actions für ESLint und Prettier

GitHub Actions bietet eine einfache Möglichkeit, Linting und Formatierung in deine CI/CD-Pipeline zu integrieren.

1. Erstelle eine Datei .github/workflows/lint.yml mit folgendem Inhalt:

name: Lint and Format

on:
  pull_request:
    branches:
      - main
  push:
    branches:
      - main

jobs:
  lint:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout Repository
        uses: actions/checkout@v3

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 18

      - name: Install Dependencies
        run: npm install

      - name: Run ESLint
        run: npm run lint

      - name: Run Prettier Check
        run: npx prettier --check .

Linting und Formatierung im CI-Prozess

1. npm run lint:
   Führt ESLint aus und überprüft den Code auf potenzielle Fehler und Regelverstöße.
2. npx prettier --check .:
   Prüft, ob der Code korrekt formatiert ist. Falls nicht, schlägt die Aktion fehl, und du kannst die Probleme beheben.

Automatisches Formatieren im CI

Falls du möchtest, dass Prettier den Code während des CI-Prozesses automatisch formatiert, kannst du stattdessen --write verwenden:

- name: Run Prettier Fix
  run: npx prettier --write .

Beachte, dass diese Änderungen in der Regel nicht direkt in das Repository übernommen werden und manuell committet werden müssen.

Pipeline für große Projekte optimieren

Für größere Projekte kannst du folgende Strategien verwenden:

1. Lint-Staged für Teilprüfungen:
   Analysiere nur die Dateien, die seit dem letzten Commit geändert wurden.
2. Parallele Ausführung:
   Führe ESLint und Prettier gleichzeitig in verschiedenen CI-Jobs aus, um Zeit zu sparen.

Die Integration von ESLint und Prettier in deine CI/CD-Pipeline sorgt für eine automatisierte Qualitätssicherung und verhindert, dass fehlerhafter oder inkonsistenter Code in die Produktion gelangt. Mit Tools wie GitHub Actions kannst du Linting und Formatierung einfach und effizient in deinen Entwicklungsprozess integrieren.

Fazit

Eine konsistente Codebasis ist der Schlüssel zu einer effizienten und fehlerfreien Softwareentwicklung, besonders bei modernen Frameworks wie Next.js. ESLint und Prettier bieten zusammen eine leistungsstarke Lösung, um sowohl die Codequalität als auch die Formatierung sicherzustellen.

Zusammenfassung:

• ESLint analysiert deinen Code auf potenzielle Fehler und Regelverstöße, sorgt für eine höhere Codequalität und kann Builds bei Problemen blockieren.
• Prettier garantiert eine einheitliche Formatierung und spart Zeit, indem manuelle Anpassungen überflüssig werden.
• Die Kombination beider Tools stellt sicher, dass dein Code nicht nur korrekt, sondern auch sauber und konsistent ist.

Empfehlungen:

1. Automatisierung nutzen:
   Richte Tools wie Lint-Staged und Husky ein, um Linting und Formatierung bei jedem Commit automatisch auszuführen.
2. Integrierte CI/CD-Prozesse:
   Baue Linting und Formatierung in deine CI/CD-Pipeline ein, um Qualitätssicherungen zu automatisieren.
3. Teamweite Konventionen:
   Stelle sicher, dass alle Teammitglieder dieselben Regeln und Tools verwenden, um Konflikte zu vermeiden.

Mit der richtigen Einrichtung von ESLint und Prettier schaffst du eine saubere, wartbare und konsistente Codebasis, die dir und deinem Team Zeit und Ressourcen spart.