Przełączaj się między formatowaniem a minifikacją w dowolnej chwili; wynik aktualizuje się podczas pisania. Uporządkuj bałagan w HTML, CSS i JavaScript albo zmniejsz go dla szybszej strony. Działa w przeglądarce, jest darmowe i prywatne.
Jak formatować lub minifikować kod
- Wybierz Formatuj lub Minifikuj.
- Wybierz język: HTML, CSS lub JavaScript.
- Do formatowania wybierz wcięcie: 2 spacje, 4 spacje lub Tab.
- Wklej kod do pola wejściowego albo naciśnij Przykład, aby zobaczyć, jak to działa.
- Przeczytaj wynik w sekcji Sformatowano, a potem naciśnij Kopiuj.
- Wyczyść opróżnia pole wejściowe.
Co robi formatowanie
Formatowanie zmienia tylko białe znaki. CSS dostaje jedną deklarację w wierszu, reguły oddzielone pustym wierszem oraz wcięte media queries i reguły zagnieżdżone. JavaScript jest ponownie wcinany według nawiasów klamrowych z jedną instrukcją w wierszu, a ciągi znaków, szablony tekstowe, wyrażenia regularne i nagłówki for (;;) pozostają dokładnie takie, jak zapisano. HTML jest wcinany według zagnieżdżenia, z elementami liniowymi w tym samym wierszu co ich tekst, aby strona wyświetlała się tak samo, a bloki <script> i <style> w treści są formatowane formaterami JavaScript i CSS.
Co robi minifikacja
Minifikacja usuwa komentarze i każdą spację, której przeglądarka nie potrzebuje. Komentarze zaczynające się od /*! są zachowywane, bo zwykle zawierają licencję. JavaScript zachowuje podział wiersza wszędzie tam, gdzie zależy od niego automatyczne wstawianie średników, więc kod pisany bez średników nadal działa. Nazwy nie są skracane i żaden kod nie jest przepisywany, więc wynik zachowuje się dokładnie jak oryginał. W HTML zawartość pre i textarea nigdy nie jest ruszana, a białe znaki między elementami liniowymi są zachowywane jako pojedyncza spacja, aby słowa się nie zlały.
Limity, które warto znać
Formater czyta kod prawdziwym tokenizerem, a nie wyszukiwaniem i zamianą, ale nie parsuje go w pełni, więc nie wychwyci każdego błędu składni. Gdy znajdzie problem, taki jak niezamknięty ciąg znaków, komentarz lub nawias, podaje linię. TypeScript, JSX i języki szablonów nie są obsługiwane. Minifikacja HTML usuwa odstępy między elementami blokowymi, takimi jak pozycje listy; jeśli układ zależy od tych białych znaków między elementami inline-block, sprawdź go po minifikacji.
Wskazówki
- Zachowaj oryginalny plik. Zminifikowany kod jest trudny do czytania i edycji, więc minifikuj kopię do publikacji.
- Przetestuj stronę po minifikacji, zwłaszcza jeśli układ zależy od spacji między elementami.
- Użyj formatowania, aby czytać kod, którego nie napisałeś, na przykład skopiowany fragment lub skompresowany plik.
- Wybierz takie samo wcięcie, jakiego używa Twój zespół, aby zmiany były małe.
- Porównaj przed i po za pomocą porównywania tekstów.
Kto z tego korzysta
Studenci uczący się czytać kod, freelancerzy porządkujący stronę klienta i małe firmy odchudzające strony dla szybkości. Dla plików JSON użyj narzędzi JSON.
Prywatność w założeniu
Twój kod jest formatowany na tej stronie w przeglądarce. Nic nie jest przesyłane, więc jest bezpieczne dla prac prywatnych lub niewydanych.
Pytania
Czy minifikacja zepsuje mój kod?
Usuwa tylko komentarze i zbędne spacje i nie przepisuje Twojego kodu, więc zachowanie pozostaje takie samo. Zawsze przetestuj wynik.
Czy obsługuje TypeScript lub JSX?
Nie. Obsługiwane są HTML, CSS i JavaScript.
Dlaczego komentarz został zachowany?
Komentarze zaczynające się od /*! są zachowywane, bo zwykle zawierają licencję.