Formatter JSX
Formátujte komponenty React a další JSX pomocí tohoto Formatteru JSX. Vložte svůj kód a nástroj jej zpracuje jako modul JavaScript s JSX, vytiskne JavaScript s odsazením dvěma mezerami a středníky a vícerádkové prvky JSX rozloží tak, že vnořené značky umístí na samostatné řádky do závorek. Chyby syntaxe se zobrazí, takže vývojáři React získají přehledné komponenty pro kontrolu, ladění a dokumentaci.
Často kladené otázky
Jak funguje Formatter JSX?
Nejprve kód zpracuje jako modul JavaScript se zapnutým JSX a vypíše ho v jednotném stylu. Prvky JSX se pak rozloží podle stejných pravidel jako ve formátovači HTML, takže vnořené blokové značky budou na vlastních odsazených řádcích.
Jak se zapisují víceřádkové prvky JSX?
Když prvek obsahuje blokové potomky, například div, section, p, ul nebo h1, každý potomek se zapíše na vlastní řádek a celý prvek se uzavře do závorek. Prvky, které se vejdou na jeden řádek, například jediná značka komponenty, zůstávají v řádku.
Podporuje fragmenty a komponenty se samouzavírací značkou?
Ano, fragmenty zapsané jako <> a </> i komponenty se samouzavírací značkou, například <Item key={1}/>, se zpracují a zachovají. Jejich atributy a výrazy ve složených závorkách se zkopírují tak, jak jsou zapsané.
Co se stane při chybě syntaxe?
Parser se zastaví a nástroj zobrazí chybovou zprávu, například o neočekávaném tokenu, místo aby vrátil jen částečně formátovaný kód. Opravte uvedené místo a spusťte formátování znovu.
Jaký styl používá část JavaScript?
Bloky mají odsazení dvěma mezerami, na každém řádku je jeden příkaz, kolem operátorů jsou mezery a příkazy končí středníkem. Styl nelze změnit.
Zachovají se komentáře?
Ano, řádkové i blokové komentáře v JavaScript se zachovají. Komentáře uvnitř výrazů JSX zůstávají ve složených závorkách.
Podporuje soubory TSX s TypeScript?
Ne, anotace typů nejsou součástí gramatiky JSX, kterou tento nástroj zpracovává, takže TSX s typy skončí chybou syntaxe. Pro typovaný kód použijte formátovač TypeScript.
Změní formátování způsob vykreslení mé komponenty?
JavaScript se pouze znovu vypíše a rozložení JSX změní mezery mezi blokovými prvky, které React ignoruje, pokud jsou na samostatných řádcích. Pokud záleží na přesných mezerách, zkontrolujte vložený text vedle značek.
Proč je výstup uzavřen v bloku označeném jako javascript?
JSX je rozšířením JavaScript, takže se výsledek vrátí jako blok kódu Markdown označený javascript. Do souboru .jsx zkopírujte řádky mezi oddělovači.
Jak velká může být moje komponenta?
Při každém spuštění lze zpracovat až 5 MB kódu; větší vstup bude odmítnut se zprávou. Výstup odpovídá možnosti JSX ve formátovači kódu.