Accueil/Notions/Prettier

Prettier

Prettier est un outil de formatage de code, très utilisé pour rendre les codes sources plus lisibles et uniformes, quelle que soit la personne qui écrit le code. Si tu as déjà travaillé en équipe, tu sais que chacun a sa manière de formater le code, ce qui peut créer des différences de style qui rendent la lecture et la maintenance du code plus compliquées.

Comment fonctionne Prettier ?

Lorsque tu passes ton code à travers Prettier, l'outil le réécrit en suivant un ensemble de règles de formatage prédéfinies. Cela inclut, par exemple, la manière de couper les lignes, l'espacement autour des opérateurs et des blocs de code, l'indentation, etc. Ce qui est intéressant, c'est que Prettier ne se contente pas de modifier les espaces et les indentations, il analyse aussi ton code de façon syntaxique grâce à ce qu’on appelle un "parser". Cela signifie qu’il comprend la structure de ton code avant de le reformater. C’est différent d’autres outils de linting qui se basent plus sur des règles textuelles.

Pourquoi utiliser Prettier ?

  1. Consistance : Tout le monde dans ton équipe produira un code qui "ressemble" au même style, indépendamment de leurs préférences personnelles en matière de formatage.
  2. Économie de temps : Tu n’as plus à te soucier de formater ton code manuellement ou de discuter des styles de codage avec tes collègues. Prettier s'en charge pour toi.
  3. Intégration facile : Tu peux intégrer Prettier dans ton éditeur de code (comme VSCode, Sublime Text, etc.) ou dans ton processus de build (comme un script dans package.json si tu travailles avec Node.js). Il peut également être utilisé avec des Git hooks pour formater le code avant de le commit.

Comment le configurer ?

Prettier est assez flexible; il permet de personnaliser certaines règles via un fichier de configuration .prettierrc. Tu peux définir des options comme la largeur maximale d'une ligne, le nombre d'espaces par niveau d'indentation, etc. Voici un exemple de configuration simple :

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

Dans cet exemple, les points-virgules en fin de ligne sont omis (semi: false), les guillemets simples sont utilisés au lieu des doubles (singleQuote: true), une virgule est ajoutée après le dernier élément des objets et tableaux si c’est compatible avec ECMAScript 5 (trailingComma: "es5"), et l’indentation est faite avec deux espaces par niveau (tabWidth: 2).

En résumé,

Prettier te prend par la main pour que tu ne te soucies plus de comment ton code est formaté mais que tu te concentres sur ce qu’il fait. C’est comme avoir un assistant qui range ton bureau tous les soirs, pour que tu puisses commencer chaque jour dans un environnement propre et ordonné.

Pour approfondir ta compréhension et maîtrise du formatage de code et des outils de développement qui l'accompagnent, voici une liste de notions et technologies complémentaires à explorer :

  1. ESLint : Un outil d'analyse statique pour identifier les motifs problématiques trouvés dans le code JavaScript. Apprends à l'utiliser en tandem avec Prettier pour non seulement formater ton code mais aussi pour en assurer la qualité.

  2. Stylelint : Similaire à ESLint, mais focalisé sur les feuilles de style (CSS). Cela te permettra de maintenir la qualité de ton code CSS.

  3. EditorConfig : Un outil qui aide les développeurs à maintenir des styles de codage cohérents entre différents éditeurs et IDE. C’est utile si tu travailles avec plusieurs outils ou dans une équipe où les gens utilisent différents environnements de développement.

  4. Git Hooks : Apprends à utiliser des hooks Git pour automatiser des tâches comme le formatage de code chaque fois que tu fais un commit ou avant de pousser tes modifications sur le serveur.

  5. Pipelines CI-CD : Intègre Prettier dans tes pipelines de Intégration continue |Continuous Integration/Déploiement continu |Continuous Deployment pour assurer que tout code déployé respecte les normes de formatage définies.

Ces sujets te permettront non seulement de mieux gérer la qualité et la cohérence de ton code, mais aussi d’améliorer ta productivité et celle de ton équipe.