Formatowanie kodu, który ktoś zminifikował
Wklej arkusz stylów zapisany w jednym wierszu, odpowiedź API bez ani jednego łamania wiersza albo skrypt wcięty raz tabulatorami, raz spacjami. Po prawej dostaniesz ten sam kod w jednolitym układzie. To narzędzie do formatowania kodu uruchamia Prettiera 3 na stronie i obsługuje JavaScript (z JSX), JSON, CSS, SCSS, LESS oraz HTML.
Cztery kroki od wklejenia do skopiowania
- Wklej kod do lewego pola albo naciśnij Przykładowy kod, aby wczytać przykład dla wybranego języka.
- Zostaw Język na „Wykryj automatycznie” albo wybierz go sam. Wykryty język widać pod polem.
- Ustaw Wcięcie (2 spacje, 4 spacje lub tabulator) i Szerokość wiersza (80, 100 lub 120). Dla JavaScriptu dochodzą cudzysłowy, średniki, końcowe przecinki i spacje w nawiasach klamrowych.
- Sprawdź wynik po prawej oraz liczbę wierszy przed i po. Potem naciśnij Kopiuj albo Pobierz. Plik nazywa się
formatted.js,.json,.css,.scss,.lesslub.html.
Dlaczego opcja jest wyszarzona
Opcje, które nie dotyczą danego języka, są wyłączone, a notatka pod ustawieniami je wymienia. JSON ignoruje cudzysłowy i końcowe przecinki. CSS, SCSS i LESS ignorują średniki, końcowe przecinki i spacje w nawiasach. HTML jest wyjątkiem: sama składnia znaczników nie ma tych ustawień, ale bloki script i style wewnątrz strony stosują Twój wybór.
Co Prettier zmienia oprócz odstępów
Przy ustawieniach domyślnych Prettier zamienia pojedyncze cudzysłowy na podwójne, dodaje brakujące średniki i stawia przecinek po ostatnim elemencie listy zapisanej w wielu wierszach. Każdą z tych decyzji możesz odwrócić w opcjach. Komentarze zostają. Błędy też: usterka we wklejonym kodzie pozostaje w wyniku.
Jedna rzecz zaskakuje w obiektach JSON i JavaScript. Jeśli pierwszy klucz stoi w tym samym wierszu co nawias otwierający, a obiekt mieści się w szerokości wiersza, zostaje w jednym wierszu. Przenieś pierwszy klucz do nowego wiersza, a obiekt pozostanie rozwinięty.
Wykrywanie języka, błędy składni i limit 2 000 000 znaków
Automatyczne wykrywanie to krótkie zgadywanie, nie parser. Tekst zaczynający się od < to HTML. Tekst zaczynający się od nawiasu klamrowego lub kwadratowego, który da się odczytać jako JSON, to JSON. Reguły takie jak a { color: red; } bez function, const i => uchodzą za arkusz stylów, a zmienne SCSS lub LESS wskazują te dwa dialekty. Cała reszta to JavaScript. Gdy zgadnięcie zawiedzie, wybierz język ręcznie.
Gdy kodu nie da się odczytać, zobaczysz wiersz, kolumnę i pierwszą linię komunikatu Prettiera. Dane powyżej 2 000 000 znaków narzędzie odrzuca. TypeScript, Vue i Markdown nie są dołączone.
Dokąd trafia wklejony kod
Przy pierwszym użyciu strona pobiera z tego serwisu potrzebne pliki Prettiera. Potem formatowanie dzieje się lokalnie, a kod nie jest nigdzie wysyłany. Możesz to sprawdzić w panelu sieci przeglądarki podczas klikania przycisku. Narzędzie tylko analizuje i drukuje tekst, nigdy go nie uruchamia. Kopiowanie używa schowka, a pobieranie zapisuje plik ze strony.