Accélérer ESLint dans les projets Next.js avec Flat Config et GitLab CI

Cet article se concentre sur GitLab et montre comment rendre ESLint rapide et prévisible dans un projet Next.js et TypeScript avec le format moderne flat config.

Nous allons :

• Utiliser des exclusions globales pour éviter les dossiers volumineux ou générés.
• Conserver une tâche GitLab CI simple qui exécute npm run lint.

Pourquoi Flat Config ?

Le système flat config est le format de configuration de nouvelle génération d’ESLint. Il remplace .eslintrc et vise davantage de rapidité, de clarté et de prévisibilité.

Il :

• Fonctionne nativement avec les modules ES.
• Simplifie les exclusions globales et les motifs ciblant des fichiers.
• S’intègre facilement à Next.js, next lint le prenant en charge nativement.

Exclusions globales avec ignores au premier niveau

Définissez un bloc ignores au premier niveau afin qu’ESLint ne traite jamais les répertoires volumineux ou générés :

// 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
]

À quoi correspondent ces dossiers et pourquoi les ignorer ?

• « node_modules/ » → Dépendances, ignorées par défaut par ESLint.
• « .git/ » → Métadonnées de contrôle de version, ignorées par défaut par ESLint.
• « .next/ » → Résultat généré de la construction Next.js, côté serveur et client.
• « out/ » → Résultat généré de l’export statique.
• « dist/ », « build/ » → Résultats générés de compilation ou d’assemblage.
• « coverage/ » → Rapports générés de couverture des tests.

En les excluant, ESLint évite de parcourir des fichiers sans intérêt pour l’analyse, ce qui accélère le linting.

Scripts de package.json

Gardez des scripts simples et adaptés à la CI :

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

next lint intègre automatiquement ESLint avec des réglages Next.js pertinents et respecte votre flat config.

GitLab CI : simple et rapide

Voici une configuration GitLab CI minimale qui installe les dépendances et exécute ESLint :

# .gitlab-ci.yml

stages:
  - lint

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

Remarques

• npm ci garantit des installations reproductibles à partir de votre fichier de verrouillage.
• La tâche de linting reste légère et s’appuie entièrement sur votre configuration ESLint au format flat config pour gagner en rapidité. Vous disposez ainsi d’une configuration ESLint claire, rapide et maintenable pour votre projet Next.js dans GitLab CI.