Passez du formatage à la minification à tout moment ; le résultat se met à jour au fil de la frappe. Mettez en forme du HTML, du CSS et du JavaScript brouillons, ou réduisez-les pour un site plus rapide. Cela s'exécute dans votre navigateur, gratuit et privé.
Comment formater ou minifier du code
- Choisissez Formater ou Minifier.
- Choisissez le langage : HTML, CSS ou JavaScript.
- Pour la mise en forme, choisissez le retrait : 2 espaces, 4 espaces ou Tab.
- Collez votre code dans la zone de saisie, ou appuyez sur Exemple pour voir comment ça marche.
- Lisez le résultat sous Formaté, puis appuyez sur Copier.
- Effacer vide la zone de saisie.
Ce que fait le formatage
Le formatage ne change que les espaces. Le CSS reçoit une déclaration par ligne, des règles séparées par une ligne vide et des requêtes média et règles imbriquées indentées. Le JavaScript est réindenté d'après ses accolades avec une instruction par ligne, tandis que les chaînes, littéraux de gabarit, expressions régulières et en-têtes for (;;) sont laissés exactement comme écrits. Le HTML est indenté selon l'imbrication, avec les éléments en ligne gardés sur la même ligne que leur texte pour que la page s'affiche pareil, et les blocs <script> et <style> en ligne sont mis en forme avec les formateurs JavaScript et CSS.
Ce que fait la minification
La minification supprime les commentaires et tous les espaces dont le navigateur n'a pas besoin. Les commentaires qui commencent par /*! sont conservés, car ils contiennent généralement une licence. Le JavaScript garde un saut de ligne partout où l'insertion automatique de points-virgules en dépend : le code écrit sans points-virgules fonctionne donc toujours. Les noms ne sont pas raccourcis et aucun code n'est réécrit : le résultat se comporte exactement comme l'original. En HTML, le contenu de pre et textarea n'est jamais touché, et l'espace entre éléments en ligne est conservé comme une seule espace pour que les mots ne se collent pas.
Limites à connaître
Le formateur lit le code avec un vrai analyseur lexical plutôt qu'avec de la recherche et du remplacement, mais il ne l'analyse pas entièrement : il ne détectera donc pas toutes les erreurs de syntaxe. Quand il trouve un problème, comme une chaîne, un commentaire ou un crochet non fermé, il vous indique la ligne. TypeScript, JSX et les langages de gabarit ne sont pas pris en charge. La minification HTML supprime les espaces entre les éléments de bloc comme les éléments de liste ; si une mise en page dépend de cet espace entre des éléments inline-block, vérifiez-la après la minification.
Conseils
- Gardez votre fichier d'origine. Le code minifié est difficile à lire et à modifier : minifiez donc une copie pour la publication.
- Testez votre page après la minification, surtout si la mise en page dépend d'espaces entre les éléments.
- Utilisez le formatage pour lire du code que vous n'avez pas écrit, comme un extrait copié ou un fichier compressé.
- Choisissez le même retrait que votre équipe pour que les changements restent petits.
- Comparez avant et après avec le comparateur de texte.
Qui l'utilise
Étudiants qui apprennent à lire du code, freelances qui nettoient le site d'un client et petites entreprises qui allègent leurs pages pour la vitesse. Pour les fichiers JSON, utilisez les outils JSON.
Privé par conception
Votre code est mis en forme sur cette page dans votre navigateur. Rien n'est envoyé : vous pouvez donc l'utiliser en toute sécurité pour un travail privé ou non publié.
Questions
La minification va-t-elle casser mon code ?
Il retire seulement les commentaires et les espaces inutiles et ne réécrit pas votre code, de sorte que le comportement reste identique. Testez toujours le résultat.
Prend-il en charge TypeScript ou JSX ?
Non. HTML, CSS et JavaScript sont pris en charge.
Pourquoi un commentaire a-t-il été conservé ?
Les commentaires qui commencent par /*! sont conservés, car ils contiennent généralement une licence.