Formatter i upiększacz kodu
Wklej kod lub otwórz plik, kliknij Formatuj i gotowe. Język wykrywany jest automatycznie — JavaScript, TypeScript, CSS, HTML, JSON, XML, SQL, YAML, Markdown i GraphQL, wszystko w przeglądarce.
Wszystko działa w Twojej przeglądarce — kod nigdy nie trafia na żaden serwer.
Szerokość wiersza dotyczy JavaScriptu, TypeScriptu, CSS, SCSS, LESS, HTML, YAML, Markdown i GraphQL. Formatowanie nigdy nie sprawdza logiki, typów ani reguł stylu.
Język zostanie wykryty, gdy tylko dodasz kod.
Upuść tutaj plik z kodem (do 5 MB), wklej kod lub wczytaj przykład. Naciśnij Ctrl+Enter, aby sformatować.
Formatuj i upiększaj kod w przeglądarce
Kod skopiowany ze zminifikowanego pliku, logu, wiadomości na czacie albo starego projektu trudno czytać, a jeszcze trudniej recenzować. Ten formatter jednym kliknięciem przywraca mu czytelną postać ze spójnymi wcięciami. Wklej kod, kliknij Formatuj (lub naciśnij Ctrl+Enter), a wynik pojawi się obok oryginału, z numerami wierszy po obu stronach, dzięki czemu porównasz je jednym rzutem oka.
Narzędzie obsługuje formaty, z którymi programiści spotykają się najczęściej: JavaScript z JSX, TypeScript z TSX, CSS, SCSS i LESS, HTML wraz z wbudowanymi skryptami i stylami, JSON, XML, SQL w trzynastu dialektach, YAML, Markdown oraz GraphQL. Domyślnie język jest wykrywany za Ciebie — po nazwie pliku, gdy otwierasz plik, i po samym tekście, gdy go wklejasz. Jeśli tekst może być czymś więcej niż jednym, narzędzie to zgłosi i pokaże prawdopodobne opcje, zamiast po cichu wybrać zły parser.
Styl pozostaje w Twoich rękach. Wybierz dwie spacje, cztery spacje lub tabulatory oraz szerokość wiersza 80, 100 lub 120 znaków dla języków formatowanych przez Prettiera. Dla SQL wskażesz dialekt, na przykład PostgreSQL, MySQL, SQL Server lub BigQuery. Dla JSON dostępny jest też przycisk Minifikuj, który usuwa wszystkie białe znaki, nie ruszając liczb, ciągów znaków ani kolejności kluczy. Ustawienia są zapamiętywane w przeglądarce, a po włączeniu automatycznego formatowania wynik widać już podczas pisania.
Gdy coś jest nie tak, komunikat jest krótki i dokładny: język, czego oczekiwał parser oraz wiersz i kolumna. Dane wejściowe nigdy nie są nadpisywane, a przycisk przenosi kursor w miejsce błędu. Przycisk Cofnij przywraca to, co przez pomyłkę wyczyścisz lub zastąpisz. Wynik pobierzesz z odpowiednim dla danego języka rozszerzeniem pliku albo otworzysz obie wersje obok siebie w Porównywarce tekstów, by zobaczyć dokładnie, co się zmieniło.
Wszystko odbywa się na Twoim urządzeniu. Ciężkie silniki formatujące są pobierane tylko dla języka, który faktycznie formatujesz, i działają w procesie w tle, więc duży plik nie zawiesi strony. Pamiętaj o ograniczeniach: można otworzyć pliki do 5 MB, dane powyżej 300 000 znaków mogą być przetwarzane kilka sekund, a powyżej dwóch milionów znaków są odrzucane. Formatowanie nie jest lintingiem ani kompilacją, więc nie wykryje błędów logicznych, a kilka egzotycznych konstrukcji składni może zostać odrzuconych.
Najczęściej zadawane pytania
Czy mój kod jest gdzieś wysyłany?
Nie. Kod formatują biblioteki działające w Twojej przeglądarce, w wątku w tle. Nic nie jest wysyłane na serwer. W pamięci lokalnej tej przeglądarki zapisywane są tylko ustawienia i opcjonalny szkic, a pole możesz wyczyścić w każdej chwili.
Czy formatowanie zmieni działanie mojego kodu?
Formatter zmienia tylko wygląd: wcięcia, podziały wierszy i odstępy. Może też ujednolicić cudzysłowy, dodać lub usunąć opcjonalne nawiasy i spójnie rozmieścić średniki, ale znaczenie kodu pozostaje takie samo. Narzędzie nie sprawdza logiki, typów ani reguł lintera, więc poprawny kod zostaje poprawny, a błędny — błędny.
Jak wykrywany jest język?
Jeśli otwierasz plik, decyduje jego rozszerzenie. W przeciwnym razie narzędzie analizuje sam tekst: znaczniki, nawiasy klamrowe, słowa kluczowe i typową interpunkcję. Gdy dwa języki są podobne, na przykład CSS i SCSS albo JavaScript i TypeScript, zamiast zgadywać, pyta Cię o wybór. Język zawsze możesz wskazać ręcznie na liście Język.
Co się stanie, gdy w kodzie jest błąd składni?
Wynik pozostaje pusty, dane wejściowe zostają dokładnie takie, jakie były, a Ty dostajesz krótki komunikat z numerem wiersza i kolumny. Kliknij Pokaż w danych wejściowych, aby przejść w to miejsce, popraw błąd i ponownie kliknij Formatuj.
Czy mogę tu minifikować kod?
Tylko JSON, bo usunięcie białych znaków jest tam zawsze bezpieczne. Porządna minifikacja JavaScriptu czy CSS wymaga wyspecjalizowanego minifikatora, ponieważ zmiana nazw zmiennych lub łączenie reguł może zmienić działanie kodu, więc to narzędzie tego nie próbuje. Do dokładniejszego sprawdzenia składni SQL użyj Formattera i walidatora SQL.