Collez du CSS ou du JavaScript et basculez entre deux tâches : formater réindente le code avec un espacement cohérent et une instruction par ligne, tandis que minifier supprime commentaires et espaces superflus en indiquant précisément les octets économisés. Le minificateur est volontairement conservateur — il ne renomme jamais d’identifiants, ne supprime jamais un point-virgule et ne fusionne jamais deux lignes là où l’insertion automatique de point-virgule changerait le sens — de sorte que le résultat fonctionne toujours. Chaînes, littéraux de gabarit, expressions régulières et bandeaux de licence (/*! … */) restent intacts.
Comment formater ou minifier votre code
- 1 Choisissez le langage : CSS ou JavaScript.
- 2 Collez votre code dans le panneau de gauche.
- 3 Cliquez sur Formater pour le réindenter, ou sur Minifier pour le compresser.
- 4 Consultez le rapport de taille, puis copiez le résultat ou téléchargez le fichier.
Comment le formateur lit votre code
Il n’y a ici ni analyseur syntaxique ni arbre de syntaxe abstraite. Le formateur est une machine à états au niveau du caractère qui sait à tout moment si elle se trouve dans une chaîne, un littéral de gabarit, un commentaire ou une expression régulière. Ce seul élément de contexte sépare un formateur d’un rechercher-remplacer naïf : sans lui, un point-virgule dans une chaîne serait pris pour une fin d’instruction, et l’URL d’un commentaire s’effondrerait dès la minification.
L’embellissement ré-indente le code et normalise l’espacement autour des accolades, des blocs et des déclarations. La minification retire les commentaires et toute suite d’espaces sans signification. Le minifieur est délibérément conservateur : il ne renomme jamais d’identifiant, ne supprime jamais de point-virgule et ne joint jamais deux lignes là où l’insertion automatique de point-virgule de JavaScript pourrait changer le sens. Il échange quelques octets contre la garantie que ce qui sort fonctionne encore.
Ce conservatisme est le compromis assumé de l’approche. Un vrai minifieur de build comme Terser ou esbuild analyse le code en arbre syntaxique et sait raccourcir les noms de variables, supprimer les branches inatteignables et réécrire des expressions — atteignant une sortie bien plus compacte que ce qui est possible ici. Cet outil sert au dépannage rapide dans un onglet, pas à votre chaîne de production.
Quand y recourir
Lire du code minifié
Un script tiers sur une seule ligne redevient navigable. Les noms restent mutilés — cette information a été détruite au build — mais la structure, le flux de contrôle et les chaînes redeviennent lisibles.
Nettoyer du code hérité
Un fichier mêlant tabulations et espaces avec des accolades incohérentes devient uniforme en une passe, ce qui permet au diff suivant de montrer ce qui a réellement changé plutôt que chaque ligne.
Alléger un extrait en ligne
Un petit bloc CSS destiné à un gabarit d’e-mail ou à l’en-tête d’une page ne justifie pas une étape de build. Le minifier ici en retire commentaires et espaces en quelques secondes.
Préparer du code à coller
Formater avant de coller dans une documentation, un ticket ou une conversation rend le code lisible pour la personne qui le reprendra.
Formater pour lire, minifier pour publier
Formater est ce qu’il vous faut face à une feuille de style sans retours à la ligne, en lisant un extrait copié d’un bundle minifié ou en relisant un diff livré sans mise en forme. Minifier est la démarche inverse : gagner des octets sur un petit script ou un style en ligne avant sa mise en production. Coller du code propriétaire dans un formateur en ligne revient à le confier au serveur d’un tiers ; cet outil s’exécute entièrement sur votre machine, vos travaux clients, outils internes et fonctionnalités non publiées restent chez vous.
Ce que cet outil n’est pas
Un formateur sans analyseur a de vraies limites, et prétendre le contraire vous ferait perdre du temps :
- Ce n’est pas Prettier. Il normalise l’indentation et l’espacement mais ne réajuste pas les longues lignes, n’impose pas de largeur d’impression et n’applique pas de règles tranchées sur les guillemets et les virgules finales.
- Ce n’est pas un minifieur de production. Aucun renommage d’identifiant, aucune élimination de code mort, aucun tree shaking. Attendez-vous à une sortie plus volumineuse que celle d’esbuild ou Terser, souvent nettement.
- CSS et JavaScript uniquement. Il ne traite ni HTML, ni JSON, ni annotations de types TypeScript, ni JSX, ni SCSS, ni Less.
- Il ne répare pas du code cassé. Le formatage suppose une entrée syntaxiquement valide ; des accolades très déséquilibrées produiront une sortie mal indentée plutôt qu’une erreur.
- L’embellissement ne restaure pas les noms perdus. Des variables minifiées nommées a, b et c le resteront — les noms d’origine ne sont tout simplement plus dans le fichier.
Dépannage
- Le code embelli garde des noms de variables d’une lettre
- Ces noms sont tout ce qui a survécu à la minification d’origine. Le renommage supprime définitivement les noms sources, et aucun formateur ne peut les réinventer. Si le projet publie des source maps, c’est la seule voie vers le code original.
- Ma sortie minifiée est plus grosse que prévu
- Ce minifieur ne retire que commentaires et espaces, faute d’analyser le code et donc de pouvoir le réécrire sans risque. Pour de vraies réductions, lancez esbuild ou Terser dans votre build : ils font généralement plusieurs fois mieux, et leur sortie est validée par une véritable compréhension du code.
- Le formatage semble faux dans une section
- Généralement des accolades déséquilibrées plus haut dans le fichier, ou une construction que la machine à états interprète autrement — une expression régulière contenant une accolade est le cas classique. Vérifiez la validité de l’entrée ; si le problème persiste, mieux vaut formater cette section à la main.
Questions fréquentes
La minification peut-elle casser mon JavaScript ?
Elle est conçue pour l’éviter. Aucun identifiant n’est renommé, aucun point-virgule n’est retiré et un saut de ligne n’est supprimé que lorsque l’insertion automatique de point-virgule ne peut pas s’appliquer. Vous cédez quelques octets face à un outil bien plus lourd en échange de la garantie que le code tourne encore.
De combien mon fichier va-t-il diminuer ?
En général de 20 à 50% pour du code commenté et bien indenté. Le rapport sous la sortie affiche la taille exacte avant et après en octets, ainsi que le pourcentage économisé.
Mon code est-il envoyé à un serveur ?
Jamais. Le formateur est du JavaScript exécuté dans votre navigateur : votre code reste sur votre appareil et l’outil continue de fonctionner hors ligne.
Dois-je l’utiliser à la place de Prettier dans mon projet ?
Non. Si vous avez une étape de build, utilisez Prettier ou le formateur de votre éditeur : ils analysent réellement le code, imposent un style cohérent à toute l’équipe et s’exécutent automatiquement. Cet outil existe pour le cas où vous avez un extrait dans un onglet et aucun projet autour.
Minifier ici est-il sûr pour la production ?
La sortie s’exécute sans risque — le minifieur est conservateur précisément pour ne pas pouvoir casser votre code. Il n’est simplement pas compétitif en taille. Utilisez-le pour un extrait en ligne ; utilisez un vrai bundler pour tout ce que vous déployez à l’échelle.
Prend-il en charge TypeScript, JSX ou SCSS ?
Non. Il traite du CSS simple et du JavaScript simple. Annotations de types, éléments JSX et imbrication SCSS reposent sur une syntaxe que la machine à états ne modélise pas : les résultats seraient peu fiables.