Comment formater du code avec Prettier dans Visual Studio Code

Lorsqu’on écrit du code, il est souvent difficile de se concentrer à la fois sur la logique et sur la mise en forme visuelle. Les indentations, les guillemets simples ou doubles, et les points-virgules peuvent sembler insignifiants lorsqu’on réfléchit à la logique complexe d’une application web moderne.

C’est là qu’intervient Prettier Code Formatter. Prettier est un formateur de code personnalisable, compatible avec plusieurs langages et intégré à la plupart des éditeurs de code.

Dans cet article, nous allons voir comment utiliser Prettier dans Visual Studio Code.

Setting Up the Workspace

Nous partons du principe que tu as déjà installé Visual Studio Code et que tu disposes d’un fichier à formater. Voici un exemple de code non formaté :

const name = "Hostman";
const service ={first: name
}
console.log(service);
const printName = (fName) => {
console.log(`This is ${fName}`)
}
printName ('Hostman');

Ce code présente plusieurs problèmes classiques :

• Des guillemets incohérents
• Un manque d’indentation
• Des retours à la ligne mal placés

S’il est exécuté, il fonctionnera correctement, car JavaScript ne dépend pas de ces détails. Mais pour un lecteur humain, ce code est difficile à suivre.

Nous allons donc installer une extension qui ajoute automatiquement les indentations, les points-virgules et les autres éléments nécessaires pour rendre le code plus lisible.

1. Ouvre l’onglet Extensions dans le menu de VS Code (ou appuie sur Ctrl + Shift + X sous Windows).
2. Recherche Prettier — cette extension compte plus de 20 millions d’installations.
3. Clique sur Installer pour l’ajouter à ton éditeur.

Une méthode alternative consiste à appuyer sur Ctrl + P pour ouvrir le panneau de lancement rapide, puis à exécuter la commande suivante :

ext install esbenp.prettier-vscode

Cette commande installera directement l’extension Prettier.

Tu peux maintenant utiliser cet outil pour formater rapidement ton code dans VS Code.

Formatage automatique

Imaginons que ton chef de projet t’envoie un message sur Slack :
la nouvelle page Hostman Cloud Server doit être mise en production immédiatement. Tout est prêt et fonctionne, mais la mise en forme du code laisse à désirer. Heureusement, tu disposes désormais de l’extension Prettier qui va tout corriger rapidement et facilement.

1. Appuie sur Ctrl + Shift + P pour ouvrir la Palette de commandes.

    

2. Trouve et exécute la commande Format Document With.

3. Sélectionne Prettier dans la liste déroulante.

Ton code sera automatiquement formaté avec les espaces, indentations, retours à la ligne et guillemets cohérents. Voici un exemple du résultat :

const name = "Hostman";
const person = { first: name };
console.log(person);
const sayHelloLinting = (fName) => {
  console.log(`Hello linting, ${fName}`);
};
sayHelloLinting("Hostman");

Cet outil est extrêmement pratique et peut être configuré pour différents langages. Par exemple, si tu exécutes le formatage automatique sur un fichier Python, VS Code te proposera d’installer autopep8. Cet utilitaire formate automatiquement le code Python selon le guide de style officiel PEP 8, en utilisant pycodestyle pour détecter les problèmes. Autopep8 peut corriger la plupart des erreurs signalées par pycodestyle.

To avoid the need for manual formatting each time, enable auto-formatting on save in Prettier:

1. Ouvre les Paramètres (Ctrl + , sous Windows).

2. Recherche Editor: Format On Save.

3. Coche la case pour activer le formatage à la sauvegarde.

Et voilà ! Le code sera désormais automatiquement formaté à chaque enregistrement.

Définir des règles de formatage personnalisées

Les développeurs peuvent personnaliser les règles de formatage de deux manières :

1. En ajustant les paramètres directement dans les options de l’extension.
2. En créant un fichier de configuration séparé.

Dans les paramètres de l’extension, tu peux modifier des options courantes comme :
le nombre d’espaces pour l’indentation, ou l’ajout d’un point-virgule à la fin de chaque ligne. Cette méthode est rapide, mais la configuration ne s’appliquera qu’à ton environnement local. Pour partager la même configuration avec toute ton équipe, il est préférable de créer un fichier de configuration. Cela garantit une cohérence des règles de formatage dans tout le projet.

Un fichier .prettierrc peut utiliser plusieurs extensions : .yml, .yaml, .json, .js ou .toml. Voici un exemple simple en format JSON :

{
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": false
}

Conclusion

Prettier est un outil qui accélère considérablement le développement en appliquant automatiquement les règles de mise en forme, qu’elles soient par défaut ou personnalisées.

Une fois le fichier de configuration créé, toute l’équipe partagera les mêmes règles de style. Cela permet à chacun de se concentrer sur les tâches de développement sans se soucier du style de code. Grâce à Prettier, les virgules, les indentations et les guillemets se corrigent en quelques clics lors du refactoring — et tu peux coder en toute sérénité.