Beautifier JSX - sformatuj JSX w przeglądarce
JSX to składnia React-owa - HTML-like w środku JS-a. Beautifier używa Prettiera z parserem Babel + JSX. To samo, co `npx prettier --write src/**/*.jsx`.
Prettier dla JSX-a ma własne reguły: krótkie elementy zostają w jednej linii (`<Button>Save</Button>`), długie z propsami łamie linia po linii, każdy atrybut w swojej. Zwija/rozwija fragmenty, dba o spacje wokół `{ }` w expressionach, normalizuje pojedyncze ↔ podwójne cudzysłowy w propsach (`prop='x'` → `prop="x"` jest standardem JSX-a, ale jeśli twoje stringi mają apostrofy, użyj `{'string'}`).
Akceptuje `.jsx`. Dla TypeScript-owego JSX-a (`.tsx`) wybierz osobny landing - wymaga parsera TS z włączonym JSX-em.
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 JSX:
- Refactor komponentów. Po wyciągnięciu propsów do osobnej linii zostały rozjechane wcięcia.
- Generated JSX. Z Storybooka, Figmy lub mock generatora dostałeś brzydki, jedno-liniowy JSX.
- Migration React 17 → 18. Po Find & Replace na fragmentach (`<></>` zamiast `React.Fragment`) trzeba przeformatować.
- Code review. Junior wrzucił komponent z atrybutami w jednej linii długości 300 znaków.
- Demo dla bloga / tutoriala. Wklej, Grzeczny, copy z highlightingiem.
Pytania i odpowiedzi
Bo zsumowana szerokość elementu przekracza printWidth (domyślnie 100). Możesz podnieść go w ustawieniach do 120, albo zmniejszyć do 80 (popularne w niektórych team-style-guide-ach).