Code formatter & beautifier
Plak code of open een bestand, klik op Formatteren en je krijgt overzichtelijke code. De taal wordt automatisch herkend — JavaScript, TypeScript, CSS, HTML, JSON, XML, SQL, YAML, Markdown en GraphQL, allemaal in je browser.
Alles draait in je browser — je code wordt nooit naar een server geüpload.
De regelbreedte geldt voor JavaScript, TypeScript, CSS, SCSS, LESS, HTML, YAML, Markdown en GraphQL. Formatteren controleert nooit logica, types of stijlregels.
De taal wordt herkend zodra je code toevoegt.
Sleep hier een codebestand (tot 5 MB) naartoe, plak code of laad een voorbeeld. Druk op Ctrl+Enter om te formatteren.
Code formatteren en opschonen in je browser
Code die uit een geminimaliseerde bundel, een logbestand, een chatbericht of een oud project komt, is lastig te lezen en nog lastiger te reviewen. Deze code formatter maakt er met één klik weer overzichtelijke, consequent ingesprongen tekst van. Plak de code, klik op Formatteren (of druk op Ctrl+Enter) en het resultaat verschijnt naast het origineel, met regelnummers aan beide kanten zodat je ze in één oogopslag vergelijkt.
De tool ondersteunt de formaten die ontwikkelaars het vaakst tegenkomen: JavaScript met JSX, TypeScript met TSX, CSS, SCSS en LESS, HTML inclusief inline scripts en stijlen, JSON, XML, SQL in dertien dialecten, YAML, Markdown en GraphQL. Standaard wordt de taal voor je herkend: aan de bestandsnaam als je een bestand opent en aan de tekst zelf als je plakt. Kan de tekst van meerdere soorten zijn, dan meldt de tool dat en toont hij de waarschijnlijke kandidaten, in plaats van stilletjes de verkeerde parser te kiezen.
Je houdt zelf de controle over de stijl. Kies twee spaties, vier spaties of tabs, en voor talen die met Prettier worden opgemaakt een regelbreedte van 80, 100 of 120 tekens. Bij SQL kies je het dialect, zoals PostgreSQL, MySQL, SQL Server of BigQuery. Voor JSON is er ook een knop Minimaliseren die alle witruimte verwijdert zonder getallen, tekenreeksen of de volgorde van sleutels aan te raken. Instellingen worden in je browser onthouden en met automatisch formatteren zie je het resultaat al tijdens het typen.
Gaat er iets mis, dan is de melding kort en precies: de taal, wat de parser verwachtte en de regel en kolom. Je invoer wordt nooit overschreven en met een knop spring je naar het probleem. Met Ongedaan maken haal je terug wat je per ongeluk hebt gewist of vervangen. Het resultaat download je met de juiste bestandsextensie voor de taal, of je opent beide versies naast elkaar in de Tekstverschillen-checker om precies te zien wat er is veranderd.
Alles gebeurt op je eigen apparaat. De zware formatteerengines worden alleen gedownload voor de taal die je echt formatteert en draaien in een achtergrondworker, zodat een groot bestand de pagina niet laat vastlopen. Houd rekening met de grenzen: bestanden tot 5 MB kunnen worden geopend, bij invoer boven 300.000 tekens kan het een paar seconden duren en invoer boven twee miljoen tekens wordt geweigerd. Formatteren is geen linter of compiler: logische fouten vindt het niet en enkele exotische syntaxis kan worden afgewezen.
Veelgestelde vragen
Wordt mijn code ergens geüpload?
Nee. De code wordt opgemaakt door bibliotheken die in je browser draaien, in een achtergrondthread. Er wordt niets naar een server gestuurd. Alleen je instellingen en een optioneel concept blijven bewaard in de lokale opslag van deze browser, en je kunt het invoervak op elk moment leegmaken.
Verandert formatteren wat mijn code doet?
De formatter past alleen de opmaak aan: inspringing, regeleinden en witruimte. Soms worden ook aanhalingstekens gelijkgetrokken, optionele haakjes toegevoegd of weggehaald en puntkomma's consequent gezet, maar de betekenis blijft hetzelfde. Logica, types en lintregels worden niet gecontroleerd: correcte code blijft correct en foutieve code blijft fout.
Hoe wordt de taal herkend?
Open je een bestand, dan beslist de extensie. Anders kijkt de tool naar de tekst zelf: tags, accolades, sleutelwoorden en typische leestekens. Lijken twee talen op elkaar, bijvoorbeeld CSS en SCSS of JavaScript en TypeScript, dan vraagt de tool het je in plaats van te gokken. In de lijst Taal kun je altijd zelf een taal kiezen.
Wat gebeurt er als mijn code een syntaxfout bevat?
De uitvoer blijft leeg, je invoer blijft precies zoals hij was en je krijgt een korte melding met regel en kolom. Klik op Tonen in invoer om naar die plek te springen, herstel de fout en klik opnieuw op Formatteren.
Kan ik hier code minimaliseren?
Alleen JSON, waar het weghalen van witruimte altijd veilig is. JavaScript of CSS goed minimaliseren vereist een speciale minifier, omdat het hernoemen van variabelen of samenvoegen van regels het gedrag kan veranderen. Deze tool probeert dat daarom niet. Voor een diepere SQL-syntaxcontrole gebruik je de SQL-formatter & validator.