Formatez instantanément le code JavaScript pour améliorer la lisibilité, le débogage et le flux de développement.
Introduction
Du JavaScript minifié pour la production, ou simplement tapé vite sans trop soigner la forme, peut être réellement difficile à lire : aucune indentation cohérente, plusieurs instructions tassées sur une même ligne, des blocs qu'on ne distingue pas les uns des autres à l'œil. Le formatage réécrit ce code en ajoutant l'indentation, les retours à la ligne entre les instructions et un espacement régulier, sans changer ce que le code fait. La logique, les noms de variables et le comportement restent exactement les mêmes ; seule l'allure du code à l'écran change. Pour qui apprend à lire du JavaScript et pas seulement à en écrire, la distinction compte : un même script peut sembler intimidant en une seule ligne compacte et devenir tout à fait abordable une fois déplié en instructions et en blocs correctement indentés.
Comment cet outil formate votre code
Cet outil parcourt le code collé morceau par morceau, en reconnaissant les chaînes, les commentaires, les parenthèses et les opérateurs comme des éléments distincts, plutôt qu'en insérant des retours à la ligne par reconnaissance de motifs dans le texte. C'est ce qui lui permet de distinguer correctement un / qui ouvre un commentaire, un autre qui fait partie d'une expression régulière et un troisième qui marque une division, là où un outil purement textuel se tromperait. Il reconstruit l'indentation de façon cohérente, à raison de trois espaces par niveau d'imbrication, et place ses propres retours à la ligne d'après la structure du code, en donnant une ligne à chaque instruction et à chaque bloc. Les commentaires sont conservés et formatés avec le reste, non supprimés : un commentaire expliquant une fonction, ou un en-tête de licence, reste dans le résultat.
Les points-virgules sont reformatés sur place, ni ajoutés ni retirés. Dans bien des cas, JavaScript autorise une instruction à se terminer sans point-virgule : la spécification officielle du langage comble le manque d'elle-même, par une règle appelée insertion automatique du point-virgule, et certains développeurs écrivent délibérément ainsi. Cet outil ne tranche pas ce choix de style : si votre code d'origine n'a aucun point-virgule, le résultat n'en aura pas davantage ; s'il en a, ils restent exactement là où ils étaient, simplement réagencés autour de la nouvelle indentation et des nouveaux retours à la ligne. Bon à savoir si vous vous servez de cet outil pour enseigner ou apprendre comment se terminent les instructions en JavaScript, puisqu'il ne « corrigera » pas un style en l'autre.
À savoir avant de l'utiliser
Deux points à connaître avant de coller du vrai code ici :
- Les lignes vides ne sont pas conservées. C'est l'outil qui décide où placer les retours à la ligne, d'après la structure du code et non d'après l'endroit où vous aviez laissé des lignes vides dans votre texte collé. Si elles vous servaient à séparer visuellement les parties d'un script, ce découpage ne survivra pas forcément au formatage : la logique et toutes les instructions seront bien là, mais sans vos regroupements d'origine.
- Les littéraux de gabarit, ces chaînes entre accents graves, ne sont pas reconnus comme des chaînes. Le JavaScript moderne permet de construire des chaînes avec des accents graves et des expressions insérées à l'intérieur, comme
`Hello, ${name}`. L'outil ne traite pas le texte délimité par des accents graves comme une chaîne, contrairement au texte entre guillemets ordinaires : du code qui repose sur ces littéraux peut donc ressortir mal formaté autour de ces passages. Si un script en utilise, relisez attentivement cette partie du résultat après le formatage, ou formatez le reste du script et laissez ces lignes telles quelles.
Ni l'un ni l'autre ne change ce que fait votre code d'origine : vous travaillez toujours à partir de ce que vous avez collé vous-même, et rien n'est modifié tant que vous ne recopiez pas le résultat dans votre projet.
Quand cet outil est le bon choix
- Lire le script minifié de quelqu'un d'autre. Consulter le JavaScript d'un site public depuis les outils de développement d'un navigateur révèle souvent un fichier dense et sans aucun formatage : le coller ici et le formater rend possible l'étude réelle de son fonctionnement, un usage d'éducation numérique à part entière et pas un simple nettoyage de code.
- Relire le code rendu par un élève. Un script qui arrive sans formatage cohérent est plus lent à lire et à évaluer ; le formater d'abord accélère la correction et facilite le retour.
- Nettoyer son propre code avant de rendre un devoir. Un formatage cohérent permet à un enseignant, ou à vous-même dans quelques mois, de suivre la logique plus facilement.
- Préparer un exemple de code pour un cours. Une fonction écrite à la hâte en préparant une séance finit souvent dense et pénible à suivre au vidéoprojecteur ; la formater d'abord donne un code propre et régulièrement indenté, que la classe lit plus aisément depuis le fond de la salle.
Pour du code qui s'appuie beaucoup sur les littéraux de gabarit, ou pour un projet moderne de grande taille où vous avez besoin d'un résultat garanti, l'outil de formatage intégré à un éditeur de code est un choix plus sûr, en raison de la limite décrite plus haut. Cet outil est à son meilleur sur des scripts de la taille habituelle d'un travail scolaire.
Exemple
Un élève trouve sur un site de tutoriels un court script interactif, minifié en une seule ligne compacte, et veut comprendre son fonctionnement avant de l'adapter à son propre projet. En le collant dans cet outil, il le voit se déplier en instructions et en blocs correctement indentés, ce qui lui permet enfin de lire la logique : quelle fonction se déclenche sur quel événement, où une boucle commence et où elle se termine, au lieu de parcourir une ligne de code ininterrompue.
Questions fréquentes
Le formatage change-t-il l'exécution de mon code ?
Non. Seule la forme change, c'est-à-dire l'indentation, les retours à la ligne et l'espacement ; la logique et le comportement restent identiques.
Mes commentaires seront-ils conservés ?
Oui. Les commentaires, en-têtes de licence compris, sont préservés et formatés avec le reste du code.
Gère-t-il les littéraux de gabarit, ces chaînes entre accents graves ?
Pas de façon fiable. Du code utilisant `like this ${example}` peut ressortir mal formaté autour de ces passages : relisez cette partie du résultat, ou laissez ces lignes sans y toucher.
Mon code est-il enregistré quelque part ?
Non. Le code collé est traité pour produire le résultat formaté et n'est pas conservé ensuite ; seul le fait que l'outil a été utilisé est enregistré, pas le code lui-même.
Ajoute-t-il ou retire-t-il des points-virgules ?
Non. Les points-virgules restent exactement tels qu'ils apparaissent dans votre code d'origine, simplement réagencés autour de la nouvelle indentation et des nouveaux retours à la ligne : si votre code n'en a aucun, le résultat n'en aura aucun non plus.
Puis-je formater plusieurs scripts à la fois ?
Collez et traitez un script à la fois. Réunissez d'abord les fichiers s'il vous les faut formatés ensemble, ou répétez l'opération pour chacun.
Quels outils associés puis-je utiliser ?
Utilisez CSS Beautifier ou HTML Beauty pour formater d'autres langages, ou CSS Minifier lorsque vous êtes prêt à compresser votre CSS pour la production.
