- Générateur Config ESLint & Prettier

Générez vos fichiers .eslintrc.json et .prettierrc selon votre stack (React, Angular, Node, Vue). Flat Config v9 supporté. Copiez ou téléchargez vos configs prêtes à l'emploi.

ESLint & Prettier — Guide complet pour vos projets JS/TS

ESLint et Prettier forment le duo incontournable de tout projet JavaScript ou TypeScript sérieux. ESLint détecte les erreurs logiques, les mauvaises pratiques et les violations de style, tandis que Prettier s'occupe exclusivement du formatage du code — indentation, guillemets, virgules… Ce guide vous explique comment configurer ces deux outils de façon optimale selon votre stack, les intégrer à votre éditeur et automatiser leur exécution dans vos pipelines CI/CD.

Pourquoi combiner ESLint et Prettier ?

ESLint peut également formater du code via ses règles de style, mais il est conçu avant tout pour l'analyse statique. Prettier, lui, est un formateur opinionated : il prend vos options de base (largeur de ligne, guillemets, points-virgules) et reformate tout le fichier de façon déterministe. Les deux outils sont complémentaires :

Le package eslint-config-prettier désactive toutes les règles ESLint qui entrent en conflit avec Prettier, permettant aux deux outils de coexister sans se contredire.

Installation et configuration initiale

La procédure d'installation varie selon le format de config ESLint que vous ciblez. La Flat Config (eslint.config.js) est le nouveau standard depuis ESLint v9, mais le format JSON (.eslintrc.json) reste très utilisé pour sa simplicité.

# Installation de base (format JSON, TypeScript)
npm install --save-dev \
  eslint \
  @typescript-eslint/eslint-plugin \
  @typescript-eslint/parser \
  prettier \
  eslint-config-prettier \
  eslint-plugin-prettier

# Initialiser ESLint (assistant interactif)
npx eslint --init

// .eslintrc.json — Config TypeScript de base
{
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 2022,
    "sourceType": "module",
    "project": "./tsconfig.json"
  },
  "plugins": ["@typescript-eslint", "prettier"],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier"  // ← Toujours EN DERNIER pour désactiver les conflits
  ],
  "rules": {
    "prettier/prettier": "error",
    "@typescript-eslint/no-unused-vars": ["error", { "argsIgnorePattern": "^_" }],
    "@typescript-eslint/explicit-function-return-type": "warn"
  }
}

Configuration React + TypeScript

Pour un projet React avec TypeScript, ajoutez les plugins spécifiques à React et aux hooks. La config Airbnb est populaire dans l'écosystème React car elle couvre des règles d'accessibilité JSX et de bonnes pratiques React.

# Dépendances supplémentaires pour React + TypeScript
npm install --save-dev \
  eslint-plugin-react \
  eslint-plugin-react-hooks \
  eslint-plugin-jsx-a11y \
  eslint-import-resolver-typescript

// .eslintrc.json pour React + TypeScript
{
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 2022,
    "sourceType": "module",
    "ecmaFeatures": { "jsx": true }
  },
  "plugins": ["react", "react-hooks", "jsx-a11y", "@typescript-eslint", "prettier"],
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:react/jsx-runtime",         // React 17+ (plus besoin d'importer React)
    "plugin:react-hooks/recommended",
    "plugin:jsx-a11y/recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier"
  ],
  "settings": {
    "react": { "version": "detect" }
  },
  "rules": {
    "react/prop-types": "off",          // TypeScript gère les types
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn"
  }
}

Configuration Angular avec @angular-eslint

Angular dispose de son propre écosystème ESLint via le package @angular-eslint. La méthode recommandée est d'utiliser la schematic Angular CLI qui configure tout automatiquement :

# Ajouter ESLint à un projet Angular existant
ng add @angular-eslint/schematics

# Migrate depuis TSLint (projets anciens)
ng g @angular-eslint/schematics:convert-tslint-to-eslint

# Vérifier la configuration générée
cat .eslintrc.json

// .eslintrc.json Angular (extrait des règles clés)
{
  "root": true,
  "overrides": [
    {
      "files": ["*.ts"],
      "parser": "@typescript-eslint/parser",
      "parserOptions": { "project": ["tsconfig.json"] },
      "extends": [
        "plugin:@angular-eslint/recommended",
        "plugin:@angular-eslint/template/process-inline-templates",
        "prettier"
      ],
      "rules": {
        "@angular-eslint/directive-selector": ["error", { "type": "attribute", "prefix": "app", "style": "camelCase" }],
        "@angular-eslint/component-selector": ["error", { "type": "element", "prefix": "app", "style": "kebab-case" }]
      }
    },
    {
      "files": ["*.html"],
      "extends": ["plugin:@angular-eslint/template/recommended"]
    }
  ]
}

Flat Config ESLint v9 — le nouveau format

Depuis ESLint v9, le Flat Config (eslint.config.js ou eslint.config.mjs) remplace le format .eslintrc.*. Il utilise des imports ES natifs et supprime le concept de cascade de configs, ce qui le rend plus prévisible :

// eslint.config.js — Flat Config (ESLint v9+)
import js from '@eslint/js';
import typescript from '@typescript-eslint/eslint-plugin';
import tsParser from '@typescript-eslint/parser';
import prettier from 'eslint-config-prettier';

export default [
  // Config de base JS
  js.configs.recommended,

  // Config TypeScript
  {
    files: ['**/*.ts', '**/*.tsx'],
    languageOptions: {
      parser: tsParser,
      parserOptions: {
        project: './tsconfig.json',
        ecmaVersion: 2022,
        sourceType: 'module',
      },
    },
    plugins: { '@typescript-eslint': typescript },
    rules: {
      ...typescript.configs.recommended.rules,
      '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
    },
  },

  // Désactiver les règles qui conflictent avec Prettier (TOUJOURS EN DERNIER)
  prettier,

  // Fichiers à ignorer
  {
    ignores: ['dist/**', 'node_modules/**', 'coverage/**', '*.min.js'],
  },
];

Toutes les options Prettier décryptées

Prettier est volontairement peu configurable. Voici les options disponibles et leurs effets concrets :

// .prettierrc — Toutes les options disponibles commentées
{
  "printWidth": 100,         // Longueur max d'une ligne avant retour à la ligne
  "tabWidth": 2,             // Nombre d'espaces par niveau d'indentation
  "useTabs": false,          // true = tabulations, false = espaces
  "semi": true,              // Ajouter ; en fin de ligne
  "singleQuote": true,       // Guillemets simples (false = doubles)
  "quoteProps": "as-needed", // Guillemets sur les clés d'objets : "as-needed"|"consistent"|"preserve"
  "jsxSingleQuote": false,   // Guillemets dans JSX (false = doubles recommandés)
  "trailingComma": "all",    // Virgule finale : "all"|"es5"|"none"
  "bracketSpacing": true,    // Espaces dans { foo: bar } (false = {foo: bar})
  "bracketSameLine": false,  // > de JSX sur la même ligne que le dernier attribut
  "arrowParens": "always",   // Parenthèses arrow : "always" = (x) => x | "avoid" = x => x
  "endOfLine": "lf",         // Fin de ligne : "lf"|"crlf"|"cr"|"auto"
  "singleAttributePerLine": false // Un attribut JSX/HTML par ligne
}

Intégration VS Code — format on save

L'intégration VS Code est essentielle pour que le formatage s'applique automatiquement à chaque sauvegarde. Installez les extensions ESLint et Prettier - Code formatter, puis configurez .vscode/settings.json :

// .vscode/settings.json
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.formatOnPaste": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"  // Correction ESLint à la sauvegarde
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"]
}

Scripts npm et intégration CI/CD

Ajoutez des scripts npm pour lancer ESLint et Prettier manuellement ou dans vos pipelines. Le flag --exit-code de Prettier fait échouer le processus si des fichiers ne sont pas formatés — parfait pour bloquer un merge request.

// package.json — Scripts recommandés
{
  "scripts": {
    "lint": "eslint . --ext .ts,.tsx,.js,.jsx",
    "lint:fix": "eslint . --ext .ts,.tsx,.js,.jsx --fix",
    "format": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,css,scss,md}\"",
    "format:check": "prettier --check \"src/**/*.{ts,tsx,js,jsx,json,css,scss,md}\"",
    "lint:all": "npm run lint && npm run format:check"
  }
}

# .github/workflows/lint.yml — GitHub Actions
name: Lint & Format Check

on: [push, pull_request]

jobs:
  lint:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'
      - run: npm ci
      - run: npm run lint        # ESLint
      - run: npm run format:check # Prettier (sans --write)

Automatisation avec Husky et lint-staged

Husky ajoute des git hooks pour lancer ESLint et Prettier avant chaque commit. lint-staged limite l'analyse aux fichiers modifiés, rendant les pré-commits ultra-rapides même sur de gros projets.

# Installation
npm install --save-dev husky lint-staged

# Initialiser Husky
npx husky init

# Le hook pre-commit est créé dans .husky/pre-commit
echo "npx lint-staged" > .husky/pre-commit

// package.json — Configuration lint-staged
{
  "lint-staged": {
    "*.{ts,tsx}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.{js,jsx}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.{json,css,scss,md}": [
      "prettier --write"
    ]
  }
}

FAQ — ESLint & Prettier

// eslint-disable-next-line @typescript-eslint/no-explicit-any
const data: any = fetchRawData();

/* eslint-disable no-console */
console.log('Debug temporaire');
/* eslint-enable no-console */

// packages/eslint-config/index.js
module.exports = {
  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
  rules: { /* règles communes */ }
};

// apps/mon-app/.eslintrc.json
{ "extends": ["@mon-org/eslint-config"] }

Conclusion

Configurer ESLint et Prettier correctement en début de projet est un investissement qui se rentabilise rapidement : moins de revues de code sur le style, moins de bugs évidents, et une codebase cohérente même avec de nombreux contributeurs. Utilisez ce générateur pour démarrer avec une config adaptée à votre stack, puis affinez progressivement les règles en fonction des besoins de votre équipe.

N'oubliez pas d'automatiser le linting via Husky + lint-staged pour les pré-commits et de l'intégrer à votre pipeline CI/CD pour bloquer les merges non conformes. Consultez la documentation officielle ESLint et Prettier Docs pour les options avancées.

Voir aussi

Tools

Générateur de méta tags & Open Graph — SEO & partage optimal

Tools

Générateur de Scripts Vidéo — Créez des scripts YouTube, Podcast & TikTok

Tools

Calculateur de Délais & Planning Projet — Estimez votre planning

Tools

Générateur de CV en ligne — Portfolio & PDF

Tools

Générateur de Guard & Resolver Angular

Tools

Formateur & Validateur SQL en ligne

Tools

Calculateur TJM Freelance

Tools

Générateur Animations CSS Keyframes

Tools

Générateur UUID / GUID en ligne

Tools

Whois — Informations de domaine, DNS et disponibilité

Tools

Minifier HTML en ligne : optimiser vos pages

Tools

Minifier JS en ligne : compresser votre code

Tools

Encodeur / Décodeur URL en ligne

Tools

Générateur de favicon en ligne

Tools

Générateur de Palettes Couleurs — Créer des palettes WCAG harmonieuses

Tools

Minifier CSS en ligne : compresser vos fichiers

Tools

XML to JSON — Convertir XML en JSON en ligne

Tools

Image to Base64 — Convertir une image en Base64 en ligne

Tools

Générateur de mot de passe sécurisé en ligne

Tools

Convertisseur CSV ⇔ JSON en ligne