Outils

Formateur JavaScript

Réindentez du JavaScript et du JSON minifiés ou désordonnés avec js-beautify, en choisissant la largeur d’indentation et le style d’accolades.

S’exécute dans le navigateurConvertisseurs de code9 k
Gratuit

Entrée

0 B

Résultat

Le résultat apparaîtra ici.

Un bundle minifié, un extrait sur une ligne tiré d’un rapport de bogue, un script copié depuis les DevTools : un JavaScript lisible est la première étape pour comprendre n’importe lequel d’entre eux. Cet outil utilise js-beautify, le formateur derrière beautifier.io et une longue liste d’extensions d’éditeur, qui réindente le code jeton par jeton sans avoir besoin de comprendre le programme entier. C’est pourquoi il s’accommode de fragments et même de code légèrement cassé qu’un analyseur complet rejetterait, et pourquoi il formate le JSON aussi bien que le JavaScript.

Comment ça marche

  • Les styles d’accolades correspondent à ceux de js-beautify : sur la même ligne, sur la même ligne avec les blocs courts gardés en ligne, chaque accolade sur sa propre ligne (Allman), ou else et catch renvoyés à la ligne.
  • Les lignes vides que vous avez laissées entre les blocs sont conservées, plusieurs à la suite étant réduites à une seule, sauf si vous désactivez cette option.
  • Le formatage restaure la mise en page, pas les noms : une variable minifiée appelée e reste e.
  • L’entrée n’est pas validée : une erreur de syntaxe est formatée avec tout le reste au lieu d’être signalée.

Où vont vos données

Nulle part. Cet outil s’exécute entièrement dans votre navigateur : le texte collé est traité par la page, jamais transmis à un serveur ni consigné dans un journal.

Cet outil est gratuit et ne demande aucun compte. Ses résultats n’existent que dans la page ouverte et ne sont enregistrés nulle part.

Ce que ça coûte

Cet outil est gratuit, sans connexion ni points.

Questions fréquentes

Peut-il retransformer du code de production minifié en code d’origine ?
Seulement la mise en page. Les minifieurs renomment les variables locales et suppriment les commentaires, et ces informations ont tout simplement disparu du fichier. Si le site publie des source maps, les DevTools de votre navigateur peuvent faire correspondre le code minifié aux sources d’origine, ce qui est le seul vrai moyen de retrouver les noms.
js-beautify ou Prettier ?
Prettier réimprime le code à partir d’une analyse complète et impose un style maison unique, ce que vous voulez à l’intérieur d’un dépôt. js-beautify n’ajuste que les espaces et l’indentation, ce qui le rend plus adapté pour lire rapidement du code que vous n’allez pas committer, y compris des fragments que Prettier refuserait d’analyser.
Gère-t-il TypeScript ou JSX ?
Pas de manière fiable. js-beautify comprend le JavaScript et traite correctement une bonne partie du TypeScript plus ou moins par hasard, mais les annotations de type, les génériques et les balises JSX peuvent ressortir bizarrement indentés. Prettier analyse correctement les deux et convient mieux pour eux.

L’open source derrière

Cet outil fonctionne grâce à beautifier/js-beautify, publié sous licence MIT. Si vous avez besoin du même comportement dans votre propre programme, c’est cette bibliothèque qu’il faut utiliser.

beautifier/js-beautify

Aussi appelé

  • formateur javascript
  • js beautify en ligne
  • déminifier javascript
  • formater code js
  • indenter javascript
  • beautifier javascript en ligne