Embellir le JavaScript _

Comment fonctionne l'embellissement JavaScript

L'embellisseur lit votre code caractère par caractère, suit le niveau d'imbrication de chaque instruction et le réémet avec un espacement cohérent. Il ne modifie jamais ce que fait le code — seulement son apparence.

1. Tokeniser. La bibliothèque analyse votre saisie en un flux de tokens : mots-clés, identifiants, chaînes, opérateurs et ponctuation. Les chaînes, les littéraux de gabarit et les littéraux d'expression régulière sont reconnus comme des unités uniques, de sorte qu'une accolade à l'intérieur d'une chaîne n'est jamais confondue avec un délimiteur de bloc.
2. Suivre l'imbrication. En parcourant le flux de tokens, l'embellisseur maintient un niveau d'indentation courant. Chaque accolade ouvrante, crochet ou parenthèse approfondit le niveau ; chaque fermeture le remonte. Cette profondeur détermine le nombre d'unités d'indentation placées devant chaque ligne renvoyée.
3. Appliquer vos options. Votre choix d'indentation (2 espaces, 4 espaces ou une tabulation) définit la largeur d'un niveau. Le réglage du style d'accolades détermine si une accolade ouvrante reste sur la même ligne que l'instruction qui la précède ou tombe sur sa propre ligne. Le plafond de lignes vides écrase les longues séries de lignes vides à la limite que vous choisissez.
4. Réémettre. Enfin, le formateur imprime les tokens avec l'indentation et les sauts de ligne qu'il a déterminés, en ajoutant optionnellement les points-virgules que l'insertion automatique aurait fournis à l'exécution. Le résultat est le même programme, présenté de façon qu'un être humain puisse le lire.

Pourquoi embellir le JavaScript

• Lire du code minifié. Les bundles de production s'expédient sur une ligne avec des noms de variables d'une seule lettre. Embellir restaure les sauts de ligne et l'indentation pour que vous puissiez retracer un bug jusqu'à l'instruction qui l'a causé, même sans source map.
• Corriger des fichiers incohérents. Le code que plusieurs personnes ont touché dérive vers des indentations et des styles d'accolades mélangés. Un passage dans l'embellisseur normalise l'ensemble du fichier vers une mise en forme unique, ce qui fait que le diff suivant montre de vrais changements de logique plutôt que du bruit d'espaces.
• Cet outil n'alourdit pas votre page. La plupart des formateurs en ligne chargent leur bibliothèque entière dès l'ouverture de la page. Celui-ci charge js-beautify en différé seulement quand vous cliquez sur Embellir ou activez le mode en direct, de sorte qu'ouvrir la page coûte quelques kilo-octets au lieu de quelques centaines, et le rendu initial reste rapide.
• Rien ne quitte votre navigateur. L'embellisseur tourne entièrement sur votre appareil. Votre code n'est jamais envoyé à un serveur, ce qui compte quand le script que vous inspectez appartient à un client, contient des chemins d'API internes ou est soumis à un accord de confidentialité.

Applications courantes

Embellir du JavaScript survient chaque fois que quelqu'un a besoin de lire du code qui n'a pas été écrit pour être lu.

• Débogage en production : coller un bundle minifié extrait de l'onglet Réseau pour trouver la fonction derrière une trace d'erreur que l'on ne peut autrement déchiffrer.
• Préparation de revue de code : reformater le fichier à indentation incohérente d'un contributeur avant d'ouvrir la pull request pour que les relecteurs voient la logique, pas le désordre de mise en forme.
• Audits de sécurité et de conformité : développer un snippet d'analytique ou de publicité tiers pour confirmer exactement ce qu'il fait avant sa mise en ligne.

Un exemple concret

Prenez un one-liner minifié : function f(a){if(a){return a*2}else{return 0}}. Collez-le ci-dessus avec une indentation de 2 espaces et le style d'accolades Collapse, puis cliquez sur Embellir. Vous récupérez un bloc lisible : function f(a) {, puis un if (a) { indenté, l'instruction return a * 2; imbriquée un niveau plus bas, et les accolades correspondantes alignées en dessous. Passez le style d'accolades à Expand et chaque accolade ouvrante tombe sur sa propre ligne. Changez l'indentation en Tabulations et chaque niveau passe de deux espaces à un caractère de tabulation. La structure est identique ; seule la mise en forme change.

FAQ

Cela s'exécute-t-il dans mon navigateur ?

Oui. La bibliothèque js-beautify est chargée en différé la première fois que vous cliquez sur Embellir ou activez le mode en direct, puis mise en cache. Votre code ne quitte jamais la page — aucun aller-retour serveur, aucun envoi.

Embellir est-il identique à déminifier ?

Cela restaure une mise en forme lisible — indentation, sauts de ligne et espacement — mais ne peut pas récupérer les noms de variables originaux ni les commentaires que la minification a supprimés. Si une source map existe, les DevTools de votre navigateur peuvent retrouver les noms d'origine ; un embellisseur seul ne travaille qu'avec ce qui est dans le fichier.

L'embellissement changera-t-il le comportement de mon code ?

Non. L'embellissement ne fait qu'ajouter et supprimer des espaces et des sauts de ligne ; le programme s'exécute de manière identique. La seule option qui touche les tokens est « Ajouter les points-virgules manquants », qui insère les terminateurs d'instruction que l'insertion automatique de points-virgules aurait ajoutés à l'exécution de toute façon, rendant le code sûr à minifier ensuite.

Que signifient les options de style d'accolades ?

Collapse maintient une accolade ouvrante sur la même ligne que l'instruction (if (x) {), ce qui est la convention JavaScript habituelle. Expand place chaque accolade ouvrante sur sa propre ligne (le style Allman). End-expand maintient l'accolade ouvrante attachée mais place else et catch sur une nouvelle ligne après l'accolade fermante.

L'embellissement JavaScript côté navigateur vous donne du code lisible sans étape de compilation ni envoi. Collez un script minifié ou désordonné, choisissez votre indentation et votre style d'accolades, puis copiez ou téléchargez le résultat. Rien ne quitte votre appareil, aucun compte n'est nécessaire, et la bibliothèque ne se charge que lorsque vous le demandez — ouvrir cette page ne vous coûte que quelques kilo-octets, pas un méga-octet.