Code Formatter (Prettier) — Codeformatter
Formatteer JavaScript, TypeScript, CSS, SCSS, Less, HTML, JSON, GraphQL, Markdown en YAML met Prettier, volledig in je browser.
🔒 Draait volledig in uw browser — niets wordt geüploadWat deze codeformatter doet
Deze tool draait Prettier, de eigenzinnige codeformatter die in een groot deel van het JavaScript-ecosysteem wordt gebruikt, rechtstreeks in je browser. Prettier zet niet zomaar regels opnieuw in: het ontleedt je broncode tot een syntaxboom en drukt die volgens een klein aantal regels volledig opnieuw af. Daardoor is het resultaat consistent, hoe rommelig de invoer ook was: lange argumentlijsten worden afgebroken, objecten worden alleen over meerdere regels verdeeld als ze de regelbreedte overschrijden, aanhalingstekens en puntkomma's volgen één conventie en witruimte aan het einde van regels verdwijnt.
Je kunt JavaScript, JSX, TypeScript en TSX formatteren, de drie belangrijkste stylesheet-dialecten (CSS, SCSS en Less), HTML met ingebedde styles en scripts, JSON, GraphQL-schema's en -query's, Markdown-documenten en YAML-configuratiebestanden. Elke taal gebruikt een eigen Prettier-plugin en alleen de plugin die je nodig hebt wordt geladen, zodat de pagina licht blijft tot je daadwerkelijk iets formatteert.
De opties uitgelegd
Print width (regelbreedte) is de regellengte waar Prettier onder probeert te blijven; 80 is de standaard en 100 of 120 zijn gebruikelijk in teams met brede monitoren. Tab width bepaalt hoeveel spaties één inspringniveau telt, en met Indent with kies je tussen spaties en echte tabtekens. Semicolons bepaalt of statements in JavaScript en TypeScript op een puntkomma eindigen; staat de optie uit, dan voegt Prettier er alleen een toe waar dat nodig is om dubbelzinnigheid te voorkomen. Single quotes geeft bij strings de voorkeur aan ' boven ", zolang dat geen extra escapes oplevert. Deze opties komen één op één overeen met de instellingen in een .prettierrc-bestand, zodat je de configuratie van je project kunt nabootsen.
Privé en praktisch
Alles gebeurt lokaal: de formatter uploadt je code nooit, slaat hem niet op en stuurt hem niet naar een API. Daardoor is hij veilig voor bedrijfseigen broncode, configuratiebestanden met interne hostnamen of fragmenten die je tijdens een productie-incident hebt gekopieerd. Vindt de parser een syntaxfout, dan toont de melding de regel en kolom en springt de cursor naar die plek in de invoer – een snelle manier om een ontbrekend haakje in een groot JSON- of YAML-bestand te vinden. Houd Prettier voor het dagelijkse werk in je editor en CI; gebruik deze pagina als je op een machine zonder je toolchain werkt, een fragment uit de chat bekijkt of code opschoont voordat je die in documentatie plakt.
Hoe te gebruiken
- Kies de taalKies de taal van je fragment, of open een bestand om de taal aan de extensie te herkennen.
- Stel de opties inPas regelbreedte, tabbreedte, tabs of spaties, puntkomma's en de stijl van aanhalingstekens aan.
- FormatteerKlik op Format code. Syntaxfouten worden getoond met hun regel en kolom.
- Kopieer of downloadKopieer de geformatteerde code terug naar je editor of download hem als bestand.