Désminifier et formater du code dans le navigateur
Sur une seule ligne, un fichier CSS de 80 Ko ne se lit pas. Collez-le ici et vous obtenez un code indenté de façon régulière. Cet embellisseur de code exécute Prettier 3 dans la page et traite JavaScript (JSX compris), JSON, CSS, SCSS, LESS et HTML.
Prettier ne reprend pas votre mise en page. Il analyse le code, puis le réécrit avec ses propres règles de retour à la ligne. Deux versions avec des espaces différents donnent donc le même résultat.
Quatre gestes pour passer du code brut au code propre
- Collez le code dans la zone de gauche, ou cliquez sur Code d’exemple pour charger un exemple du langage choisi.
- Laissez Langage sur « Détection automatique » ou choisissez-le. Le langage détecté s’affiche sous la zone.
- Réglez Indentation (2 espaces, 4 espaces ou tabulation) et Largeur de ligne (80, 100 ou 120). Pour JavaScript, ajoutez guillemets, points-virgules, virgules finales et espaces dans les accolades.
- Lisez le résultat à droite et le nombre de lignes avant et après, puis cliquez sur Copier ou Télécharger. Le fichier s’appelle
formatted.js,.json,.css,.scss,.lessou.html.
Réglages sans effet selon le langage
Les réglages qui ne s’appliquent pas à un langage sont grisés, et une note sous les paramètres les nomme. JSON ignore les guillemets et les virgules finales. CSS, SCSS et LESS ignorent points-virgules, virgules finales et espaces dans les accolades. HTML est un cas à part : le balisage n’a pas ces réglages, mais les blocs script et style de la page suivent vos choix.
Ce que Prettier modifie en plus des espaces
Avec les valeurs par défaut, Prettier remplace les guillemets simples par des doubles, ajoute les points-virgules manquants et place une virgule après le dernier élément d’une liste sur plusieurs lignes. Chacun de ces choix peut être inversé. Les commentaires restent. Les erreurs aussi : un bogue dans l’entrée se retrouve dans la sortie.
Un détail surprend dans les objets JSON et JavaScript : si la première clé est sur la même ligne que l’accolade ouvrante et que l’objet tient dans la largeur de ligne, il reste sur une seule ligne. Passez la première clé à la ligne et l’objet reste déployé.
Détection automatique, erreurs de syntaxe et limite de 2 000 000 de caractères
La détection est une estimation rapide, pas une analyse. Un texte qui commence par < est du HTML. Un texte qui commence par une accolade ou un crochet et se lit comme du JSON est du JSON. Des règles comme a { color: red; } sans function, const ni => forment une feuille de style, et les variables SCSS ou LESS désignent ces deux dialectes. Tout le reste est du JavaScript. Si l’estimation se trompe, choisissez le langage à la main.
Si le code ne se lit pas, vous voyez la ligne, la colonne et la première ligne du message de Prettier. Au-delà de 2 000 000 de caractères, l’outil refuse l’entrée. TypeScript, Vue et Markdown ne sont pas inclus.
Où va votre code pendant le formatage
À la première utilisation, la page charge depuis ce site les fichiers Prettier nécessaires. Ensuite, le formatage se fait en local et votre code n’est envoyé nulle part. Vous pouvez le vérifier dans l’onglet réseau du navigateur en cliquant sur un bouton. L’outil se contente d’analyser et d’imprimer le texte, il ne l’exécute jamais. Copier utilise le presse-papiers, Télécharger enregistre un fichier depuis la page.