Comment utiliser : Formateur JavaScript
- Collez du JavaScript (ou du JSON/JSX) dans JavaScript source, déposez un fichier
.jsou cliquez sur Exemple. - Choisissez l'indentation, une largeur de retour à la ligne facultative et votre style d'accolades. La sortie se met à jour instantanément.
- Copiez ou téléchargez le résultat. Utilisez le mode Minifier pour retirer les commentaires et les espaces d'un petit script.
Qu'est-ce qu'un formateur JavaScript ?
Un formateur JavaScript (ou embellisseur) recalcule l'indentation du code et place les instructions, les propriétés d'objets et les blocs sur des lignes séparées. Sa principale utilité est de décompresser les bundles de production pour pouvoir les lire pendant le débogage, mais il est tout aussi pratique pour nettoyer un extrait trouvé sur Stack Overflow, un bookmarklet ou du code collé depuis une messagerie. Cet outil utilise js-beautify, qui comprend la syntaxe moderne : fonctions fléchées, classes, chaînes de gabarit, async/await, chaînage optionnel, modules ES et JSX.
Styles d'accolades
| Option | Résultat |
|---|---|
| Même ligne (K&R / « 1TBS ») | if (ok) { — la convention de la plupart des guides de style JavaScript et de Prettier. |
| Même ligne, garder en ligne | Comme ci-dessus, mais les blocs courts comme { a: 1 } restent sur une seule ligne. |
| Ligne suivante (Allman) | Accolades ouvrantes sur leur propre ligne, fréquent dans les bases de code C#. |
| else sur nouvelle ligne | } et else sur des lignes séparées (proche de Stroustrup). |
Embellir n'est pas désobfusquer
Les minifieurs comme Terser ou esbuild renomment les variables locales en une seule lettre (function(e,t){…}). La mise en forme restaure la structure, mais elle ne peut pas retrouver les noms ni les commentaires d'origine : cette information a disparu. Si le site publie des source maps (//# sourceMappingURL=), les DevTools de votre navigateur peuvent afficher les sources originales à la place. Le code volontairement obfusqué (tableaux de chaînes, empaquetage avec eval) reste difficile à lire, même mis en forme.
À propos du minifieur
Le mode Minifier est un minifieur sûr pour les espaces et les commentaires, et non un compresseur complet. Il découpe correctement votre code en jetons (chaînes, chaînes de gabarit, expressions régulières littérales) et supprime les commentaires et les espaces, mais conserve un saut de ligne partout où le retirer pourrait modifier l'insertion automatique de points-virgules, par exemple après return ou avant ++. Deux contrôles de sécurité s'exécutent sur chaque résultat : la séquence de jetons doit être identique à l'entrée, et la sortie doit toujours être analysable. Comptez 20 à 40 % de réduction ; pour les bundles de production, un outil de build comme Terser ou esbuild renomme aussi les variables et supprime le code mort, pour des gains bien plus importants.
Problèmes courants
- « Ne s'analyse pas comme du JavaScript standard » — affiché pour du TypeScript, du JSX ou une véritable erreur de syntaxe. La mise en forme fonctionne toujours ; la minification exige du JavaScript valide.
- JSON se formate correctement ici, mais le Formateur JSON le valide aussi et indique l'erreur exacte.
- Vous voulez comparer un fichier avant et après une modification ? Collez les deux versions dans le Comparateur de texte.
Aussi recherché comme : embellisseur js, js beautifier, décompresser javascript, minifier javascript, formater du js en ligne, mettre en forme javascript, jsx formatter.
Outils complémentaires : Formateur JavaScript
- Code en image — Collez un extrait et obtenez une capture de code soignée en quelques secondes : coloration syntaxique pour JavaScript, TypeScript, Python, CSS, HTML, JSON, SQL, Bash, Go et PHP, un choix de thèmes, un cadre de fenêtre avec un nom de fichier, un fond en dégradé ou transparent, des marges et des numéros de ligne.
- Formateur HTML — Collez du balisage minifié ou désordonné et obtenez un HTML propre, indenté de manière cohérente, y compris les blocs <style> et <script> intégrés.
- Formateur CSS — Transformez une feuille de style minifiée en CSS lisible, avec une propriété par ligne et des blocs @media correctement imbriqués.
- Testeur d’expressions régulières — Saisissez un modèle et observez les correspondances s'afficher en temps réel dans votre texte de test.
Questions fréquentes
Peut-on décompresser du JavaScript provenant d'un site web ?
.min.js et il sera mis en forme de manière lisible. Les noms de variables raccourcis par le minifieur (comme e, t, n) ne peuvent pas être restaurés, et les commentaires sont définitivement perdus.