Formater du JavaScript

Comment ça marche

Quand vous examinez le script d'un site, cherchez une erreur ou essayez de comprendre un code copié ailleurs, le JavaScript arrive souvent sur une seule longue ligne où des centaines de fonctions sont collées par des points-virgules. Collez-le dans le volet de gauche. À droite, chaque instruction passe sur sa ligne, le corps des fonctions, les blocs if/else et les boucles sont indentés selon la largeur choisie, et les objets et tableaux sont dépliés pour que leurs valeurs se lisent. Vous décidez si l'accolade ouvrante reste sur la même ligne (if (a) {) ou descend à la suivante. Les espaces dans les chaînes, les gabarits (`...`) et les expressions régulières (/a{2}/) ne sont pas touchés : le code se comporte exactement comme avant, seule sa présentation change. Les noms courts laissés par un minificateur (a, b, n) ne reviennent pas, puisque les noms d'origine ne sont plus dans le fichier, mais la structure devient lisible. TypeScript et JSX sont en général bien indentés ; pour les annotations de type, rien n'est garanti. Si vous réglez Que faut-il faire ? sur Minifié, l'outil fait l'inverse : espaces et commentaires partent, les noms locaux raccourcissent ; si le code est illisible, la ligne et la colonne du problème s'affichent.

Cet outil est aussi connu sous le nom de formater javascript, javascript formatter en ligne, indenter du javascript, embellir du javascript, js beautifier, formater typescript.

Qu'est-ce que JavaScript ?

JavaScript est le langage de programmation qui fait agir les pages web : ouvrir un menu quand on touche un bouton, vérifier un formulaire avant l'envoi, mettre à jour le total d'un panier sur-le-champ. Le navigateur lit le code sans se soucier des lignes ni des espaces ; ce sont les points-virgules et les accolades qui séparent les instructions. Le même code peut donc être indenté pour la lecture ou tenir sur une ligne, et les sites en ligne livrent le plus souvent cette seconde version.

Qu'est-ce que Beautifier ?

Un beautifier (outil d'embellissement) ne change que l'aspect du code, jamais ce qu'il fait : il ajoute des retours à la ligne, indente les blocs et place des espaces autour des opérateurs. Contrairement aux outils de développement comme Prettier, il ne demande ni fichier de configuration ni installation : on colle le code une fois et on récupère le résultat. Cette page fait tourner la bibliothèque libre js-beautify dans votre navigateur.

Quelle différence entre formater et minifier du JavaScript ?

Formater range le code pour les personnes : retours à la ligne et retrait en plus, aucun nom ni aucune valeur modifiés. Minifier tasse le code pour le navigateur : espaces et commentaires supprimés, noms de variables locales ramenés à une lettre, code inutilisé retiré. La mise en forme se défait entièrement ; la minification perd pour de bon les commentaires et les noms d'origine, et reformater un code minifié ne rend que sa structure.

La mise en forme modifie-t-elle le code ?

Pas en mode indenté : on ajoute seulement des espaces, des retours à la ligne et du retrait, que JavaScript ignore. Le code mis en forme s'exécute donc pareil. Un seul point d'attention, les lignes sans point-virgule : JavaScript traite certains retours à la ligne comme une fin d'instruction, c'est pourquoi l'outil ne recolle jamais des lignes existantes d'une façon qui changerait leur sens.

L'outil n'exécute pas votre code et ne vérifie pas sa syntaxe ; un code erroné est indenté lui aussi. La mise en forme ne peut pas non plus rendre les noms d'origine : si un minificateur a transformé prixTotal en n, vous verrez n dans le code mis en forme. Seule une carte des sources (source map), si le développeur en a publié une, permet de revenir au code d'origine.

Indenté ou minifié ?

Le code indenté sert à lire, à chercher les erreurs et à travailler à plusieurs. Le code minifié sert à la mise en ligne : plus le script qui arrive au navigateur est léger, plus vite la page réagit.

L'option Minifié lance un passage terser classique : espaces et commentaires supprimés, noms locaux raccourcis, code mort retiré ; les commentaires de licence /*! restent. Pour choisir vous-même si les noms sont raccourcis ou si les appels console.log sont supprimés, et pour voir une comparaison avant/après en octets, utilisez l'outil Minifier du JavaScript.

• Lire le .min.js de quelqu'un d'autre → Indenté
• Remettre votre propre code au même retrait → Indenté
• Mettre en ligne → Minifié

Questions fréquentes

Comment rendre lisible un JavaScript minifié ?

Collez le code dans le volet de gauche de cette page. Chaque instruction passe sur sa ligne et les blocs sont indentés. Les noms de variables raccourcis ne reviennent pas, mais la structure devient lisible. Copiez le résultat ou téléchargez-le en fichier .js.

Puis-je formater du TypeScript ou du React (JSX) ?

En général oui : les balises JSX et la plupart des écritures TypeScript sont bien indentées. L'outil ne comprend pas les types, en revanche ; sur des définitions de types complexes ou des génériques (<T>), le retrait peut surprendre. Le sens du code ne change jamais, seuls les espaces bougent.

La mise en forme peut-elle casser mon code ?

Non. En mode indenté, seuls des espaces et des retours à la ligne sont ajoutés ; chaînes, gabarits et expressions régulières restent intacts. JavaScript ignore les espaces, le code fonctionne donc pareil.

Mon code est-il envoyé à un serveur ?

Non. La mise en forme comme la minification se font dans votre navigateur ; votre code ne quitte pas cette page.