Formateur de code

À quoi ça sert

Le formateur de code prend du code tassé, minifié ou mal indenté et le réécrit dans un style propre et cohérent. Il prend en charge les langages que l’on croise le plus en développement web : HTML, CSS, SCSS, Less, JavaScript, TypeScript, JSON, XML, Markdown, YAML et GraphQL.

En coulisses, il utilise Prettier, le formateur adopté par des millions de projets : le résultat ressemble exactement à du code formaté dans VS Code ou par un hook de pre-commit. Le parseur de chaque langage ne se charge que lorsque vous le sélectionnez, ce qui garde la page rapide.

Mode d’emploi

1. Choisissez le Langage de votre code.
2. Collez le code ou ouvrez un fichier.
3. Choisissez un style d’Indentation (2 espaces, 4 espaces ou tabulations) et une Largeur de ligne. Les lignes plus longues que cette largeur sont coupées là où le langage le permet.
4. Pour JavaScript et TypeScript, indiquez si les instructions se terminent par des points-virgules. Pour les scripts et les feuilles de style, choisissez les guillemets simples si votre projet les préfère.
5. Copiez le résultat ou téléchargez-le.

Exemple

L’exemple est une page HTML sur une seule ligne avec du CSS et du JavaScript intégrés. Après formatage, chaque élément occupe sa propre ligne, les règles CSS sont dépliées avec une déclaration par ligne, et la fonction fléchée du script reçoit des parenthèses et un point-virgule :

<script>
  const items = [1, 2, 3];
  items.forEach((i) => console.log(i));
</script>

Astuces

• Le formatage sert aussi de vérification rapide de la syntaxe. Si Prettier ne parvient pas à analyser l’entrée, le message d’erreur indique la ligne et la colonne pour aller directement à l’erreur.
• Le XML est formaté en considérant les espaces comme non significatifs, afin d’indenter les balises imbriquées. Si votre document dépend d’espaces exacts à l’intérieur des éléments, vérifiez le résultat avant de l’utiliser.
• Besoin de l’inverse ? Utilisez le minificateur JavaScript et CSS pour réduire le code en production, ou le formateur JSON pour valider et minifier du JSON.