ESLint : Prettier et éditeur

ESLint et Prettier se recoupent sur le style (guillemets, points-virgules, indentation). Pour éviter les conflits : Prettier s’occupe du formatage, ESLint de la qualité.

Répartition des rôles

Sujet	Outil
Indentation, guillemets, largeur de ligne, virgules finales	Prettier
Variables inutilisées, comparaisons douteuses, promesses non attendues	ESLint
Ordre des classes Tailwind	Prettier (plugin)
Hooks React, accessibilité	ESLint

`eslint-config-prettier`

Ce paquet désactive les règles d’ESLint qui entrent en conflit avec Prettier :

npm install -D eslint-config-prettier

import js from '@eslint/js';
import prettier from 'eslint-config-prettier';

export default [
  js.configs.recommended,
  // ... autres jeux de règles
  prettier, // EN DERNIER : désactive les règles de formatage
];

Le placer en dernier : il doit passer après les jeux qui activent des règles de style. Aucune règle de formatage n’est alors appliquée par ESLint.

Ne pas exécuter Prettier dans ESLint

L’ancien usage de eslint-plugin-prettier (Prettier appelé comme une règle d’ESLint) est déconseillé : plus lent, messages bruyants (chaque différence de format devient une erreur ESLint), et mélange deux rôles. Préférer :

{
  "scripts": {
    "lint": "eslint .",
    "format": "prettier --write .",
    "format:check": "prettier --check .",
    "verifier": "npm run lint && npm run format:check"
  }
}

Deux outils, deux commandes, deux rôles. Voir Prettier : installation.

Ordre d’exécution

Lancer ESLint (avec --fix) avant Prettier : Prettier reformate ce qu’ESLint a corrigé.

npx eslint . --fix && npx prettier --write .

Dans lint-staged (Husky : hooks et lint-staged) :

{
  "lint-staged": {
    "*.{js,jsx,ts,tsx,astro}": ["eslint --fix", "prettier --write"],
    "*.{json,md,css,yaml}": "prettier --write"
  }
}

Règles de style à ne pas activer dans ESLint

Avec Prettier, éviter : indent, quotes, semi, comma-dangle, max-len, object-curly-spacing, arrow-parens… eslint-config-prettier les neutralise. Les règles de style non formatées (nommage, ordre des importations) restent du ressort d’ESLint.

Pour des règles de style en ESLint sans Prettier, le projet @stylistic/eslint-plugin reprend les règles de formatage retirées du noyau d’ESLint ; c’est un choix alternatif (un seul outil), pas un complément de Prettier.

Éditeur : VS Code

Extensions :

Extension	Rôle
ESLint (`dbaeumer.vscode-eslint`)	Soulignement des problèmes en direct, correction rapide
Prettier (`esbenp.prettier-vscode`)	Formatage
Tailwind CSS IntelliSense, Astro	Selon le projet

.vscode/settings.json (versionné pour toute l’équipe) :

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "eslint.useFlatConfig": true,
  "[astro]": { "editor.defaultFormatter": "astro-build.astro-vscode" }
}

Réglage	Effet
`formatOnSave`	Prettier formate à l’enregistrement
`source.fixAll.eslint`	ESLint applique ses corrections automatiques à l’enregistrement
`eslint.useFlatConfig`	Forcer la configuration à plat (par défaut avec ESLint 9)

.vscode/extensions.json recommande les extensions :

{ "recommendations": ["dbaeumer.vscode-eslint", "esbenp.prettier-vscode"] }

Fichiers Astro, Markdown

Vérifier que les types de fichiers souhaités sont pris en compte :

{
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "astro"
  ]
}

Autres éditeurs

Éditeur	Intégration
JetBrains (WebStorm…)	Réglages > Langages > JavaScript > Qualité du code > ESLint ; Prettier dans Outils
Neovim	`nvim-lspconfig` avec `eslint` (`vscode-eslint-language-server`) et `conform.nvim` ou `null-ls` pour Prettier
Vim, Emacs	Greffons ESLint et Prettier

Vérifier la cohabitation

npx eslint-config-prettier src/app.js        # signale les règles ESLint en conflit
npx eslint --print-config src/app.js | grep -E '"(indent|quotes|semi)"'

La première commande liste les règles actives qui contredisent Prettier.

Dépannage

Symptôme	Piste
ESLint et Prettier se « battent » (le fichier change à chaque enregistrement)	Règles de style actives dans ESLint : `eslint-config-prettier` en dernier
Prettier ne formate pas à l’enregistrement	Formateur par défaut non défini, extension absente, fichier ignoré par `.prettierignore`
ESLint n’analyse pas dans l’éditeur	Extension désactivée, `eslint.validate`, dossier ouvert différent de la racine du projet, ou ESLint non installé localement
`Error: Failed to load config` dans l’éditeur	Configuration invalide : lancer `npx eslint .` dans le terminal pour voir l’erreur
`source.fixAll.eslint` corrige trop	Limiter les règles corrigeables, ou utiliser `explicit` (corrige à l’enregistrement manuel)
Formatage différent entre l’éditeur et la CI	Versions différentes de Prettier : utiliser celle du projet (`node_modules`), pas celle de l’éditeur
Réglages d’éditeur différents entre les membres	Versionner `.vscode/settings.json` et `.editorconfig`

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

Aucune propre à Ubuntu. Sous Ubuntu, VS Code s’installe en paquet .deb ou snap ; les extensions s’installent de la même façon (code --install-extension dbaeumer.vscode-eslint).