Prettier : intégration continue et hooks

Vérifier en intégration continue

name: Formatage
on:
  push:
    branches: [main]
  pull_request:

jobs:
  format:
    runs-on: ubuntu-latest
    timeout-minutes: 10
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 24
          cache: npm
      - run: npm ci
      - run: npx prettier --check .

prettier --check ne modifie rien : il échoue (code de sortie 1) si un fichier n’est pas formaté, et liste les fichiers concernés :

Checking formatting...
[warn] src/app.js
[warn] README.md
[warn] Code style issues found in 2 files. Run Prettier with --write to fix.

Corriger en local : npx prettier --write .. Voir Gitea Actions : écrire un workflow.

Pre-commit avec Husky et lint-staged

npm install -D husky lint-staged
npx husky init
echo "npx lint-staged" > .husky/pre-commit

package.json :

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

À chaque commit, seuls les fichiers indexés sont formatés, puis réindexés automatiquement. Avec ESLint : ["eslint --fix", "prettier --write"] (ESLint avant Prettier). Voir Husky : installation et Husky : hooks et lint-staged.

Hook sans Husky

Voir Husky : alternative, hooks Git natifs :

.githooks/pre-commit

#!/usr/bin/env bash
set -euo pipefail
fichiers=$(git diff --cached --name-only --diff-filter=ACMR | grep -E '\.(js|ts|css|json|md|ya?ml)$' || true)
[ -z "$fichiers" ] && exit 0
echo "$fichiers" | xargs npx prettier --check || {
  echo "Fichiers mal formatés : npx prettier --write <fichiers>, puis git add"
  exit 1
}

Cette version vérifie seulement (sans réécrire) : on corrige explicitement, ce qui évite de modifier des fichiers partiellement indexés.

Premier formatage de tout le projet

Pour introduire Prettier dans un projet existant :

git switch -c style/prettier
npm install -D --save-exact prettier
echo '{ "singleQuote": true }' > .prettierrc
npx prettier --write .
git add -A
git commit -m "style: formater le projet avec prettier"

1. Un commit dédié : jamais mêlé à une modification de code.
2. Faire ce commit quand il y a peu de branches ouvertes (sinon, conflits de fusion partout).
3. Ignorer ce commit dans git blame :

git rev-parse HEAD >> .git-blame-ignore-revs
git config blame.ignoreRevsFile .git-blame-ignore-revs

4. Ajouter ensuite prettier --check en CI et le hook de commit.

Pour les branches existantes : demander de rebaser après le commit de formatage, puis npx prettier --write sur leurs fichiers modifiés, avant de fusionner.

Scripts package.json

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

La commande npm run verifier exécute localement les mêmes contrôles que la CI. Pour ce site, le script check regroupe la vérification des types d’Astro et celle du formatage (astro check && prettier --check .).

Performance

npx prettier --check . --cache                    # ignore les fichiers déjà conformes (cache)
npx prettier --write . --cache --cache-location node_modules/.cache/prettier/.prettier-cache
npx prettier --check . --cache-strategy content   # cache selon le contenu (plus fiable en CI)

Le cache évite de reformater les fichiers inchangés. En CI, la stratégie content convient mieux : metadata s’appuie sur les dates de modification, qui changent à chaque extraction du dépôt.

Pour de très gros projets : formater seulement les fichiers modifiés par rapport à la branche principale :

git diff --name-only --diff-filter=ACMR origin/main...HEAD | xargs -r npx prettier --check

Faire quand même une vérification complète régulièrement (sur la branche principale).

Mettre à jour Prettier

npm outdated prettier
npm install -D --save-exact prettier@latest prettier-plugin-astro@latest prettier-plugin-tailwindcss@latest
npx prettier --write .
git diff --stat

Une mise à jour (même mineure) peut changer le formatage de certains cas : procéder dans un commit dédié (chore: mettre à jour prettier suivi de style: reformater avec prettier 3.x), après avoir lu les notes de version (prettier.io/blog). Mettre à jour les plugins en même temps.

Dépannage

Symptôme	Piste
--check échoue en CI mais pas en local	Versions de Prettier ou de plugins différentes (épingler avec --save-exact, npm ci), fichiers non indexés localement, fins de ligne (.gitattributes)
Le hook modifie des fichiers non indexés	Utiliser lint-staged (il gère les fichiers partiellement indexés) ou la version « check » du hook
La CI est lente	--cache --cache-strategy content, cache node_modules/.cache/prettier
[warn] Code style issues found	npx prettier --write sur les fichiers listés
Conflits de fusion après un formatage global	Commit de formatage en période calme, demander un rebase
Le hook ne se lance pas	Voir Husky : dépannage
ENOENT … .prettier-cache	Dossier du cache absent : le créer, ou laisser Prettier le faire dans node_modules/.cache

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

Aucune.

Pour aller plus loin

• Prettier : CI, Pre-commit
• Suite : Dépannage et migration

Dans la même rubrique

• Installation
• Options
• Ignorer et surcharger
• Plugins : Tailwind, Astro
• Éditeur et EditorConfig
• Intégration continue et hooks
• Dépannage et migration