Formatter JSX
Formatuj komponenty React i inne JSX za pomocą tego narzędzia Formatter JSX. Wklej kod, a narzędzie sparsuje go jako moduł JavaScript z włączonym JSX, wydrukuje JavaScript z wcięciami o szerokości dwóch spacji i średnikami, a wielowierszowe elementy JSX rozmieści tak, by zagnieżdżone znaczniki znajdowały się w osobnych wierszach wewnątrz nawiasów. Błędy składni są zgłaszane, dzięki czemu programiści React szybko otrzymują czytelne komponenty do przeglądów, debugowania i dokumentacji.
Najczęściej zadawane pytania
Jak działa narzędzie Formatter JSX?
Najpierw parsuje kod jako moduł JavaScript z włączonym JSX i drukuje go w spójnym stylu. Elementy JSX są następnie rozmieszczane według tych samych reguł co w narzędziu Formatter HTML, dzięki czemu zagnieżdżone znaczniki blokowe trafiają do osobnych wierszy z wcięciami.
Jak zapisywane są wielowierszowe elementy JSX?
Gdy element zawiera elementy potomne poziomu blokowego, takie jak div, section, p, ul lub h1, każde z nich trafia do osobnego wiersza, a cały element jest ujmowany w nawiasy. Elementy mieszczące się w jednym wierszu, takie jak pojedynczy znacznik komponentu, pozostają w tym samym wierszu.
Czy obsługiwane są fragmenty i komponenty samozamykające?
Tak, fragmenty zapisane jako <> i </> oraz komponenty samozamykające, takie jak <Item key={1}/>, są parsowane i zachowywane. Ich atrybuty i wyrażenia w nawiasach klamrowych są kopiowane bez zmian.
Co się dzieje w przypadku błędów składni?
Parser zatrzymuje działanie, a narzędzie wyświetla komunikat, na przykład o nieoczekiwanym tokenie, zamiast zwracać częściowo sformatowany kod. Popraw wskazane miejsce i ponów formatowanie.
Jakiego stylu używa część JavaScript?
Bloki mają wcięcia o szerokości dwóch spacji, jedna instrukcja przypada na wiersz, wokół operatorów są spacje, a na końcu instrukcji znajdują się średniki. Nie ma opcji zmiany stylu.
Czy komentarze są zachowywane?
Tak, komentarze wierszowe i blokowe w JavaScript są zachowywane. Komentarze wewnątrz wyrażeń JSX pozostają w nawiasach klamrowych.
Czy obsługuje TypeScript w plikach TSX?
Nie, adnotacje typów nie należą do gramatyki JSX parsowanej przez to narzędzie, dlatego TSX z typami jest odrzucany jako błąd składni. Do typowanego kodu użyj narzędzia Formatter TypeScript.
Czy formatowanie zmieni sposób renderowania mojego komponentu?
JavaScript jest tylko drukowany ponownie, a układ JSX zmienia białe znaki między elementami blokowymi, które React ignoruje, gdy znajdują się w osobnych wierszach. Sprawdź tekst w wierszu obok znaczników, jeśli dokładne odstępy mają znaczenie.
Dlaczego wynik jest otoczony blokiem javascript?
JSX jest rozszerzeniem JavaScript, dlatego wynik jest zwracany jako blok kodu Markdown oznaczony jako javascript. Skopiuj wiersze między znacznikami ogrodzenia do pliku .jsx.
Jak duży może być mój komponent?
Do 5 MB kodu na jedno uruchomienie; większe dane wejściowe są odrzucane z komunikatem. Wynik jest taki sam jak w opcji JSX narzędzia Code Formatter.