Quand on travaille en équipe, il est important d'établir des règles de formatage de code afin de maintenir une certaine cohérence dans l'équipe de développement. Cela n'est pas toujours évident, car il y a toujours un développeur qui ne respectera pas les règles établies.

En JavaScript, il existe un outil très pratique pour formater le code de manière automatique et c'est Prettier.

Dans cet article, je vais vous montrer comment installer Prettier et l'utiliser au sein de Visual Studio Code, l'éditeur de code le plus répandu à l'heure actuelle.

Installation

Dans l'IDE Visual Studio Code, allez dans la partie "Extensions" et téléchargez l'extension "Prettier - Code Formatter"

Utilisation

Pour formater votre code, vous devez utiliser une commande directement dans VSCode. Pour cela, utilisez la combinaison de touches suivante sous Windows : Ctrl + Shift + P ou sous Mac : Cmd + Shift + P.

Dans la palette de commande qui s'ouvrira, tapez la commande suivante : Format Document. Bien évidemment, ayez un fichier JavaScript d'ouvert et soyez positionné dessus. Choisissez Prettier - Code formatter dans les choix proposés.

Votre code JavaScript s'en trouvera formater proprement !
Évidemment, rien ne vous empêche de le formater au propre au fur et à mesure que vous codez !

Prettier, fonctionne aussi sur les fichiers CSS.

Formater à la sauvegarde

L'idéal serait de formater le code à la sauvegarde de celui-ci et nous allons régler cela.

Ouvrez le menu Settings et cherchez Editor : Format On Save puis, assurez-vous que cette option soit correctement cochée.

Paramétrer Prettier

Il est tout à fait possible de définir des paramètres à Prettier selon le projet sur lequel vous travaillez si jamais vous n'avez pas les mêmes règles de formatage d'un projet à l'autre. Cela permet de configurer Prettier pour chaque développeur. Plus d'excuse si l'un d'entre vous ne range pas son code proprement.

Créez un fichier à la racine de votre projet nommé .prettierrc.json dans lequel vous pourrez renseigner quelques éléments comme les suivants :

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

Dans ce cas de figure, on demande de ne pas avoir de points virgules en fin d'instruction, à ce que l'indentation fasse 4 espaces et que tous les guillemets soient simples.

Dans la documentation officielle, vous trouverez tous les paramétrages possibles : https://prettier.io/docs/en/configuration.html