Formateur et minificateur de code

Qu'est-ce que Formateur et minificateur de code ?

Un formateur et minificateur de code en ligne et gratuit qui embellit ou minifie HTML, CSS et JavaScript sans jamais quitter votre navigateur. Choisissez le langage, puis sélectionnez Embellir pour réindenter un code en désordre ou sur une seule ligne avec une indentation de 2 espaces, 4 espaces ou tabulation, ou Minifier pour le compresser. L'embellissement est propulsé par js-beautify ; la minification JavaScript utilise Terser pour raccourcir les noms et réduire la taille, tandis que CSS et HTML sont compactés en supprimant les commentaires et en réduisant les espaces redondants. Les développeurs web s'en servent pour rendre lisible le code tiers minifié, réduire les feuilles de style et les scripts avant le déploiement, et nettoyer les extraits collés depuis la sortie de build.

Comment utiliser Formateur et minificateur de code

1. Choisissez le langage de votre source : HTML, CSS ou JS.
2. Choisissez l'action : Embellir pour mettre en forme, ou Minifier pour compresser.
3. Pour Embellir, choisissez l'indentation : 2 espaces, 4 espaces ou Tabulation.
4. Collez ou saisissez votre code dans la zone de saisie : la sortie se met à jour automatiquement.
5. Utilisez le bouton Copier pour récupérer le résultat, ou cliquez sur Effacer pour vider la saisie et recommencer.

Exemples

a{color:red;font-weight:bold}

a {
  color: red;
  font-weight: bold
}

function add(first, second) {
  return first + second;
}

function add(n,d){return n+d}

<ul>
  <li>One</li>
  <li>Two</li>
</ul>

<ul><li>One</li><li>Two</li></ul>

Questions fréquentes

Mon code est-il envoyé sur un serveur ?

Non. L'embellissement et la minification se déroulent entièrement en local dans votre navigateur : js-beautify et Terser sont chargés comme des scripts et s'exécutent sur votre appareil. Votre code ne quitte jamais votre machine, et l'outil continue de fonctionner hors ligne.

Quels langages et actions sont pris en charge ?

Trois langages - HTML, CSS et JavaScript - chacun avec deux actions : Embellir (mettre en forme avec l'indentation choisie) et Minifier (compresser). JavaScript est minifié avec Terser, tandis que CSS et HTML sont compactés en supprimant les commentaires et en réduisant les espaces.

Quelle indentation puis-je choisir ?

Lors de l'embellissement, vous pouvez réindenter avec 2 espaces, 4 espaces ou un caractère de tabulation. L'indentation ne s'applique qu'à Embellir ; Minifier supprime les espaces et ignore ce réglage.

Pourquoi la minification de mon JavaScript a-t-elle affiché une erreur ?

Terser analyse votre JavaScript avant de le minifier ; une erreur de syntaxe l'interrompt donc et le message s'affiche au-dessus de la sortie. Corrigez l'endroit indiqué - souvent un crochet ou une chaîne non fermé, ou un jeton parasite - et le résultat se reconstruit automatiquement.

La sortie se met-elle à jour toute seule ?

Oui. Le résultat se reconstruit chaque fois que vous modifiez la saisie, le langage, l'action ou l'indentation, vous n'avez donc jamais à appuyer sur un bouton pour formater : copiez simplement la sortie quand elle vous convient.