Przywróć czytelność kodu i sformatuj go online

Sformatuj wybrany format

Każdy format ma osobną stronę ze szczegółami istotnymi dla danego języka:

• Formatuj JavaScriptJavaScript
• Formatuj CSSCSS
• Formatuj HTMLHTML
• Formatuj XMLXML
• Formatuj JSONJSON

Na czym polega minifikacja kodu?

Minifikacja zmniejsza rozmiar pliku z kodem, usuwając tekst zbędny do jego wykonania, na przykład część spacji, podziałów wierszy i komentarzy. Minifikatory JavaScript mogą też skracać nazwy lokalne i przekształcać wyrażenia. Programiści zachowują czytelne pliki źródłowe, a narzędzia budujące projekt przygotowują zwarte wersje do udostępnienia. Celem tych przekształceń jest zachowanie działania kodu, ale ich dokładny skutek zależy od języka, minifikatora i jego konfiguracji. Plik produkcyjny często wygląda więc zupełnie inaczej niż źródło edytowane przez autora.

Mniejsze pliki mogą ograniczyć ilość przesyłanych danych, zwłaszcza w połączeniu z kompresją podczas transmisji i pamięcią podręczną. Oszczędność zależy od pierwotnego pliku i ustawień budowania; nie ma stałego procentu redukcji ani gwarancji szybszego ładowania strony. Ceną jest czytelność. Gdy skrypt lub arkusz stylów trafia do przeglądarki jako jeden gęsty wiersz, trudno prześledzić warunek lub znaleźć selektor. Sformatowanie kopii nadaje jej układ ułatwiający analizę, a oryginalny plik wynikowy i ustawienia jego dostarczania pozostają dostępne do porównania.

Co robi to narzędzie do formatowania kodu?

LFUnminify nadaje zwartemu kodowi czytelniejszy układ. Dodaje wcięcia, odstępy przy blokach i operatorach oraz podziały wierszy zgodnie z regułami wybranego formattera. Wynik ułatwia śledzenie zagnieżdżeń, wyszukiwanie wartości i analizowanie funkcji bez przedzierania się przez jeden gęsty wiersz. Zakres zmian w układzie zależy od wejścia i wykrytego języka, a nie od sztywnej zasady, że każda instrukcja musi zajmować osobny wiersz.

Pod spodem narzędzie uruchamia Prettier, formatter, z którego korzysta już większość zespołów pracujących z JavaScript, bezpośrednio w Twojej przeglądarce. Wynik odpowiada więc temu, co Twój własny edytor wygenerowałby dla zwykłego pliku źródłowego: wygląda znajomo, a nie jak kod wygenerowany maszynowo. Wykrywanie jest automatyczne: wklej cokolwiek, a narzędzie ustali, czy to JavaScript, CSS, HTML, XML czy JSON, i odpowiednio sformatuje kod.

Formatowanie nie odtwarza oryginalnego projektu. Sam układ kodu nie pozwala odzyskać nazw, komentarzy ani plików źródłowych usuniętych podczas budowania. Mapy źródeł lub pierwotne repozytorium mogą dostarczyć brakującego kontekstu, ale narzędzie ich nie wczytuje ani nie przelicza pozycji w śladach stosu. Wynikiem jest czytelna kopia robocza do analizy, z nazwami i strukturą programu, które pozostały w dostarczonym pliku.

Obsługiwane formaty kodu

Jeden edytor, pięć języków. LFUnminify odczytuje wklejoną treść, ustala, jaki to język, a następnie przekazuje ją parserowi stworzonemu dla tej składni. Nigdy nie musisz wybierać formatu z menu, a plik z niewłaściwym rozszerzeniem i tak zostanie obsłużony poprawnie:

• JavaScript, w tym składnia ES6 i nowsza, moduły, kod asynchroniczny i JSX. Typowy przykład to pakiet wygenerowany przez webpack, Vite, esbuild lub Terser.
• CSS, w tym współczesna składnia, właściwości niestandardowe, zapytania medialne i zagnieżdżone reguły. Przydatne przy arkuszach skompilowanych przez Tailwind, Sass lub PostCSS.
• HTML, w tym osadzone bloki script i style, które są formatowane razem z resztą kodu, zamiast pozostawać w jednym długim wierszu.
• XML, w tym mapy witryn, kanały RSS, pliki SVG, koperty SOAP i pliki konfiguracyjne, które dotarły bez ani jednego podziału wiersza.
• JSON, w tym głęboko zagnieżdżone odpowiedzi API, manifesty pakietów, pliki konfiguracyjne i dane z dzienników.

Kiedy przydaje się przywracanie czytelności kodu?

Przywracanie czytelności kodu rzadko wynika z samej ciekawości. Zwykle jest najszybszą drogą do odpowiedzi na konkretne pytanie o cudzy kod albo własny, którego nie da się już wygodnie odczytać:

• Analiza błędu na produkcji. Formatowanie pakietu ujawnia funkcje i rozgałęzienia trudne do odczytania w jednym wierszu. Pozycje z oryginalnego śladu stosu nie są automatycznie przeliczane na nowy układ; korzystaj z debuggera przeglądarki i map źródeł, jeśli są dostępne.
• Kontrola zewnętrznego skryptu. Zanim dodasz do witryny znacznik analityczny, widżet czatu lub skrypt afiliacyjny, sformatuj go i sprawdź, jakie dane zbiera, z jakimi domenami się łączy i co zapisuje w pamięci przeglądarki.
• Czytanie skompilowanego arkusza stylów. Frameworki klas narzędziowych generują ogromne jednowierszowe pliki CSS. Formatowanie pozwala zobaczyć kaskadę, znaleźć regułę mającą pierwszeństwo i zrozumieć, dlaczego Twoja zmiana jest ignorowana.
• Przeglądanie odpowiedzi API. Dane JSON skopiowane z panelu sieciowego są trudne do odczytania bez formatowania. Po jego zastosowaniu struktura, zagnieżdżenia i brakujące pole stają się widoczne w kilka sekund.
• Nauka na prawdziwym kodzie. Czytanie, jak dobrze zaprojektowana biblioteka rozwiązuje problem, pomaga szybko rozwijać umiejętności. Sformatowany plik pozwala robić to wygodnie.

Jak korzystać z LFUnminify?

Kod możesz wprowadzić na trzy sposoby. Wklej go bezpośrednio do lewego panelu, kliknij Wybierz plik, aby wczytać plik z komputera, albo przeciągnij go na pole wejściowe. Aby sprawdzić zasób z działającej witryny, otwórz go w widoku źródła lub narzędziach deweloperskich przeglądarki, skopiuj i wklej tutaj. Możesz też zapisać plik .js, .css, .html, .xml lub .json i otworzyć go przyciskiem Wybierz plik.

Formatowanie uruchamia się samo, nie trzeba szukać przycisku. Narzędzie czeka, aż przestaniesz pisać, wykrywa język i wyświetla czytelny wynik z podświetloną składnią w prawym panelu. Następnie jednym kliknięciem skopiujesz cały wynik do schowka lub pobierzesz go jako odpowiednio nazwany plik, który otworzysz we własnym edytorze.

Dwie drobne rzeczy, które pomagają przy długich plikach. Włącz numery wierszy, gdy musisz wskazać dokładne miejsce lub porównać dwie wersje obok siebie, wybrane ustawienie zostaje zapamiętane na kolejną wizytę. A jeśli wykryty format nie jest tym, którego się spodziewasz, to zwykle już samo w sobie jest wskazówką: plik rozpoznany jako JavaScript, choć miał to być JSON, często okazuje się odpowiedzią JSONP albo konfiguracją opakowaną w przypisanie.

Twój kod nie opuszcza komputera

Formatowanie działa lokalnie w przeglądarce dzięki kodowi wczytanemu wraz ze stroną. LFUnminify nie przesyła zawartości edytora na serwer formatujący, nie zapisuje jej w bazie danych i nie wymaga konta do jej przetworzenia. Pliki otwarte przyciskiem Wybierz plik lub przeciągnięte do edytora również są odczytywane lokalnie. Po załadowaniu niezbędnych zasobów strony formatowanie kolejnych danych nie wymaga żądań sieciowych.

Lokalne przetwarzanie przydaje się, gdy chcesz przejrzeć wewnętrzny pakiet, projekt klienta lub plik konfiguracyjny bez przesyłania jego treści do tej usługi. Zachowujesz kontrolę nad otwieranymi plikami i pobieranymi kopiami. Narzędzie nie pobiera zdalnych plików w Twoim imieniu: najpierw zapisz je lub skopiuj samodzielnie. Korzystanie z edytora nie wymaga konta, a formatowanie nie zależy od kolejki przetwarzania na zdalnym serwerze.

Dlaczego LFUnminify jest bezpłatne?

LFUnminify należy do rodziny bezpłatnych narzędzi Ludovica Franka, obok generatora haseł, generatora favicon, narzędzia do tworzenia palet kolorów i kilku innych. Założenie jest proste: drobne narzędzia, po które programiści sięgają kilka razy w tygodniu, nie powinny wymagać rejestracji, oglądania reklam ani kupowania kredytów. Tutaj nie ma kont, limitów użycia ani namawiania do płatnego planu.

To także praktyczny przykład naszej pracy. Każde narzędzie z tej rodziny jest prawdziwą aplikacją, tworzoną i utrzymywaną tak jak projekty klientów, co mówi o naszym podejściu więcej niż strona portfolio. Jeśli potrzebujesz dedykowanego rozwiązania internetowego, pełnoprawnej aplikacji zamiast szablonu lub konsultacji technicznych, znajdziesz nas pod odnośnikiem w stopce.

Najczęściej zadawane pytania