Garder votre code propre avec Prettier

La mise en forme 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 enliser dans les détails de la destination de chaque dernière accolade, essayez d'externaliser le problème vers 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 maximale de la ligne 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 une intégration d'é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 illimité 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 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 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 doit 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:

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

Plus joli devrait le transformer en:

(fonction () {
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 l'onglet, en basculant le --simple citation drapeau sous Commun, ou basculer le --no-semi drapeau 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, 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 Options plus jolies consiste à 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.

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

$ yarn global ajouter plus joli

Et pour npm:

$ npm install - plus joli dans le monde

Une fois que vous avez installé Prettier dans le monde entier, vous devriez être en mesure de taper:

$ plus jolie

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 à:

$ 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 plus joli pour agir sur chaque fichier d'un projet:

$ plus joli --écrire.

Prettier fonctionnera sur tous les fichiers du répertoire courant, en 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

Vérification d'un fichier

Pour que Prettier rende compte de la propreté de votre code sans apporter de modifications, utilisez le --Chèque drapeau avec un seul nom de fichier ou plusieurs:

$ plus jolie --check.

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

Vérification du formatage ...
[avertir] .prettierrc
[avertir] .prettierrc.json
[avertir] Problèmes de style de code trouvés dans le (s) fichier (s) ci-dessus. Vous avez oublié d'exécuter Prettier?

Options de ligne de commande

Les options standard de Prettier sont disponibles sous forme d’options de ligne de commande, si vous en avez besoin. Voici un exemple de la façon dont le --simple citation flag affecte la sortie:

$ plus joli tmp.js
exemple de fonction () {
console.log ("bonjour, monde");
}
$ plus joli - citation unique tmp.js
exemple de fonction () {
console.log ('bonjour, monde');
}

Obtenir de l'aide

L'outil de ligne de commande fournit une aide informative sur n'importe quelle option via le --aider drapeau:

$ plus jolie --help fin-virgule
--trailing-virgule 
Imprimez des virgules de fin dans la mesure du possible lorsque vous utilisez plusieurs lignes.
Options valides:
es5 Les virgules de fin 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

Utilisation d'un éditeur de texte

Une fois que vous avez installé Prettier, vous pouvez l’utiliser dans divers 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 à vrai dans les paramètres de JsPrettier, ce qui entraînera le nettoyage automatique de 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 packages intégré de l'éditeur pour installer plus joli-atome:

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. Faire fonctionner Prettier avec vim est compliqué, mais il ne s’agit que de quelques étapes:

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

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 le travail.

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 Plus jolie commander:

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.

nano vs. Vim: les meilleurs éditeurs de texte de terminaux, comparés

Vous recherchez un éditeur de texte de terminal pour Linux? Le choix principal est entre Vim et nano! Voici comment ils se comparent.

A propos de l'auteur