ESLint : React, Astro et Next.js

Chaque framework a son plugin ou sa configuration prête à l’emploi. Les exemples supposent TypeScript (TypeScript) ; retirer les lignes tseslint pour du JavaScript.

React (avec Vite)

npm install -D eslint @eslint/js globals typescript-eslint \
  eslint-plugin-react-hooks eslint-plugin-react-refresh eslint-plugin-jsx-a11y

eslint.config.js :

import js from '@eslint/js';
import globals from 'globals';
import reactHooks from 'eslint-plugin-react-hooks';
import reactRefresh from 'eslint-plugin-react-refresh';
import jsxA11y from 'eslint-plugin-jsx-a11y';
import tseslint from 'typescript-eslint';

export default tseslint.config(
  { ignores: ['dist/', 'coverage/'] },
  js.configs.recommended,
  ...tseslint.configs.recommended,
  jsxA11y.flatConfigs.recommended,
  {
    files: ['**/*.{ts,tsx}'],
    languageOptions: { globals: globals.browser },
    plugins: { 'react-hooks': reactHooks, 'react-refresh': reactRefresh },
    rules: {
      ...reactHooks.configs.recommended.rules,
      'react-refresh/only-export-components': [
        'warn',
        { allowConstantExport: true },
      ],
    },
  },
);

Plugin	Rôle
`eslint-plugin-react-hooks`	Indispensable : `rules-of-hooks` (hooks appelés correctement) et `exhaustive-deps` (dépendances de `useEffect` complètes)
`eslint-plugin-react-refresh`	Garde le rechargement à chaud de Vite fonctionnel
`eslint-plugin-jsx-a11y`	Accessibilité (images sans `alt`, libellés absents, éléments cliquables non natifs)
`eslint-plugin-react`	Règles propres à React (clés de liste, props) : utile surtout avec JavaScript, TypeScript couvre une partie

Les règles react-hooks évitent des erreurs qui n’apparaissent qu’à l’exécution (voir React : état et effets). La forme exacte de la configuration de eslint-plugin-react-hooks dépend de sa version : suivre la documentation du paquet installé.

Règles utiles :

rules: {
  'react-hooks/rules-of-hooks': 'error',
  'react-hooks/exhaustive-deps': 'warn',
  'jsx-a11y/alt-text': 'error',
  'jsx-a11y/anchor-is-valid': 'error',
  'jsx-a11y/click-events-have-key-events': 'error',
}

Astro

npm install -D eslint @eslint/js globals typescript-eslint eslint-plugin-astro

import js from '@eslint/js';
import globals from 'globals';
import astro from 'eslint-plugin-astro';
import tseslint from 'typescript-eslint';

export default tseslint.config(
  { ignores: ['dist/', '.astro/', 'node_modules/'] },
  js.configs.recommended,
  ...tseslint.configs.recommended,
  ...astro.configs.recommended,
  {
    languageOptions: { globals: { ...globals.browser, ...globals.node } },
  },
);

eslint-plugin-astro analyse les fichiers .astro : frontmatter, expressions du gabarit et balises <script>. Il propose aussi des règles d’accessibilité : astro.configs['jsx-a11y-recommended'] (nécessite eslint-plugin-jsx-a11y). Voir Astro : composants et layouts.

Compléments :

npx astro check            # types et diagnostics des composants Astro
npx eslint .               # analyse du code

astro check (types) et ESLint (qualité) se complètent. Le script de ce site s’écrit par exemple : "check": "astro check && prettier --check .".

Next.js

Les projets créés avec create-next-app incluent une configuration prête :

npm install -D eslint eslint-config-next

import { FlatCompat } from '@eslint/eslintrc';
import { dirname } from 'node:path';
import { fileURLToPath } from 'node:url';

const compat = new FlatCompat({
  baseDirectory: dirname(fileURLToPath(import.meta.url)),
});

export default [
  ...compat.extends('next/core-web-vitals', 'next/typescript'),
  { ignores: ['.next/', 'out/', 'node_modules/'] },
];

Jeu	Contenu
`next/core-web-vitals`	Règles de Next.js + React + hooks, orientées performance (images, scripts, liens)
`next/typescript`	Règles TypeScript

FlatCompat (paquet @eslint/eslintrc) permet d’utiliser une configuration publiée au format ancien dans un fichier à plat. Les versions récentes de eslint-config-next proposent directement un format à plat : lire la documentation de la version installée. Selon la version de Next.js, la commande next lint peut exister ou avoir été retirée : lancer npx eslint . directement. Voir Next.js : installation.

Règles utiles de Next.js : @next/next/no-img-element (préférer next/image), @next/next/no-html-link-for-pages (utiliser next/link).

Node.js (serveur, Express)

npm install -D eslint-plugin-n

import nodePlugin from 'eslint-plugin-n';

export default [
  nodePlugin.configs['flat/recommended-module'],
  { rules: { 'n/no-process-exit': 'off' } },
];

eslint-plugin-n détecte les modules Node.js introuvables, les API dépréciées et les fonctions absentes de la version de Node.js déclarée dans engines. Voir Express : sécurité et production.

Règles de sécurité

npm install -D eslint-plugin-security

import security from 'eslint-plugin-security';
export default [security.configs.recommended];

Signale des motifs risqués (eval, expressions régulières coûteuses, accès dynamiques à des propriétés). Produit des faux positifs : les examiner plutôt que les désactiver en bloc. Cela ne remplace ni la validation des entrées ni l’audit des dépendances (npm audit).

Tailwind CSS

npm install -D eslint-plugin-better-tailwindcss

Vérifie l’existence des classes et leur cohérence (selon le plugin et la version de Tailwind CSS 4 choisis) ; le tri des classes se fait avec le plugin Prettier (Prettier : plugins).

Dépannage

Symptôme	Piste
`React Hook "useX" is called conditionally`	Hook dans une condition ou une boucle : le déplacer au niveau supérieur
`React Hook useEffect has a missing dependency`	Ajouter la dépendance, ou restructurer (voir React : état et effets)
`Parsing error` sur un fichier `.astro`	Plugin `eslint-plugin-astro` absent ou configuration non chargée
`Definition for rule '@next/next/…' not found`	Configuration `next` non chargée
`Plugin "react-hooks" was conflicted between …`	Plugin déclaré deux fois sous deux noms : un seul bloc
`Cannot find module 'eslint-plugin-…'`	`npm install -D` du paquet manquant
Configuration du plugin qui ne correspond pas à la documentation	Version du plugin différente : lire la documentation de la version installée
`next lint` introuvable	Utiliser `npx eslint .`

Ubuntu 24.04 et 26.04 : différences à connaître

Aucune.