Découverte de Prettier lors de notre Learning Expedition

Lors de notre Learning Expedition à la Sillicon Valley en mai, nous avons eu la chance de rencontrer Christopher Chedeau, le principal contributeur d’un projet dont nous entendons souvent parler : Prettier.
Ce projet open-source, affichant plus de 11 000 stars sur Github, vous permet d’assurer le même formatage à votre code JavaScript (un peu comme gofmt pour golang). Ne vous inquiétez pas, depuis quelques semaines, il est capable de gérer d’autres langages, mais nous y reviendrons plus tard.

L’intérêt premier d’utiliser ce genre d’outil dans votre projet est d’arrêter les combats internes sur la façon d’écrire son code ; une tabulation ou des espaces ? Un point virgule ou pas ? Des simples ou doubles quotes ? Ces questions n’ont pas vraiment d’intérêt. Nous sommes d’accord qu’il faut avoir un code uniforme, éventuellement un styleguide listant ces pratiques. Mais ce serait encore mieux un outil proposant de résoudre ce problème automatiquement, sans passer des heures à le configurer.
Vous vous posez peut-être la question, quelle est la différence avec ESLint ? En effet, ESLint propose nativement de corriger automatiquement les règles non respectées (via le paramètre fix). Donc certaines règles de formatage (longueur d’une ligne, point virgule, …) pourraient être résolues automatiquement. Et c’est le cas.
Le première différence entre ESLint et Prettier c’est la configuration. En effet, elle est très verbeuse et longue avec ESLint. Prettier a plutôt décidé de proposer peu d’options, mais de faire le choix d’être “opinionated”.
La deuxième différence est le fonctionnement interne. Ils se basent tous les deux sur un Abstract Syntax Tree. Le but premier de ESLint n’est pas de modifier le code, mais seulement de retourner des erreurs si des règles ne sont pas respectées. Depuis une version récente du produit, si on spécifie l’option –fix, ESLint ne va modifier que le noeud de l’AST source du problème. Tout le reste du code sera inchangé. Prettier, une fois l’AST créé, régénère un rendu complet, sans se baser sur le formatage d’origine.
Si vous voulez tester rapidement, il existe une démo en ligne vous permettant de vérifier le rendu généré par Prettier : https://prettier.io/ . Ensuite, si vous voulez sauter le pas, et intégrer Prettier à votre projet, n’ayez aucune crainte, vous pouvez l’utiliser de multiples façons : script NPM, via un plugin ESLint, ou encore dans votre IDE dès que vos fichiers sont sauvegardés. De nombreux projets célèbres l’ont déjà adopté : React, Jest, Yarn, Babel ou encore webpack-cli.
Maintenant, votre JavaScript est correctement formaté mais qu’en est-il pour vos feuilles de styles, votre TypeScript si vous faites du Angular ou encore du JSX dans vos applications React. Bonne nouvelle, Prettier est capable de formater également tous ces fichiers. Vous trouverez sur le README du projet la liste des extensions supportées. Bien évidemment, de nouvelles extensions seront supportées afin d’assurer la qualité de l’ensemble du code de votre projet.