Beautifier kodu - sformatuj 26 języków w przeglądarce, bez wysyłania nigdzie
Wkleiłeś źródło z minifikatora i jest jedną linią szerokości boiska. Albo skopiowałeś prettifierek z dokumentacji i ma tabami zamiast spacji, których wymaga twój projekt. Albo to po prostu kod od kolegi, który "nie używa formatera" i ma własną filozofię wcięć.
Ten beautifier kodu robi to, co robi przycisk "Format Document" w VS Code: bierze brzydki, ścieśniony albo rozjechany source code i zwraca go ładnie sformatowany, z syntax highlighting po prawej stronie.
Obsługuje 26 języków, z czego 21 ma teraz pełne formatery - nie tylko poprawione wcięcia, ale prawdziwy reformat. JavaScript, TypeScript, JSX, TSX, HTML, CSS, SCSS, LESS, JSON, YAML, Markdown, GraphQL idą przez Prettier 3+. C / C++ / Java / C#: oryginalny **clang-format** skompilowany do WebAssembly - ten sam, którego używa VS Code i Google. Go: oryginalny gofmt w WASM. Python: **Ruff** (Black-kompatybilny, ten sam co `ruff format` w terminalu). Bash: shfmt w WASM. PHP: **Mago** w WASM. SQL: sql-formatter (UPPERCASE keywords, ładne JOIN-y). XML: xml-formatter zachowuje strukturę DOM. Tylko Rust, Kotlin, Swift i Ruby zostają na trybie kosmetycznym (brace-aware indenter dla `{}`-języków, czysto whitespace dla Ruby) - pełne formatery dla nich (rustfmt, ktlint, swift-format) wymagają toolchaina, którego nie ma w przeglądarce.
Trzy tryby odpowiadają trzem różnym potrzebom: Grzeczny używa Prettiera i łamie linie tylko, gdy przekraczają twoją szerokość (domyślnie 100). Agresywny to js-beautify dla JS/HTML/CSS - wymusza nowe linie po każdej instrukcji, rozbija łańcuchowe wywołania, wszystko na osobnej linii. Tylko wcięcia to nasza ~50-linijkowa implementacja - konwertuje taby ↔ spacje, normalizuje szerokość wcięć, ucina trailing whitespace, normalizuje CRLF → LF.
Wszystko liczy się lokalnie w twojej przeglądarce. Kod nie wychodzi z twojej maszyny - żadnego upload, żadnej telemetrii, żadnego loga po stronie serwera. Możesz odłączyć internet w środku sesji i tool dalej działa (po pierwszym formatowaniu - wtedy biblioteki są już w cache).
Jak to działa
- Wybierz język w lewym górnym dropdownie albo zostaw Auto - wtedy highlight.js zgaduje za ciebie po każdej zmianie wpisu. Auto rozpoznaje 26 języków z dropdownu, więc nie pomyli SQL-a z Pythonem.
- Wybierz tryb: Grzeczny (domyślny, łamie tylko za szeroki kod), Agresywny (wszystko na osobnej linii - tylko JS/HTML/CSS), Tylko wcięcia (przepisuje wcięcia + obcina spacje, działa wszędzie).
- Wklej kod w lewym panelu albo kliknij "Wczytaj plik" - akceptujemy do 5 MB. Wszystkie typowe rozszerzenia (.js, .py, .go, .rs, .java itd.) - przy uploadzie sami wykrywamy język z rozszerzenia.
- Kliknij Sformatuj. Pierwszy raz potrwa chwilę - biblioteki ładują się leniwie ("Loading formatter..."). Kolejne kliknięcia są już natychmiastowe, bo Prettier/Shiki siedzą w cache.
- Po prawej dostajesz podgląd z syntax highlightingiem (silnik Shiki - te same gramatyki, co w VS Code). Możesz Skopiować, Pobrać jako plik (rozszerzenie dobrane do języka) albo Otworzyć w nowej karcie (przyda się przy długim wyjściu).
- W rogu jest koło zębate (ustawienia): szerokość wcięcia (tab / 2 spacje / 4 spacje), maksymalna szerokość linii (80/100/120), cudzysłowy ("pojedyncze" / "podwójne"), średniki (on/off), przecinki na końcu (all / es5 / none).
- Większość języków ma teraz pełen reformat w przeglądarce: C / C++ / Java / C# przez clang-format (WASM), Go przez gofmt (WASM), Python przez Ruff (WASM, Black-kompatybilny), Bash przez shfmt (WASM), PHP przez Mago (WASM), plus SQL (sql-formatter) i XML (xml-formatter). Pełne formatery ładują się leniwie przy pierwszym kliknięciu (~80-300 kB WASM na język). Rust, Kotlin, Swift, Ruby - żółta informacja i tryb Tylko wcięcia (brace-aware indenter / czysto whitespace).
- Jeśli kod ma błąd składni (np. niedomknięty nawias), prawy panel pokaże dokładną treść błędu z linii i kolumny - tę samą, którą widziałbyś w prawdziwym Prettierze w terminalu.
Kiedy się przydaje
Sześć typowych sytuacji, w których ten upiększacz kodu oszczędza ci ręcznej roboty:
- Sformatowanie minifikowanego pliku z produkcji. Wszedłeś w DevTools, znalazłeś `app.min.js`, jest jedną linią długości kilometra. Wklej, Agresywny tryb, dostajesz czytelne źródło - nie pełne (zmienne dalej są `_a`, `_b`), ale przynajmniej widzisz strukturę.
- Czyszczenie kodu od kolegi przed PR-em. Kolega wkleił do PR-a kod, który "działa", ale ma 6-spacjowe wcięcia, taby pomieszane ze spacjami i 4 puste linie między funkcjami. Tryb Grzeczny + 2 spacje + Prettier = code review przestaje krzyczeć o whitespace.
- Przepisanie tabów na spacje (albo odwrotnie). Twój `.editorconfig` mówi 2 spacje, ale kod od stażysty ma taby. Tylko wcięcia + 2 spacje robi konwersję jednym kliknięciem, bez ruszania struktury.
- Sprawdzenie, czy JSON/YAML w ogóle się parsuje. Wkleiłeś GitHub Actions YAML i CI krzyczy, że niepoprawny - paste, Grzeczny, Prettier zwraca błąd z linią i kolumną. Szybsze niż googlanie regulaminu YAML.
- Beautifier kodu skopiowanego z PDF-a. Przepisałeś przykład z książki/dokumentacji do PDF-a i przy klejeniu utraciłeś wcięcia (PDF nie umie skopiować ich poprawnie). Wklej, Grzeczny, Prettier dorabia strukturę z średników i nawiasów.
- Konwersja CRLF → LF na Windowsie. Plik z Windows otworzony na Mac/Linux ma `^M` na końcu każdej linii i git krzyczy. Tylko wcięcia ujednolica EOL do LF, bez ruszania reszty.