Prettier : éditeur et EditorConfig

Formater à l’enregistrement

Le formatage automatique supprime tout effort : le code est formaté à chaque enregistrement, avec la même version de Prettier que celle du projet.

VS Code

Extension Prettier - Code formatter (esbenp.prettier-vscode).

.vscode/settings.json (versionné) :

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.formatOnPaste": false,
  "prettier.requireConfig": true,
  "[astro]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
  "[markdown]": { "editor.formatOnSave": true }
}

Réglage	Effet
`editor.defaultFormatter`	Formateur utilisé (Prettier)
`editor.formatOnSave`	Formate à l’enregistrement
`prettier.requireConfig`	Ne formate que si un fichier de configuration Prettier existe dans le projet (évite de reformater des projets qui n’en veulent pas)
`prettier.configPath`	Chemin explicite du fichier de configuration

.vscode/extensions.json :

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

L’extension utilise le Prettier du projet (node_modules) quand il est installé : le formatage de l’éditeur et celui de la CI sont identiques. Sans installation locale, elle utilise sa version intégrée, qui peut différer.

Formater à la demande : Maj+Alt+F (formater le document). Vérifier le formateur utilisé : clic droit > « Formater le document avec… ».

EditorConfig

.editorconfig définit des réglages de base lus par tous les éditeurs (indentation, fins de ligne, codage) :

root = true

[*]
charset = utf-8
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
indent_style = space
indent_size = 2

[*.md]
trim_trailing_whitespace = false

[Makefile]
indent_style = tab

Clé	Effet
`indent_style`, `indent_size`	Espaces ou tabulations, largeur
`end_of_line`	`lf`, `crlf`, `cr`
`charset`	`utf-8`
`insert_final_newline`	Ligne vide finale
`trim_trailing_whitespace`	Retire les espaces en fin de ligne (désactiver pour Markdown : deux espaces = saut de ligne)
`max_line_length`	Largeur de ligne (lue aussi par Prettier)

EditorConfig et Prettier

Prettier lit .editorconfig : indent_style, indent_size (ou tab_width), end_of_line et max_line_length sont traduits en useTabs, tabWidth, endOfLine et printWidth, sauf si le fichier de configuration Prettier les définit (qui a alors la priorité).

Source	Priorité
Option en ligne de commande	La plus haute
`.prettierrc` / `prettier.config.*`	Haute
`.editorconfig`	Plus basse : utilisée si Prettier n’a pas la même option
Valeurs par défaut de Prettier	Dernier recours

Éviter les valeurs contradictoires : régler la même valeur aux deux endroits (par exemple indent_size = 2 et tabWidth par défaut), ou ne définir l’indentation que dans .editorconfig.

Fins de ligne : `.gitattributes`

* text=auto eol=lf
*.sh text eol=lf
*.png binary
*.jpg binary

Associé à endOfLine: "lf" (valeur par défaut de Prettier 3) : sous Linux, macOS et Windows, tous les fichiers du dépôt utilisent lf. Cela évite des fichiers entiers « modifiés » à cause de fins de ligne différentes.

JetBrains (WebStorm, PhpStorm…)

Réglages > Langages et frameworks > JavaScript > Prettier :

activer « Exécuter à la sauvegarde pour les fichiers » avec le motif {**/*,*}.{js,ts,jsx,tsx,css,md,json,astro} ;
indiquer le paquet Prettier du projet (node_modules/prettier) ;
cocher « Exécuter prettier --write à la sauvegarde ».

Neovim, Vim, Emacs

Éditeur	Intégration
Neovim	`conform.nvim` (formateur `prettier`) ou `null-ls` / `none-ls` ; format à l’enregistrement par autocommande
Vim	`vim-prettier` ou `ale`
Emacs	`prettier-js`, `apheleia`

Exemple conform.nvim :

require('conform').setup({
  formatters_by_ft = {
    javascript = { 'prettier' },
    typescript = { 'prettier' },
    astro = { 'prettier' },
    markdown = { 'prettier' },
  },
  format_on_save = { timeout_ms = 2000, lsp_fallback = true },
})

Formater depuis la ligne de commande

npx prettier --write .

À utiliser en dehors de l’éditeur (scripts, hooks, intégration continue). Dans une session distante sur un serveur Ubuntu (SSH), l’éditeur local formate via le serveur de langage distant ou on lance la commande en ligne de commande (voir SSH : tunnels).

Partager les réglages d’équipe

Versionner :

.prettierrc, .prettierignore ;
.editorconfig ;
.gitattributes ;
.vscode/settings.json et .vscode/extensions.json (seuls les réglages utiles à tous : pas de préférences personnelles).

Pour VS Code, ajouter dans .gitignore tout sauf ces deux fichiers :

.vscode/*
!.vscode/settings.json
!.vscode/extensions.json

Dépannage

Symptôme	Piste
L’éditeur ne formate pas	Formateur par défaut non défini, extension désactivée, fichier ignoré (`.prettierignore`), `prettier.requireConfig` sans fichier de configuration
Formatage différent entre l’éditeur et la CI	L’éditeur utilise sa version intégrée : installer Prettier dans le projet
Le fichier change à chaque enregistrement	Deux formateurs (ESLint `--fix` avec règles de style, autre extension) : voir ESLint : Prettier et éditeur
Indentation différente de `.editorconfig`	`.prettierrc` prioritaire : aligner les valeurs
Fins de ligne `crlf` sous Windows	`endOfLine: "lf"` et `.gitattributes`
`Error: Cannot find module 'prettier'`	Prettier non installé localement : `npm install -D prettier`
Plugin non pris en compte dans l’éditeur	Redémarrer le serveur de langage ; plugin déclaré dans `plugins`
Fichier Astro non formaté	Plugin `prettier-plugin-astro` et extension Astro, formateur défini pour `[astro]`

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

Aucune propre à Ubuntu. Sous Linux, lf est la fin de ligne naturelle. VS Code s’installe en paquet .deb ou snap ; les extensions s’installent par code --install-extension esbenp.prettier-vscode.

Pour aller plus loin

Intégration aux éditeurs, EditorConfig
Suite : Intégration continue et hooks