Comment formater du code avec Prettier dans Visual Studio Code

Introduction

Le formatage cohérent du code est un défi, mais les outils de développement modernes permettent de maintenir automatiquement la cohérence dans la base de code de votre équipe.

Dans cet article, vous allez mettre en place Prettier pour formater automatiquement votre code dans Visual Studio Code, également connu sous le nom de VS Code.

À des fins de démonstration, voici l’exemple de code que vous allez formater :

const name = "James";

const person ={first: name
}

console.log(person);

const sayHelloLinting = (fName) => {
console.log(`Hello linting, ${fName}`)
}

sayHelloLinting('James');

Si vous êtes familiarisé avec le formatage de code, vous remarquerez peut-être quelques erreurs :

• Un mélange de guillemets simples et doubles.
• La première propriété de l’objet person doit être sur sa propre ligne.
• L’énoncé de la console à l’intérieur de la fonction doit être en retrait.
• Vous pouvez aimer ou non la parenthèse optionnelle qui entoure le paramètre de la fonction flèche.

Conditions préalables

Pour suivre ce tutoriel, vous devez télécharger et installer Visual Studio Code.

Pour travailler avec Prettier dans Visual Studio Code, vous devez installer l’extension. Pour ce faire, recherchez Prettier - Code Formatter dans le panneau d’extension de VS Code. Si vous l’installez pour la première fois, vous verrez un bouton install au lieu du bouton uninstall indiqué ici :

Étape 1 - Utilisation de la commande Format Document

L’extension Prettier étant installée, vous pouvez maintenant l’utiliser pour formater votre code. Pour commencer, explorons la commande Format Document. Cette commande rendra votre code plus cohérent avec un espacement formaté, un retour à la ligne et des guillemets.

Pour ouvrir la palette de commandes, vous pouvez utiliser COMMANDE + SHIFT + P sur macOS ou CTRL + SHIFT + P sur Windows.

Dans la palette de commandes, recherchez ``et choisissez ensuite Format Document.

Vous pouvez ensuite être invité à choisir le format à utiliser. Pour ce faire, cliquez sur le bouton Configure :

Choisissez ensuite Prettier - Code Formatter.

Votre code est maintenant formaté avec un espacement, un retour à la ligne et des guillemets cohérents :

const name = 'James';

const person = { first: name };

console.log(person);

const sayHelloLinting = (fname) => {
  console.log(`Hello linting, ${fName}`);
}

sayHelloLinting('James');

Cela fonctionne également sur les fichiers CSS. Vous pouvez transformer quelque chose avec une indentation incohérente, des accolades, de nouvelles lignes et des points-virgules en un code bien formaté.  Par exemple :

body {color: red;
}
h1 {
  color: purple;
font-size: 24px
}

Sera reformaté comme :

body {
  color: red;
}
h1 {
  color: purple;
  font-size: 24px;
}

Maintenant que nous avons exploré cette commande, voyons comment elle peut être mise en œuvre pour s’exécuter automatiquement.

Étape 2 - Formater le code sur Save

Jusqu’à présent, vous avez dû exécuter manuellement une commande pour formater votre code. Pour automatiser ce processus, vous pouvez choisir un paramètre dans VS Code pour que vos fichiers soient automatiquement formatés lors de l’enregistrement. Cela garantit également que le code ne soit pas vérifié par un contrôle de version non formaté.

Pour modifier ce paramètre, appuyez sur COMMAND + , sur macOS (ou CTRL + , sur Windows) pour ouvrir le menu Settings. Une fois le menu ouvert, recherchez Editor: Format On Save et assurez-vous que cette option soit cochée :

Une fois ce réglage effectué, vous pouvez écrire votre code comme d’habitude et il sera automatiquement formaté lorsque vous enregistrerez le fichier.

Étape 3 - Changer les paramètres de configuration de Prettier

Prettier fait beaucoup de choses pour vous par défaut, mais vous pouvez également personnaliser les paramètres.

Ouvrez le menu Settings. Ensuite, recherchez Prettier. Vous obtiendrez ainsi tous les paramètres que vous pouvez modifier :

Voici quelques uns des réglages les plus courants :

• Single Quote - Choisissez entre des citations simples et doubles.
• Semi - Choisissez d’inclure ou non des points-virgules à la fin des lignes.
• Tab Width l’onglet - Indiquez le nombre d’espaces que vous souhaitez insérer dans un onglet.

L’inconvénient de l’utilisation du menu de paramètres intégré dans le code VS est qu’il n’assure pas la cohérence entre les développeurs de votre équipe.

Étape 4 - Créer un fichier de configuration Prettier

Si vous modifiez les paramètres de votre code VS, quelqu’un d’autre pourrait avoir une configuration entièrement différente sur sa machine. Vous pouvez établir un formatage cohérent au sein de votre équipe en créant un fichier de configuration pour votre projet.

Créez un nouveau fichier appelé .prettierrc.extension avec l’une des extensions suivantes :

• yml
• yaml
• json
• js
• toml

Voici un exemple de fichier de configuration simple utilisant JSON :

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

Pour plus de détails sur les fichiers de configuration, consultez les Prettier Docs. Après avoir créé l’un d’entre eux et l’avoir intégré à votre projet, vous pouvez vous assurer que chaque membre de l’équipe suit les mêmes règles de formatage.

Conclusion

Avoir un code cohérent est une bonne pratique. C’est particulièrement bénéfique lorsque l’on travaille sur un projet avec des collaborateurs multiples. Se mettre d’accord sur un ensemble de configurations aide à la lisibilité et à la compréhension du code. Il est possible de consacrer plus de temps à la résolution de problèmes techniques difficiles au lieu de se battre sur des problèmes résolus comme l’indentation du code.

Prettier assure la cohérence du formatage de votre code et automatise le processus.