Formateur et minificateur de code
Embellissez ou minifiez HTML, CSS, JavaScript et SQL, avec détection automatique du langage, le tout dans votre navigateur.
Formateur de code - embellir ou minifier HTML, CSS, JavaScript et SQL
Collez du code arrivé sur une seule ligne, ou du code prêt à partir en production, et obtenez ce qu'il vous faut : proprement indenté et lisible, ou minifié au plus petit nombre d'octets. Le formateur gère HTML, CSS, JavaScript et SQL, reconnaît ce que vous avez collé et fait tout dans votre navigateur : code source, requêtes avec des noms de tables et extraits d'un projet client ne quittent jamais votre appareil.
Formater, c'est pour les humains : relire une pull request, lire un bundle minifié, déboguer une requête que quelqu'un a écrite sur une seule longue ligne. Minifier, c'est pour les machines : des fichiers plus petits se chargent plus vite et consomment moins de bande passante. Un seul outil couvre les deux sens.
Comment l'utiliser
- Collez votre code. Langage est réglé sur Détection automatique ; choisissez HTML, CSS, JavaScript ou SQL si la détection se trompe.
- Appuyez sur Formater pour l'indenter, ou sur Minifier pour le compresser.
- Réglez Indentation sur 2 espaces, 4 espaces ou tabulation, et pour le SQL choisissez le Dialecte SQL et l'écriture des Mots-clés.
- Appuyez sur Copier ou Télécharger. La ligne sous l'outil indique la taille avant et après, et ce que la minification a fait gagner.
Ce qu'utilise chaque langage
| Langage | Formater | Minifier |
|---|---|---|
| HTML | js-beautify : balises imbriquées indentées, balises en ligne gardées sur leur ligne | Commentaires et espaces entre éléments de bloc supprimés ; pre, textarea, script et style laissés intacts |
| CSS | js-beautify : une déclaration par ligne | Commentaires et espaces supprimés, chaînes conservées, espaces gardés là où les valeurs en ont besoin, comme dans 0 auto et calc(100% - 32px) |
| JavaScript | js-beautify : accolades, blocs et appels chaînés indentés | Terser : analyse le code, retire le superflu et raccourcit les noms de variables locales |
| SQL | sql-formatter : chaque clause sur sa propre ligne, selon le dialecte | Commentaires supprimés et espaces hors guillemets réduits à un seul |
Les trois bibliothèques sont open source et ne sont chargées qu'à la première utilisation de leur langage : la page elle-même reste légère.
Formater du SQL
Une longue requête écrite sur une ligne est difficile à relire. Le formateur SQL place SELECT, FROM, WHERE, GROUP BY et chaque JOIN sur leur propre ligne, et indente dessous les colonnes et les conditions. Le dialecte compte, car les bases de données ne s'accordent pas sur la syntaxe : les noms entre accents graves relèvent de MySQL, les crochets de SQL Server, les conversions :: de PostgreSQL. Choisissez le vôtre parmi SQL standard, MySQL, MariaDB, PostgreSQL, SQLite, SQL Server, Oracle PL/SQL, BigQuery et Snowflake. Les Mots-clés peuvent s'écrire en MAJUSCULES, en minuscules ou Tels quels ; les noms de vos tables et de vos colonnes ne sont jamais modifiés.
Minifier sans risque
Le code minifié doit se comporter exactement comme l'original, et le moyen sûr de le garantir est de comprendre le code plutôt que d'effacer des caractères à l'aveugle. Le JavaScript est donc minifié par Terser, qui l'analyse d'abord en arbre syntaxique ; si le code contient une erreur de syntaxe, vous obtenez la ligne et la colonne au lieu d'une sortie cassée. Le minificateur CSS garde les espaces qui ont un sens, et le minificateur HTML laisse un espace entre les éléments en ligne comme <span>a</span> <span>b</span>, car le supprimer collerait deux mots sur la page.
La minification ne remplace pas la compression côté serveur. Gzip ou Brotli réduisent généralement les fichiers texte de 70 % ou plus en plus de la minification, et les deux font très bon ménage.
Usages courants
- Lire un fichier minifié d'une bibliothèque tierce ou d'un bundle de production pendant un débogage.
- Nettoyer du HTML exporté par un éditeur d'e-mails ou un CMS avant de le retoucher à la main.
- Relire une requête copiée depuis un log, une ligne de débogage d'ORM ou le message d'un collègue.
- Alléger un extrait de CSS ou de JavaScript avant de l'intégrer directement dans une page ou un modèle d'e-mail.
Outils associés
Pour le JSON, le formateur JSON le valide et l'indente, et le convertisseur JSON le transforme en YAML, CSV ou XML. Pour voir exactement ce que le formatage a changé, collez l'avant et l'après dans le comparateur de textes. Pour une tâche précise, les pages dédiées ouvrent cet outil prêt à l'emploi : formateur HTML, formateur SQL, minificateur CSS, minificateur JavaScript et embellisseur JavaScript.