Prettier : plugins, Tailwind et Astro

Prettier ne connaît par défaut que les langages du noyau. Un plugin ajoute un langage ou un comportement. Depuis Prettier 3, les plugins doivent être déclarés explicitement dans la configuration (plus de détection automatique dans node_modules).

Déclarer un plugin

npm install -D prettier-plugin-astro prettier-plugin-tailwindcss

.prettierrc :

{
  "plugins": ["prettier-plugin-astro", "prettier-plugin-tailwindcss"],
  "overrides": [{ "files": "*.astro", "options": { "parser": "astro" } }]
}

`prettier-plugin-astro`

Formate les fichiers .astro : frontmatter, gabarit HTML, expressions, <style> et <script>.

npx prettier --write "src/**/*.astro"

Point	Détail
Surcharge `parser: "astro"`	Indique l’analyseur pour `*.astro` (utile selon la version)
Options spécifiques	`astroAllowShorthand` (écriture abrégée des attributs `{prop}`)
TypeScript du frontmatter	Formaté comme du TypeScript

Voir Astro : composants et layouts.

`prettier-plugin-tailwindcss`

Trie les classes Tailwind dans l’ordre recommandé par Tailwind, pour des classes toujours dans le même ordre :

<!-- avant -->
<button class="rounded-lg bg-blue-600 px-4 py-2 text-white hover:bg-blue-700">
  Valider
</button>
<!-- après -->
<button class="rounded-lg bg-blue-600 px-4 py-2 text-white hover:bg-blue-700">
  Valider
</button>

Options :

{
  "plugins": ["prettier-plugin-tailwindcss"],
  "tailwindStylesheet": "./src/styles/global.css",
  "tailwindFunctions": ["cn", "clsx", "cva"],
  "tailwindAttributes": ["classNameBase"]
}

Option	Rôle
`tailwindStylesheet`	Fichier CSS racine de Tailwind 4 (qui contient `@import "tailwindcss"` et `@theme`) : nécessaire pour trier aussi les classes personnalisées du thème
`tailwindConfig`	Fichier de configuration de Tailwind 3 (`tailwind.config.js`)
`tailwindFunctions`	Fonctions dont les arguments contiennent des classes (`cn("a b")`)
`tailwindAttributes`	Attributs supplémentaires qui contiennent des classes

Avec Tailwind CSS 4, indiquer tailwindStylesheet : sans lui, le tri ne connaît pas les utilitaires et couleurs définis dans @theme (voir Tailwind : thème et personnalisation).

L’ordre des plugins

Le plugin Tailwind doit être le dernier de la liste : il enveloppe les autres analyseurs pour trier les classes après leur travail.

{
  "plugins": [
    "prettier-plugin-astro",
    "prettier-plugin-organize-imports",
    "prettier-plugin-tailwindcss"
  ]
}

Plusieurs plugins qui réécrivent le même langage (par exemple deux plugins de tri d’imports) peuvent entrer en conflit : n’en garder qu’un par rôle.

Autres plugins courants

Plugin	Rôle
`prettier-plugin-organize-imports`	Trie et supprime les imports TypeScript inutilisés
`@trivago/prettier-plugin-sort-imports`	Trie les imports selon des motifs configurables
`prettier-plugin-svelte`	Fichiers Svelte
`prettier-plugin-sh`	Scripts shell et fichiers `Dockerfile`
`prettier-plugin-toml`	Fichiers TOML
`prettier-plugin-packagejson`	Trie les clés de `package.json`
`@prettier/plugin-php`, `@prettier/plugin-xml`	PHP, XML

Choisir des plugins maintenus et compatibles avec Prettier 3 : un plugin abandonné se casse à la montée de version de Prettier.

Vérifier les plugins chargés

npx prettier --support-info | grep -i '"name"' | head -20       # langages connus
npx prettier --file-info src/composants/Carte.astro

{ "ignored": false, "inferredParser": "astro" }

inferredParser doit être astro pour un fichier .astro : sinon le plugin n’est pas chargé.

Exemple complet pour un projet Astro et Tailwind

.prettierrc :

{
  "singleQuote": true,
  "printWidth": 100,
  "plugins": ["prettier-plugin-astro", "prettier-plugin-tailwindcss"],
  "tailwindStylesheet": "./src/styles/global.css",
  "overrides": [{ "files": "*.astro", "options": { "parser": "astro" } }]
}

package.json :

{
  "scripts": {
    "format": "prettier --write .",
    "format:check": "prettier --check ."
  },
  "devDependencies": {
    "prettier": "3.x.x",
    "prettier-plugin-astro": "^0.x",
    "prettier-plugin-tailwindcss": "^0.x"
  }
}

Le site qui héberge cette documentation utilise ce même couple de plugins avec pnpm format et pnpm check.

Avec ESLint

Les plugins de Prettier sont indépendants des règles d’ESLint : voir ESLint : Prettier et éditeur. Le tri des classes Tailwind relève de Prettier ; la vérification des classes inexistantes, d’un plugin ESLint dédié.

Dépannage

Symptôme	Piste
`No parser could be inferred for file "….astro"`	Plugin non déclaré dans `plugins` (obligatoire depuis Prettier 3)
Les classes Tailwind ne sont pas triées	Plugin absent de la liste, ou pas en dernier ; `tailwindStylesheet` manquant (Tailwind 4)
`Cannot find package 'prettier-plugin-…'`	`npm install -D` du plugin
Le plugin Tailwind trie les classes différemment en local et en CI	Versions de Tailwind ou du plugin différentes
`Error: Cannot find module` au chargement	Version du plugin incompatible avec la version de Prettier
Les classes d’une fonction `cn()` ne sont pas triées	`tailwindFunctions: ["cn"]`
Conflit entre deux plugins	N’en garder qu’un qui réécrit le même langage, plugin Tailwind en dernier
Formatage très lent	Plugin coûteux, très gros fichiers : `--cache`