Code-formatter & minifier

Maak HTML, CSS en JavaScript direct in je browser mooier of minificeer ze, met inspringing van 2 spaties, 4 spaties of een tab en JavaScript-compressie op basis van Terser.

Tool laden…

Code-formatter & minifierPlak HTML, CSS of JavaScript, kies Opmaken om het overzichtelijk te formatteren met inspringing van 2 spaties, 4 spaties of een tab, of kies Minificeren om het te verkleinen voor productie. JavaScript wordt geminificeerd met Terser, terwijl CSS en HTML worden gecomprimeerd door commentaar en overtollige witruimte veilig te verwijderen. Alles draait volledig in je browser, dus je code wordt nooit geüpload.

Wat is Code-formatter & minifier?

Een gratis online code-formatter en -minifier die HTML, CSS en JavaScript opmaakt of minificeert zonder ooit je browser te verlaten. Kies de taal en selecteer vervolgens Opmaken om rommelige of eenregelige broncode opnieuw in te springen met 2 spaties, 4 spaties of een tab, of Minificeren om het te comprimeren. Het opmaken wordt aangedreven door js-beautify; de JavaScript-minificatie gebruikt Terser om namen in te korten en de grootte te verkleinen, terwijl CSS en HTML worden gecomprimeerd door commentaar te verwijderen en overbodige witruimte samen te voegen. Webontwikkelaars gebruiken het om geminificeerde code van derden leesbaar op te schonen, stylesheets en scripts te verkleinen vóór het deployen, en fragmenten op te ruimen die uit de build-uitvoer zijn geplakt.

Code-formatter & minifier gebruiken

  1. Kies de taal van je broncode: HTML, CSS of JS.
  2. Kies de actie: Opmaken om te formatteren, of Minificeren om te comprimeren.
  3. Kies bij Opmaken de inspringing: 2 spaties, 4 spaties of Tab.
  4. Plak of typ je code in het invoerveld – de uitvoer wordt automatisch bijgewerkt.
  5. Gebruik de knop Kopiëren om het resultaat te pakken, of klik op Wissen om de invoer te legen en opnieuw te beginnen.

Voorbeelden

Een CSS-regel van één regel opmaken (2 spaties)

Invoer

a{color:red;font-weight:bold}

Uitvoer

a {
  color: red;
  font-weight: bold
}

JavaScript minificeren met Terser

Invoer

function add(first, second) {
  return first + second;
}

Uitvoer

function add(n,d){return n+d}

HTML minificeren

Invoer

<ul>
  <li>One</li>
  <li>Two</li>
</ul>

Uitvoer

<ul><li>One</li><li>Two</li></ul>

Veelgestelde vragen

Wordt mijn code naar een server geüpload?
Nee. Het opmaken en minificeren gebeurt allemaal lokaal in je browser – js-beautify en Terser worden als scripts geladen en op je apparaat uitgevoerd. Je code verlaat je machine nooit, en de tool blijft offline werken.
Welke talen en acties worden ondersteund?
Drie talen - HTML, CSS en JavaScript - elk met twee acties: Opmaken (formatteren met de gekozen inspringing) en Minificeren (comprimeren). JavaScript wordt geminificeerd met Terser, terwijl CSS en HTML worden gecomprimeerd door commentaar te verwijderen en witruimte samen te voegen.
Welke inspringing kan ik kiezen?
Bij het opmaken kun je opnieuw inspringen met 2 spaties, 4 spaties of een tab-teken. De inspringing geldt alleen voor Opmaken; Minificeren verwijdert witruimte en negeert deze instelling.
Waarom gaf het minificeren van mijn JavaScript een foutmelding?
Terser parseert je JavaScript voordat het wordt geminificeerd, dus een syntaxfout stopt het en de melding wordt boven de uitvoer getoond. Herstel de aangegeven plek - vaak een niet-gesloten haakje of string, of een verdwaald token - en het resultaat wordt automatisch opnieuw opgebouwd.
Wordt de uitvoer vanzelf bijgewerkt?
Ja. Het resultaat wordt opnieuw opgebouwd telkens wanneer je de invoer, taal, actie of inspringing wijzigt, dus je hoeft nooit op een knop te drukken om te formatteren: kopieer gewoon de uitvoer wanneer die er goed uitziet.

Gerelateerde tools