Générateur d'ESLintrc

Ce que contient la configuration générée

Le générateur part toujours de eslint:recommended et ajoute exactement ce qu’impliquent vos sélections :

• env avec browser et/ou node, plus es2022
• @typescript-eslint/parser et plugin:@typescript-eslint/recommended lorsque TypeScript est activé
• plugin:react/recommended lorsque React est activé
• no-console et no-unused-vars définies sur warn

Le résultat est un simple objet JSON au format classique .eslintrc.json, prêt à coller et à enrichir avec vos propres règles.

Configuration plate vs héritée

ESLint 9 a déprécié le format .eslintrc.* au profit de la configuration plate (eslint.config.js). Principales différences :

Les nouveaux projets doivent utiliser la configuration plate. Les projets existants peuvent rester sur l’héritée jusqu’à la version 10.x, mais la migration est recommandée.

Écosystème de plugins

Plugins typiques pour les projets React/TS :

@typescript-eslint/eslint-plugin
@typescript-eslint/parser
eslint-plugin-react
eslint-plugin-react-hooks
eslint-plugin-jsx-a11y
eslint-plugin-import
eslint-config-prettier

Cela fait six paquets pour une configuration modérément opinionnée. Le générateur ajoute ceux que vous sélectionnez, donc vous n’installez que ce que la configuration référence.

Coexistence avec Prettier

Prettier gère le formatage ; ESLint gère la correction et le style au-delà du formatage. Pour éviter les conflits :

1. Installez eslint-config-prettier et ajoutez-le comme DERNIER élément dans vos extends/config.
2. Cela désactive chaque règle ESLint qui entre en conflit avec la sortie de Prettier.
3. Exécutez Prettier séparément (à l’enregistrement dans l’éditeur, dans le hook de pré-commit, dans CI).

Ne pas utiliser eslint-plugin-prettier dans les nouveaux projets ; cela ralentit ESLint en exécutant Prettier à l’intérieur d’ESLint. Séparez les deux outils.

Conseils pour l’ajustement des règles

• Commencez lâche, resserrez progressivement. Activez les avertissements avant les erreurs.
• Remplacez pour les tests. Les fichiers de test ont souvent besoin d’une relaxation de no-unused-expressions et des globals Jest disponibles.
• Remplacez pour les scripts. Les scripts de construction peuvent nécessiter des globals Node sans ajouter env: node globalement.
• Documentez les remplacements. Chaque remplacement de règle mérite un commentaire expliquant pourquoi.

Configuration qui correspond à votre éditeur

VS Code nécessite l’extension ESLint installée et configurée. Ajoutez ceci à vos paramètres de workspace pour auto-correction à l’enregistrement :

{
  "editor.codeActionsOnSave": { "source.fixAll.eslint": "explicit" },
  "eslint.validate": ["javascript", "typescript", "javascriptreact", "typescriptreact"]
}