Wejście

Wyjście

Czym jest formatowanie JavaScript?

Właśnie dostałeś 2000-znakowy jednoliniowy JavaScript z zewnętrznego API, albo debugujesz bundle produkcyjny — i jest całkowicie nieczytelny. Właśnie do tego służy to narzędzie. Formatter JavaScript dodaje właściwe wcięcia, łamania linii i spacje, by struktura stała się natychmiast jasna. Dokumentacja MDN JavaScript to referencyjna dokumentacja języka, a specyfikacja ECMAScript definiuje jego podstawy. Narzędzia takie jak Prettier i ESLint robią to w pipeline CI — ale gdy potrzebujesz szybkiego formatu teraz, tu to zrobisz. Wszystko działa w przeglądarce; żaden kod nie opuszcza Twojego komputera. webpack i Rollup produkują zminifikowane wyjście, które chcesz sformatować do debugowania.

To narzędzie działa w całości w przeglądarce. Nic nie jest wysyłane na serwer. Wklej JS lub wgraj plik i uzyskaj sformatowany wynik. Użyj minifikacji dla bundli produkcyjnych. Do walidacji użyj Walidatora JavaScript. Tylko do minifikacji: Minifikator JavaScript.

Jak korzystać z narzędzia

1

Wklej lub wgraj

Wklej JavaScript w lewym panelu lub wgraj plik .js lub .txt. Przycisk Przykład ładuje kod próbki. Wyczyść resetuje edytor.

2

Sprawdź wynik

Prawy panel aktualizuje się automatycznie o sformatowany kod. Minifikuj, aby uzyskać zwartą wersję produkcyjną.

3

Kopiuj lub pobierz

Użyj Kopiuj lub Pobierz, aby uzyskać wynik. Dla JSX/React: Formatter JSX. Do konwersji na TypeScript: JavaScript do TypeScript.

Przykłady formatowania JavaScript

Oto przykład formatowania zminifikowanego kodu JavaScript.

Przykład: wyszukiwanie planu abonenta

Wejście zminifikowane:

Wejście

Wyjście sformatowane:

Wyjście

Kiedy formatowanie JavaScript pomaga

Przy debugowaniu zminifikowanego kodu, przeglądaniu bundli z webpack lub rollup lub nauce na skryptach produkcyjnych formatowanie uwidacznia strukturę. Przydatne przy stack trace, kodzie zewnętrznym i szybkiej ocenie czytelności. ECMAScript definiuje język. Dla kodu zobfuskowanego najpierw użyj Deobfuskatora JavaScript.

Często zadawane pytania

Czy moje dane są prywatne?

Tak. Formatowanie odbywa się w całości w przeglądarce. Żadne dane nie są wysyłane na serwer.

Formatter a minifikator?

Formatter dodaje wcięcia dla czytelności. Minifikator usuwa białe znaki i komentarze, aby zmniejszyć plik. To narzędzie potrafi oba tryby.

Czy obsługuje ES6+?

Tak. Obsługiwana jest nowoczesna składnia JavaScript (funkcje strzałkowe, klasy, async/await).

A JSX?

Dla kodu JSX i React użyj Formattera JSX.

Czy naprawia błędy składni?

Nie. Nieprawidłowy JavaScript wyświetli błąd. Użyj Walidatora JavaScript, aby najpierw sprawdzić składnię.

Powiązane narzędzia

Więcej: ECMAScript, MDN JavaScript, webpack, rollup, source maps, Vite, TypeScript.