Skip to content

Prettier

Qu'est-ce que Prettier

Prettier est un formateur de code opinionated. Il reformate automatiquement le code pour garantir un style cohérent dans tout le projet.

Prettier et ESLint

Historiquement, Prettier était utilisé conjointement avec ESLint : ESLint pour le linting et Prettier pour le formattage. Cela nécessitait des plugins de compatibilité (eslint-config-prettier, eslint-plugin-prettier) et créait parfois des conflits.

Avec la configuration ESLint d'Anthony Fu recommandée par la Fabrique Numérique (cf. page dédiée à ESLint), le formattage est directement géré par ESLint. Dans ce cas, Prettier n'est pas nécessaire et ne devrait pas être ajouté au projet pour éviter les conflits.

Recommandation

Si vous utilisez @antfu/eslint-config (ce qui est recommandé), n'installez pas Prettier. ESLint gère à la fois le linting et le formattage.

Quand utiliser Prettier

Prettier reste utile dans les cas suivants :

  • Projets legacy qui n'utilisent pas encore la configuration ESLint recommandée
  • Formattage de fichiers non-JS/TS : Prettier supporte le formattage de fichiers Markdown, JSON, YAML, CSS, HTML, etc., que ESLint ne couvre pas nativement

Configuration minimale

Si Prettier est utilisé dans un projet, voici la configuration recommandée (fichier .prettierrc) :

json
{
  "semi": false,
  "singleQuote": true,
  "trailingComma": "all",
  "printWidth": 120,
  "tabWidth": 2,
  "arrowParens": "always",
  "endOfLine": "lf"
}

Et le fichier .prettierignore :

txt
dist
node_modules
pnpm-lock.yaml