Formateur et minificateur JavaScript

Qu’est-ce qu’un formateur JavaScript ?#

Un formateur JavaScript prend du code difficile à lire — la sortie minifiée d’un bundler, un extrait replié copié depuis une conversation, ou simplement un fichier édité par cinq personnes avec cinq habitudes d’indentation différentes — et le réécrit pour que la structure soit visible. L’indentation correspond à l’imbrication, les opérateurs ont un espacement cohérent, et les instructions se terminent là où vous vous y attendez. Un bon formateur fait aussi l’inverse : retirer tout ce qui n’est pas essentiel quand vous avez besoin de la charge utile la plus petite possible.

Cette page fait les deux travaux, et elle est honnête sur le fonctionnement de chacun. Formater est piloté par la version autonome de Prettier avec l’analyseur Babel — le même moteur que de nombreuses équipes lancent dans leur éditeur à la sauvegarde, donc la sortie ici correspond à ce que votre projet produirait. Compresser est délibérément conservateur : il retire les commentaires et condense les espaces tout en conservant chaque saut de ligne, afin que l’insertion automatique de points-virgules (ASI) ne casse jamais. Ce n’est pas un minificateur au niveau des jetons comme esbuild ou terser — il ne renomme pas les variables, ne supprime pas le code mort et n’altère pas les noms de propriétés. Cela le rend sûr à renvoyer directement à un moteur JS, mais c’est le mauvais outil pour réduire un bundle de production. Connaître la différence est tout l’intérêt de bien l’utiliser.

Mode d’emploi#

1. Collez votre JavaScript dans le panneau JavaScript à gauche, ou cliquez sur Exemple pour charger un court exemple.
2. Choisissez un style d’Indentation dans la barre d’outils : 2, 4 ou tabulation. Deux espaces est le défaut quasi universel dans les projets modernes ; ne choisissez tabulation que si vous allez coller dans un éditeur configuré pour les tabulations.
3. Cliquez sur une action :
   • Formater — réimprime le code via Prettier avec l’indentation choisie. Les points-virgules sont émis par défaut, conformément au comportement standard de Prettier.
   • Compresser — retire les commentaires de ligne // et les commentaires de bloc /* */, condense les suites d’espaces et de tabulations, et supprime les espaces en fin de chaque ligne. Les sauts de ligne sont conservés exprès.
4. Lisez le résultat dans le panneau Sortie à droite. Utilisez Copier dans l’en-tête de sortie pour le récupérer. Effacer vide les deux panneaux.

Si Formater ne peut pas analyser votre entrée (un crochet parasite, un littéral de gabarit non terminé), la barre d’état affiche le message d’erreur de Prettier au lieu de produire une sortie cassée — donc vous corrigez le vrai problème plutôt que de chasser une mise en forme trompeuse.

Principales fonctionnalités#

• Le vrai moteur Prettier. Formater exécute la version autonome de Prettier avec les plugins Babel + estree, pas un embellisseur fait maison. Ce que vous obtenez ici est ce que produit prettier --write.
• Compression sûre pour l’ASI. Les sauts de ligne sont préservés pendant la compression, donc une ligne qui reposait sur l’insertion automatique de points-virgules continue de fonctionner. Supprimer les sauts de ligne à l’aveugle est précisément comment les « minificateurs » amateurs introduisent des bugs.
• Conscient des chaînes, regex et gabarits. Le retireur de commentaires connaît la différence entre // à l’intérieur d’une chaîne et un vrai commentaire de ligne, et entre / comme division et comme début d’un littéral regex — donc il ne grignote jamais votre code.
• Deux panneaux, prêt à copier. Entrée et sortie côte à côte ; la sortie est en lecture seule avec une copie en un clic.
• S’exécute entièrement dans votre navigateur. Il n’y a pas de backend ni de téléversement. Prettier est embarqué dans la page et chargé à la demande, donc le script respecte encore une politique de sécurité de contenu stricte en self uniquement.

Exemple détaillé#

Une fonction copiée depuis un vieux gist, commentaires et indentation incohérente compris :

Entrée :

function fetchUser(id){/*legacy: returns null when missing*/
  const url="https://example.com/users/"+id
    const opts={method:"GET",cache:"no-store"}
return fetch(url,opts).then(r=>r.json())}

Cliquez sur Formater avec 2 espaces :

function fetchUser(id) {
  /*legacy: returns null when missing*/
  const url = "https://example.com/users/" + id;
  const opts = { method: "GET", cache: "no-store" };
  return fetch(url, opts).then((r) => r.json());
}

Prettier corrige l’indentation bancale, espace les opérateurs de façon cohérente et ajoute les points-virgules — mais laisse le commentaire de bloc exactement là où il était. Cliquez maintenant sur Compresser sur l’entrée d’origine à la place :

function fetchUser(id){
const url="https://example.com/users/"+id
const opts={method:"GET",cache:"no-store"}
return fetch(url,opts).then(r=>r.json())}

Le commentaire a disparu, l’indentation parasite a disparu, mais chaque instruction reste sur sa propre ligne. Notez ce qui ne s’est pas produit : fetchUser n’a pas été raccourci, "GET" n’a pas été transformé, la fonction fléchée a conservé sa liste de paramètres. C’est une compression lisible, sûre à recoller dans une balise script — pas la mutilation agressive qu’un bundler ferait au moment de la construction.

FAQ#

Pourquoi Compresser ne renomme-t-il pas les variables ni ne réduit mon bundle ?#

Parce que faire cela correctement exige une passe complète d’analyse et de génération de code (analyse de portée, suivi des propriétés, détection des effets de bord). La compression de cet outil est intentionnellement un scanner : il est rapide, léger en dépendances, et ne peut prouvablement pas changer le comportement à l’exécution. Pour un bundle de production, lancez un vrai bundler hors ligne ; utilisez cette page pour des nettoyages rapides, un collage dans un document, ou la préparation d’un extrait que quelqu’un d’autre lira.

Le compresseur retire-t-il les commentaires à l’intérieur des chaînes ?#

Non. Le scanner parcourt la source caractère par caractère et suit s’il est actuellement à l’intérieur d’une chaîne à apostrophes, d’une chaîne à guillemets, d’un littéral de gabarit ou d’un littéral regex. Un // qui apparaît à l’intérieur de l’un de ceux-là est traité comme du texte et laissé tel quel ; seuls les vrais commentaires sont retirés.

Gère-t-il TypeScript ou JSX ?#

Le chemin Formater utilise l’analyseur Babel, qui accepte JSX. Les annotations de type TypeScript et la syntaxe spécifique aux fichiers .ts/.tsx ne sont pas activées ici — si vous en avez besoin, cet outil signalera une erreur d’analyse au lieu de produire silencieusement une mauvaise sortie. Gardez cette page pour le JavaScript simple.

Mon code est-il téléversé quelque part ?#

Non. Tout s’exécute dans l’onglet que vous regardez. Prettier est embarqué avec la page et importé à la demande ; votre texte source est analysé en mémoire et jamais envoyé sur le réseau.