Formatowanie JavaScript online
Wklej zminifikowany plik .js, pakiet webpack lub fragment w jednym wierszu i otrzymaj JavaScript z prawidłowymi wcięciami w prawym panelu. Formatowanie wykonuje Prettier w Twojej przeglądarce, bez przesyłania danych.
Dlaczego JavaScript staje się nieczytelny?
Wiele procesów budowania wersji produkcyjnej minifikuje JavaScript przed jego udostępnieniem. Minifikatory usuwają zbędne odstępy i komentarze, a także mogą skracać nazwy lub przekształcać wyrażenia. Osobny etap pakowania może łączyć moduły w większe pliki, dlatego dostarczony skrypt znacznie różni się od źródeł projektu. Celem jest zachowanie działania przy przygotowaniu kodu do przesłania, lecz ręczna analiza staje się trudniejsza. Projekt z wieloma czytelnymi modułami może trafić do przeglądarki jako kilka zwartych pakietów. Formatowanie uwidacznia strukturę, która w nich pozostała, bez cofania przekształceń wykonanych podczas budowania.
Co naprawdę przywraca formatowanie?
Formatowanie pakietu dodaje podziały wierszy, odstępy i wcięcia, dzięki którym łatwiej przeanalizować pozostały kod programu. Widać zagnieżdżone funkcje i gałęzie warunkowe, a ciągi znaków lub nazwy punktów końcowych łatwiej znaleźć. Nowe numery wierszy dotyczą sformatowanej kopii: ślad stosu ze zminifikowanego pliku nadal odwołuje się do oryginału. LFUnminify nie przelicza tych pozycji ani nie łączy ich z mapami źródeł. Czytelny widok pomaga zrozumieć otaczającą logikę, a debugger przeglądarki pozwala badać dokładne miejsca podczas działania programu. Dobrym punktem wyjścia jest charakterystyczny fragment komunikatu o błędzie lub żądania sieciowego. Znajdź go w sformatowanej kopii i przeczytaj otaczające warunki, zamiast zakładać, że przyczyną jest najbliższa funkcja. Jeśli pakiet zawiera wygenerowane funkcje pomocnicze lub kod otaczający moduły podczas uruchamiania, pozostaną one po formatowaniu. Porównanie tego kontekstu z dostępnym oryginalnym źródłem daje pewniejsze wyjaśnienie niż same wcięcia.
Obsługa współczesnej składni
Formatter analizuje współczesny JavaScript, a nie ograniczony zestaw sprzed dekady. Obsługuje funkcje strzałkowe, klasy, async i await, generatory, opcjonalne łańcuchowanie, operator nullish coalescing, literały szablonowe, destrukturyzację, składnię spread, importy dynamiczne i moduły ES. Obsługiwany jest też JSX, co ma znaczenie przy analizie komponentu React skompilowanego bez przekształcenia tej składni. Ponieważ pracę wykonuje Prettier, wynik stosuje spójne konwencje, choć ustawienia tego narzędzia mogą różnić się od konfiguracji Twojego edytora.
Granice możliwości
Formatowanie nie cofa przekształceń wykonanych podczas budowania. Zmienna o nazwie n pozostaje n, nawet jeśli pierwotnie nazywała się remainingRetries. Połączone moduły zostają w dostarczonym pakiecie, a usuniętych komentarzy nie da się wiarygodnie odtworzyć. Oryginalne repozytorium lub mapa źródeł mogą pomóc odzyskać kontekst poza tym narzędziem. Celowo zaciemniony kod pozostaje zaciemniony: zakodowane ciągi znaków, sztuczne rozgałęzienia i mylące nazwy nadal mogą utrudniać zrozumienie. Traktuj wynik jako pomoc w analizie, a wszelkie zmiany testuj we właściwym projekcie.
Najczęściej zadawane pytania
Czy można sformatować pakiet webpack lub Vite?
Tak, obsługiwane pakiety JavaScript można sformatować po wklejeniu ich treści lub otwarciu lokalnego pliku. Wynik zachowuje połączony kod i nie odtwarza osobnych modułów źródłowych. Duże pakiety mogą spowolnić przeglądarkę lub sprawić, że przestanie odpowiadać, dlatego w miarę możliwości analizuj mniejszy, kompletny fragment.
Czy narzędzie usuwa zaciemnianie JavaScript?
Może sformatować obsługiwaną składnię JavaScript w zaciemnionym pliku, ale nie cofa obfuskacji. Zakodowane ciągi znaków, sztuczny przepływ sterowania i celowo mylące nazwy pozostają. Wcięcia pomagają badać te struktury, lecz sam czytelny układ nie wyjaśnia w pełni działania skryptu ani nie dowodzi, że można mu zaufać.
Czy formatowanie może zepsuć kod?
Formatter ma zachować działanie JavaScript, nadając mu spójny styl. Może zmienić znaki interpunkcyjne, cudzysłowy i układ, więc wynik nie jest kopią identyczną bajt po bajcie. Zachowaj oryginał, przejrzyj wynik i uruchom testy projektu przed użyciem zmienionego lub sformatowanego pakietu na produkcji.