Wissel op elk moment tussen formatteren en minimaliseren; het resultaat wordt bijgewerkt terwijl je typt. Maak rommelige HTML, CSS en JavaScript netjes, of verklein ze voor een snellere website. Het draait in je browser en is gratis en privé.
Hoe je code formatteert of minimaliseert
- Kies Formatteren of Minimaliseren.
- Kies de taal: HTML, CSS of JavaScript.
- Kies voor het formatteren de inspringing: 2 spaties, 4 spaties of Tab.
- Plak je code in het invoervak, of druk op Voorbeeld om te zien hoe het werkt.
- Lees het resultaat onder Geformatteerd en druk dan op Kopiëren.
- Wissen maakt de invoer leeg.
Wat formatteren doet
Formatteren wijzigt alleen witruimte. CSS krijgt één declaratie per regel, regels gescheiden door een lege regel en mediaqueries en geneste regels ingesprongen. JavaScript wordt opnieuw ingesprongen op basis van de accolades met één statement per regel, terwijl strings, template literals, reguliere expressies en for (;;)-headers precies zoals geschreven blijven. HTML wordt ingesprongen op nesting, met inline-elementen op dezelfde regel als hun tekst zodat de pagina hetzelfde rendert, en inline <script>- en <style>-blokken worden met de JavaScript- en CSS-formatters opgemaakt.
Wat minimaliseren doet
Minimaliseren verwijdert opmerkingen en elke spatie die de browser niet nodig heeft. Opmerkingen die met /*! beginnen blijven behouden, omdat ze meestal een licentie bevatten. JavaScript houdt een regeleinde waar automatische puntkomma-invoeging ervan afhangt, dus code zonder puntkomma's blijft werken. Namen worden niet ingekort en er wordt geen code herschreven, dus het resultaat gedraagt zich precies als het origineel. In HTML blijft de inhoud van pre en textarea altijd onaangeroerd, en witruimte tussen inline-elementen blijft als één spatie behouden zodat woorden niet aan elkaar kleven.
Limieten om te kennen
De formatter leest code met een echte tokenizer in plaats van zoeken en vervangen, maar parseert hem niet volledig, dus hij vangt niet elke syntaxfout op. Als hij een probleem vindt, zoals een niet gesloten string, opmerking of haakje, noemt hij de regel. TypeScript, JSX en sjabloontalen worden niet ondersteund. HTML minimaliseren verwijdert de ruimte tussen blokelementen zoals lijstitems; als een opmaak op die witruimte tussen inline-blockitems leunt, controleer die dan na het minimaliseren.
Tips
- Bewaar je originele bestand. Geminimaliseerde code is moeilijk te lezen en te bewerken, dus minimaliseer een kopie om te publiceren.
- Test je pagina na het minimaliseren, vooral als de opmaak afhangt van spaties tussen elementen.
- Gebruik formatteren om code te lezen die je niet zelf hebt geschreven, zoals een gekopieerd fragment of een gecomprimeerd bestand.
- Kies dezelfde inspringing als je team gebruikt, zodat wijzigingen klein blijven.
- Vergelijk voor en na met de verschilcontrole.
Wie gebruikt het
Studenten die leren code te lezen, freelancers die de site van een klant opruimen en kleine bedrijven die paginagewicht verminderen voor snelheid. Gebruik voor JSON-bestanden de JSON-tools.
Privé door ontwerp
Je code wordt op deze pagina in je browser geformatteerd. Er wordt niets geüpload, dus het is veilig voor privé- of onuitgebrachte projecten.
Vragen
Maakt minimaliseren mijn code stuk?
Het verwijdert alleen opmerkingen en overbodige spaties en herschrijft je code niet, dus het gedrag blijft hetzelfde. Test het resultaat altijd.
Ondersteunt het TypeScript of JSX?
Nee. HTML, CSS en JavaScript worden ondersteund.
Waarom is een opmerking bewaard?
Opmerkingen die met /*! beginnen blijven behouden, omdat ze meestal een licentie bevatten.