Code formatter

Wat het doet

De code formatter neemt krappe, geminificeerde of inconsequent ingesprongen code en geeft die terug in een schone, consistente stijl. Hij ondersteunt de talen die je in webwerk het vaakst tegenkomt: HTML, CSS, SCSS, Less, JavaScript, TypeScript, JSON, XML, Markdown, YAML en GraphQL.

Onder de motorkap draait Prettier, de formatter die door miljoenen projecten wordt gebruikt, dus het resultaat ziet er precies zo uit als code die in VS Code of door een pre-commit hook is geformatteerd. De parser voor een taal wordt pas geladen als je die taal kiest, zodat de pagina snel blijft.

Zo gebruik je het

1. Kies de Taal van je code.
2. Plak de code, of open een bestand.
3. Kies een stijl voor Inspringing (2 spaties, 4 spaties of tabs) en een Regelbreedte. Regels die langer zijn dan die breedte worden afgebroken waar de taal dat toelaat.
4. Kies voor JavaScript en TypeScript of statements eindigen met puntkomma’s. Kies voor scripts en stylesheets enkele aanhalingstekens als je project die gebruikt.
5. Kopieer het resultaat of download het.

Voorbeeld

Het voorbeeld is een HTML-pagina op één regel met inline CSS en JavaScript. Na het formatteren staat elk element op een eigen regel, zijn de CSS-regels uitgeklapt met één declaratie per regel en krijgt de arrow function in het script haakjes en een puntkomma:

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

Tips

• Formatteren is ook een snelle syntaxcontrole. Als Prettier de invoer niet kan parsen, toont de foutmelding de regel en kolom, zodat je meteen naar de fout springt.
• XML wordt geformatteerd alsof witruimte niet relevant is, zodat geneste tags inspringen. Als je document afhangt van exacte witruimte binnen elementen, controleer het resultaat dan voordat je het gebruikt.
• Wil je juist het omgekeerde? Gebruik de JavaScript- en CSS-minifier om code voor productie te verkleinen, of de JSON-formatter om JSON te valideren en te minificeren.