Formateur HTML, CSS et JavaScript

Qu’est-ce que le formateur HTML, CSS et JavaScript ?

Le formateur réindente et nettoie HTML, CSS et JavaScript pour les rendre lisibles : indentation cohérente, une déclaration par ligne, balises fermantes alignées, longues lignes coupées intelligemment. Collez du code minifié d’un site en ligne, la sortie d’un plugin ou le fichier d’un collègue mêlant tabulations et espaces, choisissez le langage et récupérez une version propre. Il peut aussi faire l’inverse et minifier. Tout s’exécute dans le navigateur avec les bibliothèques js-beautify, que la page charge depuis un réseau de diffusion de contenu ; votre code n’est pas envoyé.

Comment l’utiliser

1. Choisissez HTML, CSS ou JavaScript, ou laissez la détection automatique activée.
2. Collez votre code.
3. Choisissez l’indentation : 2 espaces, 4 espaces ou tabulations.
4. Cliquez sur Formater. Ou cliquez sur Minifier pour la version compacte.
5. Copiez ou téléchargez le résultat, ou renvoyez-le dans la zone de saisie avec « Utiliser comme entrée ».

Fonctions

• Trois langages avec des règles propres à chacun : HTML garde les éléments en ligne en ligne, CSS ordonne accolades et points-virgules, JavaScript respecte chaînes, expressions régulières et gabarits littéraux.
• Contrôle de l’indentation pour suivre le style de votre projet.
• Formater et minifier au même endroit.
• Utiliser comme entrée renvoie le résultat dans la zone de saisie, pour formater puis minifier, ou l’inverse.
• Privé : votre code n’est pas envoyé. La page a besoin d’une connexion pour charger les bibliothèques de mise en forme.

Pourquoi le formatage compte

Un code lisible se débogue plus vite et se modifie plus sûrement. Un div fermant manquant saute aux yeux quand l’indentation ne correspond plus, et reste invisible quand tout tient sur une ligne. Un style cohérent garde aussi les diffs petits dans la gestion de versions, pour que les relecteurs voient le vrai changement plutôt que du bruit d’espaces. Pour les équipes, la solution est un formateur qui s’exécute tout seul à l’enregistrement ou au commit ; cet outil sert aux cas ponctuels : inspecter du code de production minifié, nettoyer du code collé depuis un CMS ou ranger un extrait avant de le partager. Quand utiliser quoi et comment configurer Prettier ou un formateur d’éditeur pour ne presque plus avoir à le faire à la main est expliqué dans comment formater du HTML, CSS et JavaScript que vous n’avez pas écrit.

À vérifier après le formatage

• Les scripts et styles en ligne dans le HTML sont aussi formatés ; vérifiez que rien ne dépendait de l’espacement exact (les blocs pre sont conservés).
• Le formateur n’ajoute pas les points-virgules manquants : un JavaScript qui dépendait de l’insertion automatique de points-virgules se comporte donc de la même façon ; vérifiez que la sortie s’exécute.
• La sortie minifiée est fonctionnellement identique ; seuls les espaces et les commentaires sont supprimés.

Outils associés

Réduisez des fichiers pour la production avec le minificateur de code, validez et mettez en forme des réponses d’API avec le formateur JSON et testez des motifs avec le testeur de regex.

Questions fréquentes

Formater change-t-il le comportement du code ?

Non. Seuls les espaces, les sauts de ligne et l’indentation changent.

Peut-il formater du TypeScript, du SCSS ou du JSX ?

Uniquement du JavaScript et du CSS purs. Les types TypeScript et les balises JSX peuvent être mal formatés ; utilisez pour eux le formateur de votre éditeur.

Y a-t-il une limite de taille ?

Aucune limite fixe. Les très gros fichiers prennent plus de temps et dépendent de la mémoire de votre appareil.

Mon code est-il enregistré ?

Non. Le traitement se fait dans le navigateur et rien n’est envoyé à un serveur.