Code Formatter (Prettier) — Formateur de code

Ce que fait ce formateur de code

Cet outil exécute Prettier, le formateur de code aux choix affirmés utilisé par une grande partie de l'écosystème JavaScript, directement dans votre navigateur. Prettier ne se contente pas de réindenter les lignes : il analyse votre code source pour en faire un arbre syntaxique, puis le réimprime entièrement selon un petit ensemble de règles. C'est pourquoi le résultat reste cohérent, quel que soit le désordre de l'entrée : les longues listes d'arguments sont renvoyées à la ligne, les objets ne sont répartis sur plusieurs lignes que lorsqu'ils dépassent la largeur d'impression, les guillemets et les points-virgules suivent une seule convention et les espaces en fin de ligne disparaissent.

Vous pouvez formater JavaScript, JSX, TypeScript et TSX, les trois principaux dialectes de feuilles de style (CSS, SCSS et Less), du HTML avec styles et scripts intégrés, du JSON, des schémas et requêtes GraphQL, des documents Markdown et des fichiers de configuration YAML. Chaque langage utilise son propre plugin Prettier, et seul celui dont vous avez besoin est chargé : la page reste légère tant que vous ne formatez rien.

Les options expliquées

Print width (largeur d'impression) est la longueur de ligne que Prettier s'efforce de ne pas dépasser ; 80 est la valeur par défaut, et 100 ou 120 sont courants dans les équipes équipées d'écrans larges. Tab width définit le nombre d'espaces d'un niveau d'indentation, et Indent with permet de choisir entre espaces et vraies tabulations. Semicolons détermine si les instructions JavaScript et TypeScript se terminent par un point-virgule ; lorsque l'option est désactivée, Prettier n'en ajoute que là où c'est nécessaire pour lever une ambiguïté. Single quotes privilégie ' plutôt que " pour les chaînes lorsque cela n'ajoute pas d'échappement. Ces options correspondent une à une aux réglages d'un fichier .prettierrc, ce qui vous permet de reproduire la configuration de votre projet.

Privé et pratique

Tout se passe en local : le formateur n'envoie jamais votre code, ne le stocke pas et ne le transmet à aucune API. Il convient donc au code propriétaire, aux fichiers de configuration contenant des noms d'hôtes internes ou aux extraits copiés pendant un incident en production. Lorsque l'analyseur rencontre une erreur de syntaxe, le message indique la ligne et la colonne, et le curseur se place à cet endroit de l'entrée : un moyen rapide de retrouver une accolade manquante dans un gros fichier JSON ou YAML. Au quotidien, gardez Prettier dans votre éditeur et votre CI ; utilisez cette page lorsque vous êtes sur une machine sans vos outils, que vous relisez un extrait reçu par messagerie ou que vous nettoyez du code avant de le coller dans une documentation.