ESLint in Next.js-Projekten mit Flat Config und GitLab CI beschleunigen

Dieser Beitrag konzentriert sich auf GitLab und zeigt, wie ESLint in einem Next.js + TypeScript-Projekt mit dem modernen Flat-Config-Format schnell und vorhersehbar wird.

Wir werden:

• Globale Ausschlussmuster verwenden, um umfangreiche oder generierte Ordner zu überspringen.
• Einen einfachen GitLab-CI-Job beibehalten, der npm run lint ausführt.

Warum Flat Config?

Das Flat-Config-System ist das Konfigurationsformat der nächsten Generation von ESLint. Es ersetzt .eslintrc und ist auf mehr Geschwindigkeit, Klarheit und Vorhersehbarkeit ausgelegt.

Es:

• Funktioniert nativ mit ES-Modulen.
• Vereinfacht globale Ausschlussmuster und gezielte Dateimuster deutlich.
• Integriert sich reibungslos in Next.js (next lint unterstützt es direkt).

Globale Ausschlussmuster (ignores auf oberster Ebene)

Definiere einen ignores-Block auf oberster Ebene, damit ESLint umfangreiche oder generierte Verzeichnisse gar nicht erst berücksichtigt:

// eslint.config.mjs (flat config)

/** @type {import("eslint").Linter.Config[]} */
export default [
  js.configs.recommended,

  {
    // ESLint already ignores ["**/node_modules/", ".git/"] by default, reference: https://eslint.org/docs/latest/use/configure/configuration-files#globally-ignoring-files-with-ignores
    // so you do NOT need to list them here.
    // The folders below are project-specific outputs we also want to ignore globally.
    ignores: ['.next/**', 'out/**', 'dist/**', 'build/**', 'coverage/**'],
  },
  { ... }, // ... other configuration object, inherit global ignores
]

Was diese Ordner enthalten (und warum sie ausgeschlossen werden)

• "node_modules/" → Abhängigkeiten (von ESLint standardmäßig ausgeschlossen).
• ".git/" → Metadaten der Versionsverwaltung (von ESLint standardmäßig ausgeschlossen).
• ".next/" → Generierte Next.js-Build-Ausgabe (Server/Client).
• "out/" → Generierte Ausgabe des statischen Exports.
• "dist/", "build/" → Generierte kompilierte oder gebündelte Ausgabe.
• "coverage/" → Generierte Berichte zur Testabdeckung.

Durch diese Ausschlüsse vermeidet ESLint das Durchlaufen irrelevanter Dateien. Das führt zu schnelleren Lint-Durchläufen.

Skripte in package.json

Halte Skripte einfach und CI-freundlich:

{
  "scripts": {
    "lint": "next lint"
  }
}

next lint integriert ESLint automatisch mit sinnvollen Next.js-Voreinstellungen und berücksichtigt deine Flat Config.

GitLab CI: Einfach und schnell

Hier ist eine minimale GitLab-CI-Konfiguration, die Abhängigkeiten installiert und ESLint ausführt:

# .gitlab-ci.yml

stages:
  - lint

lint:
  stage: lint
  image: node:20-alpine
  script:
    - npm ci
    - npm run lint

Hinweise

• npm ci sorgt für reproduzierbare Installationen (auf Basis deiner Lockdatei).
• Der Lint-Job bleibt leichtgewichtig und verlässt sich für seine Geschwindigkeit vollständig auf deine flache ESLint-Konfiguration. Das ist alles: eine klare, schnelle und wartbare ESLint-Einrichtung für dein Next.js-Projekt auf GitLab CI.