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é en version et la façon dont vous collaborez avec les autres. Si vous ne voulez pas vous perdre dans les détails de l'emplacement de chaque dernière accolade, essayez de sous-traiter le problème à l'outil open source Prettier.
Les équipes de développement de logiciels ont perdu d'innombrables heures à travers l'histoire à se disputer sur la longueur de ligne maximale ou sur quelle ligne une accolade doit aller. Quelles que soient leurs préférences personnelles, la plupart des gens s'accordent sur au moins une chose :la mise en forme du code doit être cohérente dans l'ensemble d'un projet.
Prettier est un outil conçu pour y parvenir. Donnez-lui du code et il vous rendra le même code, formaté de manière cohérente. Prettier intègre un éditeur de texte, un outil de ligne de commande et une démo en ligne.
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 :
Il existe également une prise en charge illimitée de langues supplémentaires via des plug-ins.
Avant même d'essayer d'installer Prettier, vous voudrez peut-être vérifier 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 cela peut également servir de méthode principale pour utiliser Prettier, si vos besoins sont plutôt légers.
Par défaut, le terrain de jeu devrait ressembler à deux panneaux d'éditeur de texte de base, un à gauche pour votre entrée, un à droite montrant la sortie de Prettier. Vous verrez d'abord un exemple de code, mais vous pouvez simplement supprimer tout cela et coller le vôtre.
Par exemple, essayez de saisir le code JavaScript suivant :
(fonction ()
{
fenêtre. alerte('ok')
}()) Prettier devrait le transformer en :
(fonction () {
window.alert("ok");
})(); Notez, par défaut, les modifications apportées par Prettier :
En bas à gauche se trouve un bouton permettant de visualiser les options. Avec l'exemple précédent, essayez d'ajuster la largeur de tabulation, en basculant le --single-quote indicateur sous Commun , ou basculer le --no-semi indicateur sous JavaScript .
Prettier se décrit lui-même comme "opiniâtre", un choix de conception délibéré qui signifie que le contrôle des spécificités est sacrifié au profit de la simplicité et de la cohérence. Il est conçu pour que vous puissiez le configurer, puis l'oublier, plutôt que de rester préoccupé par le moindre détail de formatage de votre code. (Pour une alternative avec un contrôle beaucoup plus précis sur chaque 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, y compris 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 plusieurs 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 n'importe laquelle 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.
En utilisant du fil ou du npm, l'installation devrait être simple. Pour le fil :
$ yarn global add plus joli Et pour npm :
$ npm install --global plus joli Une fois que vous avez installé Prettier globalement, vous devriez pouvoir taper :
$ plus joli Par défaut, vous obtiendrez un écran de texte d'aide qui confirmera que l'outil est installé et fonctionne correctement.
Pour reformater un fichier, utilisez une commande similaire à :
$ plus joli --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 joli agisse sur chaque fichier d'un projet :
$ plus joli --write . Prettier s'exécutera sur tous les fichiers du répertoire actuel, 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 autre fichier ou de la rediriger ailleurs :
$ plus joli test.js> test2.js Pour que Prettier rende compte de la propreté de votre code sans apporter de modifications, utilisez la commande --check flag avec soit un seul nom de fichier, soit plusieurs :
$ plus joli --check . Vous obtiendrez une ligne de sortie pour chaque fichier qui ne correspond pas au format attendu, selon la configuration de Prettier :
Vérification de la mise en forme...
[avertir] .prettierrc
[avertir] .prettierrc.json
[warn] Problèmes de style de code trouvés dans le(s) fichier(s) ci-dessus. Vous avez oublié d'exécuter Prettier ? 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 le --single-quote le drapeau affecte la sortie :
$ plus joli tmp.js
fonction exemple() {
console.log("bonjour, monde");
}
$ plus joli --single-quote tmp.js
fonction exemple() {
console.log('bonjour, monde');
} L'outil de ligne de commande fournit une aide informative sur n'importe quelle option via --help drapeau :
$ plus joli --help trailing-comma
--trailing-comma
Imprimez des virgules de fin dans la mesure du possible lorsqu'il s'agit de plusieurs lignes.
Options valides :
es5 Virgules de fin lorsqu'elles sont valides dans ES5 (objets, tableaux, etc.)
aucun Aucune virgule de fin.
toutes les virgules de fin dans la mesure du possible (y compris les arguments de fonction).
Par défaut :es5 Une fois que vous avez installé Prettier, vous pouvez l'utiliser dans une variété de scénarios, selon 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 fixations pour la plupart des fixations populaires, alors voici comment en configurer trois :
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 ouvrez la palette de commandes de Sublime Text et sélectionnez "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 à vrai dans les paramètres de JsPrettier, ce qui entraînera le nettoyage automatique par JsPrettier de tous les fichiers compatibles lorsque vous les enregistrez dans Sublime Text.
L'installation pour Atom est très similaire à Sublime Text :utilisez simplement le gestionnaire de packages 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é.
Vim est un éditeur en ligne de commande très puissant qui ne convient pas aux débutants. Faire en sorte que Prettier fonctionne avec vim est bien compliqué, mais il ne s'agit encore que de 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-prettier 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 le Prettier commande :
Ce qui devrait aboutir à un fichier nettoyé :
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 crochet git peut être configuré pour s'assurer que le code est 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.