Beautifier TSX - sformatuj TSX w przeglądarce
TSX to TypeScript + JSX - typowy plik z React-em w nowoczesnym projekcie (`.tsx`). Beautifier używa Prettiera z parserem typescript (który ma JSX włączony domyślnie).
Łączy zasady z TS (formatowanie generic types, interface'ów, type aliases) i JSX (atrybuty na osobnych liniach, self-closing ze spacją, fragmenty). Domyślne ustawienia: 100 znaków szerokości, pojedyncze cudzysłowy w JS-ie, podwójne w JSX-owych propsach, trailing commas wszędzie (działa z generic parameters: `function f<T,>(x: T)`).
Akceptuje `.tsx`. Dla zwykłego TS bez JSX-a mamy TypeScript beautifier - w niektórych projektach (NestJS, Node-only backend) lepiej go używać, bo parser TS bez JSX-a jest minimalnie szybszy.
Jak to działa
- Wybierz tryb (Grzeczny / Agresywny / Tylko wcięcia) lub zostaw domyślny.
- Wklej kod w lewy panel albo użyj "Wczytaj plik".
- Dostosuj ustawienia (koło zębate): wcięcie, szerokość, cudzysłowy, średniki.
- Kliknij Sformatuj - pierwszy raz potrwa chwilę (libki ładują się leniwie).
- Po prawej dostajesz wynik z syntax highlightingiem - kopiuj, pobierz albo otwórz w nowej karcie.
Kiedy się przydaje
Pięć sytuacji dla TSX:
- Component refactor. Po podzieleniu komponentu na sub-komponenty wcięcia się rozjechały.
- Generated TSX. Z generatora typów (`openapi-typescript`, `graphql-codegen`) dostałeś nieformatowany kod.
- Next.js page. Twoja `app/page.tsx` ma 200 linii po dodaniu Suspense + SSR - beautifuj.
- Migracja z JSX. Dopisałeś typy do `.jsx` i zmieniłeś rozszerzenie na `.tsx` - formatowanie do nowego stylu.
- Storybook stories. `Story.tsx` z propsami w argSlocie - Prettier daje wszystko spójne.
Pytania i odpowiedzi
Bo TS bez JSX-a nie zaparsuje `<div>...</div>` - uzna to za type assertion. Reguła: każdy plik z React-em → `.tsx` + ten beautifier. Pliki bez JSX-a (utils, types) → `.ts` + TypeScript beautifier.