Prettier

Prettier est un outil développer par James Long. James, comme nous tous, se lassait de devoir se soucier du style de son code (combien de d'espaces au début de chaque nouvelle ligne, combien de retour à la ligne etc...). Ayant longtemps développer avec des technologies comme Go, au sein desquels la structure du fichier est directement pris en charge, il a décidé de développer un outil pour javascript : Prettier.

Prettier récupère le code que vous écrivez, le décompose en structure de syntaxe abstraite qui n'est d'autre que représentation de votre code. Il prend ensuite cette structure, supprime votre style et applique le style de code que vous avez défini en amont dans un fichier. Puisque que vous n'avez plus le contrôle sur votre code, vous n'avez plus du tout à y penser. Votre code est toujours cohérent, de même que celui de votre équipe.

Vous avez besoin de voir comment il fonctionne, aller sur leur page.

Maintenant, intégrons cet outil dans notre projet.

Vous pouvez installer prettier de manière globale :

npm install --global prettier

A partir de la, vous pouvez exécuter dans la console :

prettier src/App.js
# Vous obtiendrez une nouvelle version transformée de votre fichier

ou

prettier --write src/App.js
# Le script modifiera directement votre fichier

Prettier peut être paramétrer mais en général, il est assez bien construit pour ne pas avoir besoin de le configurer. Mais si toutefois, vous avez besoin de le faire, vous pouvez vous prendre toutes les informations ici.

Prettier peut également comprendre JSX et Typescript.

Prettier s'utilise très bien avec Visual Studio Code. Vous pouvez télécharger l'extension.

Conseil : Configurer visual studio pour qu'il ne fonctionne que s'il existe un fichier de configuration :

A présent, nous pouvons utiliser prettier dans notre projet. Nous allons créer .prettierrc qui est le fichier de configuration. Vous pouvez juste mettre {} ou alors le paramétrer comme ci-dessous.

{}

ou

{
  "arrowParens": "avoid",
  "singleQuote": false,
  "semi": false,
  "printWidth": 100
}