Garder votre code propre avec Prettier

Hibou Gourou

Le formatage du code semble être un sujet trivial, mais c'est quelque chose qui peut affecter la qualité et l'exactitude de votre code, la façon dont il est contrôlé par version et la façon dont vous collaborez avec les autres. Si vous ne voulez pas vous enliser dans les détails de l'endroit où va chaque dernière accolade, essayez d'externaliser le problème à l'outil open-source, Prettier.

Questions de formatage

Les équipes de développement de logiciels ont perdu d'innombrables heures au cours de l'histoire à se disputer sur la longueur de ligne maximale ou sur la ligne sur laquelle une accolade devrait aller. Quelle que soit la préférence personnelle, la plupart des gens sont d'accord sur au moins une chose: le formatage du code doit être cohérent dans un projet.

Prettier est un outil conçu pour y parvenir. Donnez-lui du code et il vous remettra le même code, formaté de manière cohérente. Prettier a l'intégration d'un éditeur de texte, un outil de ligne de commande et une démo en ligne.

Parler la bonne langue

Tout d'abord, vous voudrez savoir si Prettier est compatible avec la ou les langues avec lesquelles vous travaillez généralement. Prettier se concentre actuellement sur un ensemble de langages de base principalement consacrés au développement Web frontal, notamment:

  • JavaScript
  • HTML
  • CSS
  • Toupet
  • Réduction
  • YAML

Il existe également un support ouvert pour des langues supplémentaires via des plugins.

Essayez Prettier en utilisant le terrain de jeu en ligne

Avant même d'essayer d'installer Prettier, vous voudrez peut-être visiter le terrain de jeu . À l'aide d'une interface Web, vous pouvez coller un exemple de code et observer comment Prettier le transformera. C'est un excellent moyen d'avoir une idée de ce que fait réellement l'outil, mais il peut également servir de méthode principale pour utiliser Prettier, si vos besoins sont plus légers.

Par défaut, le terrain de jeu devrait ressembler à deux panneaux d'édition de texte de base, un à gauche pour votre entrée, un à droite montrant la sortie de Prettier. Vous verrez un exemple de code au départ, mais vous pouvez simplement supprimer tout cela et coller le vôtre.

Par exemple, essayez de saisir le code JavaScript suivant:

 (function ()
 {
 window.alert('ok')
 }())

Plus joli devrait le transformer en:

 (function () {
 window.alert("ok");
 })();

Remarquez, par défaut, les modifications apportées par Prettier incluent:

  • Conversion de chaînes entre guillemets simples en chaînes entre guillemets
  • Ajout de points-virgules
  • Conversion de retraits en deux espaces

En bas à gauche se trouve un bouton vous permettant de visualiser les options. Avec l'exemple précédent, essayez d'ajuster la largeur de la tabulation, en basculant l' indicateur –single-quote sous Common ou en basculant l'indicateur –no-semi sous JavaScript .

Configurer les options

Prettier est auto-décrit comme «opiniâtre», un choix de conception délibéré qui signifie que le contrôle des spécificités est sacrifié pour la simplicité et la cohérence. Il est conçu pour que vous puissiez configurer, puis oublier, plutôt que de rester préoccupé par tous les derniers détails de mise en forme de votre code. (Pour une alternative avec un contrôle beaucoup plus fin sur chaque dernier détail de mise en forme, essayez eslint .)

Cependant, les auteurs reconnaissent également que certaines décisions ont un impact fonctionnel au-delà de l'apparence du code. Certaines options, dont certaines à des fins héritées, restent, vous devez donc au moins comprendre ce qu'elles font, même si vous utilisez Prettier dans son état par défaut.

La meilleure façon de gérer les options de Prettier est de les enregistrer dans un fichier de configuration. Il existe de nombreuses façons d'organiser cela, mais commencez par créer un fichier nommé .prettierrc.json dans votre répertoire de projet local. Il peut contenir l'une des options prises en charge dans un objet JSON standard, par exemple

 {
 "tabWidth": 8
 }

Le même fichier de configuration sera lu par Prettier que vous l'exécutiez via la ligne de commande ou un éditeur de texte pris en charge.

Installation de base et outil de ligne de commande

En utilisant du fil ou du npm, l'installation doit être simple. Pour le fil:

 $ yarn global add prettier

Et pour npm:

 $ npm install --global prettier

Une fois que vous avez installé Prettier globalement, vous devriez pouvoir taper:

 $ prettier

Par défaut, vous obtiendrez un écran de texte d'aide qui confirmera que l'outil est installé et fonctionne correctement.

Nettoyage d'un fichier

Pour reformater un fichier, utilisez une commande similaire à:

 $ prettier --write filename.js

Cela écrasera le fichier d'origine, ce qui est souvent l'approche la plus pratique. Alternativement, vous voudrez peut-être simplement que plus jolie agisse sur chaque fichier d'un projet:

 $ prettier --write .

Prettier fonctionnera sur tous les fichiers du répertoire courant, formatant tous ceux qu'il reconnaît.

Vous pouvez également imprimer le résultat sur la sortie standard, plutôt que de modifier le fichier d'origine, ce qui vous permet d'enregistrer la sortie dans un fichier différent, ou de la rediriger ailleurs:

 $ prettier test.js > test2.js

Vérification d'un fichier

Pour que Prettier rende compte de la propreté de votre code sans apporter de modifications, utilisez l'indicateur –check avec un seul nom de fichier ou plusieurs:

 $ prettier --check .

Vous obtiendrez une ligne de sortie pour chaque fichier qui ne correspond pas au format attendu, selon la configuration de Prettier:

 Checking formatting...
 [warn] .prettierrc
 [warn] .prettierrc.json
 [warn] Code style issues found in the above file(s). Forgot to run Prettier?

Options de ligne de commande

Les options standard de Prettier sont disponibles en tant qu'options de ligne de commande, si vous en avez besoin. Voici un exemple de la façon dont l' indicateur –single-quote affecte la sortie:

 $ prettier tmp.js
 function example() {
 console.log("hello, world");
 }
 $ prettier --single-quote tmp.js
 function example() {
 console.log('hello, world');
 }

Obtenir de l'aide

L'outil de ligne de commande fournit une aide informative sur n'importe quelle option via l'indicateur –help :

 $ prettier --help trailing-comma
 --trailing-comma <es5|none|all>
 Print trailing commas wherever possible when multi-line.
 Valid options:
 es5 Trailing commas where valid in ES5 (objects, arrays, etc.)
 none No trailing commas.
 all Trailing commas wherever possible (including function arguments).
 Default: es5

Utilisation d'un éditeur de texte

Une fois que vous avez installé Prettier, vous pouvez l'utiliser dans une variété de scénarios, en fonction de l'ensemble d'outils que vous utilisez déjà. Il y a de fortes chances que vous utilisiez un éditeur de texte. Prettier a des liaisons pour la plupart des plus populaires, alors voici comment en configurer trois:

Texte sublime

JsPrettier est un plugin Sublime Text qui rend Prettier disponible dans l'éditeur. Bien qu'il existe plusieurs façons d'installer JsPrettier, nous vous recommandons d'utiliser la méthode Package Control. Vous devrez déjà avoir installé Prettier, puis ouvrir la palette de commandes de Sublime Text et sélectionner «Package Control: Install Package»:

Recherchez ensuite «jsprettier» et cliquez pour l'installer:

Une fois JsPrettier installé, vous pouvez cliquer avec le bouton droit sur n'importe quel fichier ouvert pour le formater. Vous pouvez également définir la valeur de auto_format_on_save sur true dans les paramètres de JsPrettier, ce qui permettra à JsPrettier de nettoyer automatiquement tous les fichiers compatibles lorsque vous les enregistrez dans Sublime Text.

Atome

L'installation pour Atom est très similaire à Sublime Text: utilisez simplement le gestionnaire de paquets intégré de l'éditeur pour installer prettier-atom :

Une fois installé, l'utilisation est familière: un raccourci ou un élément de menu vous permet de formater un fichier à la demande, tandis qu'un paramètre Atom vous permet d'exécuter automatiquement Prettier chaque fois qu'un fichier est enregistré.

Vigueur

Vim est un éditeur basé sur la ligne de commande très puissant qui ne convient pas aux débutants. Obtenir Prettier pour travailler avec vim est convenablement compliqué, mais ce n'est encore que quelques étapes:

 mkdir -p ~/.vim/pack/plugins/start
 git clone https://github.com/prettier/vim-prettier 
 ~/.vim/pack/plugins/start/vim-prettier

Git est probablement le moyen le plus simple de télécharger les fichiers nécessaires, mais tout moyen d'obtenir vim-plus joli dans ce répertoire de démarrage devrait faire l'affaire.

Une fois installé, Prettier s'exécutera automatiquement lorsqu'un fichier est enregistré dans vi. Il peut également être exécuté manuellement à tout moment via la commande Prettier :

Ce qui devrait entraîner un fichier nettoyé:

Intégrez Prettier dans votre projet

L'utilisation d'un formateur de code tel que Prettier peut aider à maintenir une base de code plus facile à lire. Cela peut également aider à éviter les débats sur le style particulier à utiliser lors du codage – il suffit de sous-traiter ces décisions à Prettier!

Enfin, un hook git peut être configuré pour garantir que le code soit toujours nettoyé lorsqu'il est validé dans le référentiel de votre projet. Les développeurs individuels peuvent être libres de formater leur code comme ils le souhaitent, mais la copie centrale sera toujours propre et cohérente.