Prettier : installation

Prettier est un formateur de code opinionné : il réécrit le code selon un style unique (indentation, guillemets, retours à la ligne) pour supprimer les débats de style en revue. Il formate JavaScript, TypeScript, JSX, CSS, HTML, JSON, Markdown, YAML et d’autres langages. Cette rubrique décrit Prettier 3. Les exemples utilisent des noms génériques.

Principe

Prettier	ESLint
Formate : espaces, guillemets, retours à la ligne	Analyse : erreurs probables, mauvaises pratiques
Peu d’options (volontairement)	Très configurable
Réécrit le fichier	Signale (et corrige parfois)

Les deux se complètent (voir ESLint : Prettier et éditeur).

Installer

npm install -D --save-exact prettier
npx prettier --version

--save-exact fixe la version exacte dans package.json : une mise à jour mineure de Prettier peut modifier légèrement le formatage et produire des différences dans tout le dépôt ; mettre à jour volontairement.

Commandes

npx prettier --write .                  # formate tous les fichiers pris en charge
npx prettier --write src/               # un dossier
npx prettier --write "src/**/*.{js,ts}" # un motif (entre guillemets)
npx prettier --check .                  # vérifie sans modifier (code de sortie 1 si différences)
npx prettier --list-different .         # liste les fichiers à reformater
npx prettier src/app.js                 # affiche le résultat sur la sortie standard
npx prettier --check . --cache          # ne revérifie que les fichiers modifiés

Commande	Usage
`--write`	Poste de travail, hook de commit
`--check`	Intégration continue (échoue si un fichier n’est pas formaté)
`--list-different`	Voir ce qui changerait
`--cache`	Accélérer les exécutions répétées

Scripts `package.json`

{
  "scripts": {
    "format": "prettier --write .",
    "format:check": "prettier --check ."
  }
}

Premier formatage d’un projet

git switch -c style/prettier
npx prettier --write .
git diff --stat
git add -A
git commit -m "style: formater le projet avec prettier"

Faire ce premier formatage dans un commit dédié, séparé de tout autre changement : le diff est volumineux mais purement mécanique, et reste facile à relire ou à écarter de git blame :

echo "<hash-du-commit-de-formatage>" >> .git-blame-ignore-revs
git config blame.ignoreRevsFile .git-blame-ignore-revs

Exemple de transformation

Avant :

const utilisateur = { nom: 'Alice', age: 30, roles: ['admin', 'editeur'] };
function saluer(u) {
  return 'Bonjour ' + u.nom;
}

Après (prettier --write) :

const utilisateur = { nom: 'Alice', age: 30, roles: ['admin', 'editeur'] };
function saluer(u) {
  return 'Bonjour ' + u.nom;
}

Prettier reformate selon la largeur de ligne (80 par défaut) : un objet qui tient sur une ligne reste sur une ligne ; sinon il est réparti.

Langages pris en charge

Catégorie	Formats
JavaScript	JS, JSX, TS, TSX, JSON, JSON5, JSONC
Styles	CSS, SCSS, Less
Balisage	HTML, Vue, Angular, Handlebars, Markdown, MDX
Données	YAML, GraphQL
Autres (par plugin)	Astro, Tailwind (tri des classes), PHP, Java, XML… (voir Plugins)

Le fichier est reconnu par son extension (.astro demande prettier-plugin-astro).

Où est la configuration

Prettier cherche, depuis le dossier du fichier vers la racine, une configuration dans : .prettierrc (JSON ou YAML), .prettierrc.json, .prettierrc.yaml, .prettierrc.toml, prettier.config.js (ou .mjs), ou la clé "prettier" de package.json. Voir Options.

Un fichier `.prettierrc` minimal

{
  "singleQuote": true,
  "printWidth": 100
}

Sans fichier de configuration, Prettier applique ses valeurs par défaut : c’est un choix raisonnable, moins il y a d’options, mieux c’est.

Dépannage

Symptôme	Piste
`[error] No parser could be inferred for file`	Extension non prise en charge (plugin manquant)
`prettier: command not found`	`npx prettier`, ou dépendances non installées
Beaucoup de fichiers à reformater après une mise à jour	Version de Prettier différente : épingler (`--save-exact`) et reformater en un commit
`--check` échoue en CI mais pas en local	Version de Prettier différente, configuration différente, fins de ligne
`Code style issues found in …`	Exécuter `npx prettier --write` sur ces fichiers
Formatage de fichiers générés	`.prettierignore` (voir Ignorer et surcharger)

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

Aucune propre à Ubuntu : Prettier s’exécute avec Node.js. Sous Linux, les fins de ligne sont lf (valeur par défaut de Prettier 3).

Pour aller plus loin

Documentation : prettier.io
Suite : Options