Comment configurer Prettier dans Visual Studio Code

Il est essentiel d’écrire un code propre et lisible, que vous travailliez seul ou avec une équipe de développeurs. Si de nombreux facteurs contribuent à la lisibilité du code, l’un des plus importants est la cohérence du formatage du code.

Mais voilà le problème : le formatage manuel du code peut être une véritable plaie et une source d’erreurs. Des outils comme Prettier facilitent grandement la mise en forme du HTML, du CSS, du JavaScript et d’autres langages. Découvrez comment installer et utiliser l’extension Prettier pour le formatage de code, ainsi que quelques paramètres de configuration avancés.

Installation de Prettier

Avant de poursuivre, assurez-vous que Node.js est installé sur votre ordinateur. Vous pouvez installer la dernière version à partir de la page officielle de téléchargement de Node.js. Elle est livrée avec le gestionnaire de paquets node (npm) intégré, que vous utiliserez pour gérer vos paquets Node.js.

Après avoir confirmé que Node.js est installé localement, commencez par créer un répertoire vide pour votre projet. Vous pouvez nommer ce répertoire prettier-demo.

Ensuite, accédez à ce répertoire à l’aide d’une ligne de commande, puis exécutez la commande suivante pour initialiser un projet Node.js :

 npm init -y
 

Cette commande génère un fichier package.json contenant les paramètres par défaut.

Pour installer l’extension Prettier, lancez cette commande dans le terminal :

 npm i --save-dev prettier
 

La commande –save-dev installe prettier en tant que dépendance dev, ce qui signifie qu’il n’est utilisé que pendant le développement.

Maintenant que vous l’avez installé, vous pouvez commencer à explorer le fonctionnement de Prettier en l’utilisant en ligne de commande.

Utiliser Prettier en ligne de commande

Commencez par créer un fichier script.js et de le remplir avec le code suivant :

 function sum(a, b) { return a + b }
const user = { name: "Kyle", age: 27,
    isProgrammer: true,
    longKey: "Value",
    moreData: 3
}
 

Pour formater le code de ce fichier script.js via la ligne de commande, exécutez la commande suivante :

 npx prettier --write script.js
 

La commande reformate le code JavaScript dans script.js selon la norme par défaut de Prettier. Le résultat sera le suivant :

 function sum(a, b) {
  return a + b;
}
const user = {
  name: "Kyle",
  age: 27,
  isProgrammer: true,
  longKey: "Value",
  moreData: 3,
};
 

Vous pouvez également formater des balises HTML à partir de la ligne de commande. Créer un index.html dans le même répertoire que script.js. Collez ensuite le code HTML mal formaté suivant dans le fichier :

     <header>
<div>
    <img src="" alt="" class="weather-icon large">
<div class="currentHeaderTemp"><span>21</span></div>
</div>
    </header>
 

Pour formater le HTML, exécutez la commande suivante :

 npx prettier --write index.html
 

Cette commande reformate le HTML selon la norme par défaut…