Comment Formater du Code avec Prettier ?

Votre code est en désordre ? Vous passez plus de temps à corriger l’indentation et les retours à la ligne qu’à coder ? Marre des débats sans fin sur le style de code dans votre équipe ?

Cet article est un guide complet pour vous montrer comment installer et configurer Prettier afin de formater votre code automatiquement. Fini la perte de temps, bonjour la cohérence.

Code AVANT Prettier

function HelloWorld({name}){
      return (
    <div className=’greeting’ >
    Hello, { name}!
    </div>
      );
    }

Code APRÈS Prettier

function HelloWorld({ name }) {
  return <div className= »greeting »>Hello, {name}!</div>;
}

Qu’est-ce que Prettier et pourquoi l’adopter ?

Prettier est un formateur de code « opiniâtre » (opinionated code formatter). Son but est simple : prendre votre code en entrée et le ressortir avec une mise en forme parfaite et constante. Il ne se soucie pas des erreurs de logique, seulement de la forme : les espaces, les retours à la ligne, les points-virgules, etc.

L’adopter présente plusieurs avantages concrets. Le plus évident est le gain de temps. Vous n’avez plus à vous soucier manuellement du formatage. Ensuite, il garantit un style de code unifié sur tout un projet et au sein d’une équipe. C’est la fin des guerres sur les tabulations contre les espaces. Enfin, un code bien formaté est simplement plus facile à lire et à maintenir pour tout le monde. Pour plus d’informations, vous pouvez consulter le site officiel de Prettier.

Étape 1 : Installation de Prettier (La Méthode pas à pas)

Il y a principalement deux manières d’installer Prettier. Vous pouvez l’intégrer directement dans votre projet, ce qui est la meilleure pratique pour le travail en équipe. Ou vous pouvez l’installer uniquement dans votre éditeur de code, comme VS Code, pour une utilisation personnelle et rapide.

Option A : Intégration dans votre projet (Recommandé pour les équipes)

Installer Prettier comme une dépendance de développement de votre projet garantit que tous les collaborateurs utilisent la même version et les mêmes règles. C’est la méthode la plus fiable pour assurer la cohérence du code.

Ouvrez votre terminal à la racine de votre projet et exécutez la commande suivante en fonction de votre gestionnaire de paquets :

Avec npm :

npm install –save-dev –save-exact prettier

Avec yarn :

yarn add –dev –exact prettier

L’option --save-exact est importante. Elle assure que chaque installation utilisera la version précise de Prettier, évitant les différences de formatage dues à des mises à jour mineures de l’outil.

Option B : Intégration dans votre éditeur (Exemple avec VS Code)

Si vous travaillez seul ou si vous voulez juste tester l’outil rapidement, l’intégrer à votre éditeur est la solution la plus simple. Pour Visual Studio Code, l’éditeur le plus populaire, le processus est très direct.

Ouvrez VS Code et allez dans l’onglet Extensions (l’icône avec les carrés sur la barre latérale).
Dans la barre de recherche, tapez « Prettier – Code formatter ».
Installez l’extension officielle Prettier – Code formatter, développée par Esben Petersen.
Pour que ça marche au mieux, définissez Prettier comme votre formateur par défaut. Allez dans Fichier > Préférences > Paramètres, cherchez « Default Formatter » et sélectionnez « Prettier – Code Formatter ».

Étape 2 : Créer votre fichier de configuration `.prettierrc`

Même si Prettier est « opiniâtre », il vous laisse quand même personnaliser quelques règles de formatage. Pour cela, vous devez créer un fichier de configuration à la racine de votre projet. Le plus courant est de créer un fichier nommé .prettierrc.json.

Ce fichier permet de définir vos préférences pour que Prettier les applique automatiquement. C’est ici que vous décidez si vous voulez des points-virgules, des guillemets simples, etc. Voici les options de configuration les plus courantes que vous pouvez utiliser.

Option	Description	Valeurs possibles	Défaut
`"semi"`	Ajoute ou non des points-virgules à la fin des lignes.	`true` / `false`	`true`
`"singleQuote"`	Utilise des guillemets simples au lieu de doubles.	`true` / `false`	`false`
`"tabWidth"`	Définit le nombre d’espaces par niveau d’indentation.	Nombre (ex: `2`)	`2`
`"printWidth"`	Spécifie la longueur maximale d’une ligne de code.	Nombre (ex: `80`)	`80`
`"trailingComma"`	Ajoute une virgule à la fin des objets ou tableaux sur plusieurs lignes.	`"es5"` / `"none"` / `"all"`	`"es5"`

Exemple de fichier .prettierrc.json : Ce fichier indique à Prettier de ne pas utiliser de points-virgules, d’utiliser des guillemets simples et de conserver une largeur de tabulation de 2 espaces.

{
  « semi »: false,
  « singleQuote »: true,
  « tabWidth »: 2
}

Pour une liste complète, consultez la documentation complète des options sur le site officiel.

Étape 3 : Utiliser Prettier au quotidien

Une fois l’outil installé et configuré, il faut l’utiliser. Il y a deux manières principales de l’exécuter : automatiquement à chaque sauvegarde de fichier, ou manuellement via la ligne de commande.

Le formatage automatique à la sauvegarde (la méthode magique)

C’est sans doute la fonctionnalité la plus appréciée de Prettier. Elle permet de formater votre code automatiquement dès que vous sauvegardez un fichier. Plus besoin d’y penser. Pour l’activer dans VS Code, vous devez modifier votre fichier de configuration settings.json.

Ouvrez la palette de commandes (Ctrl+Shift+P ou Cmd+Shift+P).
Tapez « Open User Settings (JSON) » et ouvrez le fichier.
Ajoutez la ligne suivante :

« editor.formatOnSave »: true

Et c’est tout. Maintenant, chaque fois que vous sauvegarderez un fichier JavaScript, CSS, JSON ou autre langage supporté, Prettier le formatera instantanément selon vos règles.

Via la ligne de commande

Utiliser Prettier en ligne de commande est utile pour formater tout un projet d’un coup, ou pour l’intégrer dans des processus automatisés (comme un hook git ou une CI/CD). La commande la plus courante est la suivante.

npx prettier –write .

npx prettier : Exécute la version de Prettier installée dans votre projet.
--write : Indique à Prettier de modifier les fichiers directement au lieu de juste afficher le résultat dans la console.
. : Cible tous les fichiers du répertoire courant et de ses sous-dossiers.

Astuce : Vous pouvez aussi cibler des fichiers spécifiques, par exemple npx prettier --write "src/**/*.js" pour formater tous les fichiers JavaScript dans le dossier src.

FAQ – Questions fréquentes sur Prettier

Voici quelques réponses aux questions que beaucoup de développeurs se posent en découvrant Prettier.

Quelle est la différence entre Prettier et ESLint ?

C’est une confusion fréquente. Ces deux outils sont complémentaires et ne font pas la même chose.

Prettier se concentre uniquement sur la forme du code (le style, l’indentation, les espaces). C’est un formateur.
ESLint analyse la qualité du code pour détecter des erreurs potentielles, des bugs ou des mauvaises pratiques (variables non utilisées, etc.). C’est un linter.

La meilleure approche est d’utiliser les deux ensemble. ESLint s’occupe de la qualité, et Prettier s’occupe du formatage.

Comment ignorer un fichier ou un dossier ?

Parfois, vous ne voulez pas que Prettier touche à certains fichiers (par exemple, des fichiers générés automatiquement). Pour cela, il suffit de créer un fichier .prettierignore à la racine de votre projet. Son fonctionnement est identique à celui d’un fichier .gitignore.

Il vous suffit d’y lister les fichiers et dossiers à ignorer, un par ligne.

# Fichier .prettierignore

# Ignorer le dossier des dépendances
node_modules

# Ignorer les fichiers de build
dist
build

# Ignorer un fichier spécifique
src/un-fichier-a-ne-pas-toucher.js

Peut-on utiliser Prettier pour d’autres langages que JavaScript ?

Oui, absolument. C’est l’un de ses grands avantages. Prettier est un outil polyglotte qui supporte de nombreux langages dès son installation. Parmi les plus courants, on trouve :

JavaScript (et ses variantes : JSX, TypeScript, Flow)
HTML
CSS (et ses préprocesseurs : SCSS, Less)
JSON
Markdown
GraphQL
Et plusieurs autres.

Cette polyvalence permet de garder un formatage cohérent sur l’ensemble des fichiers de votre projet, peu importe leur nature.