JSX formázó
Formázza React-összetevőit és más JSX elemeket ezzel a JSX formázóval. Illessze be a kódot, az eszköz pedig JSX engedélyezésével JavaScript modulként elemzi, majd két szóközös behúzással és pontosvesszőkkel írja ki a JavaScript tartalmat, a többsoros JSX elemeket pedig úgy rendezi el, hogy a beágyazott címkék külön sorba kerüljenek a zárójeleken belül. A szintaktikai hibákat jelzi, így a React fejlesztők olvasható összetevőket kapnak a kódellenőrzéshez, hibakereséshez és dokumentáláshoz.
Gyakran ismételt kérdések
Hogyan működik a JSX formázó?
Először JSX engedélyezésével JavaScript modulként elemzi a kódot, majd egységes stílusban írja ki. A JSX elemeket ezután a HTML formázóval azonos szabályok szerint rendezi el, így a beágyazott blokkcímkék saját, behúzott sorokat kapnak.
Hogyan kell írni a többsoros JSX elemeket?
Ha egy elemnek blokk szintű gyermekelemei vannak, például div, section, p, ul vagy h1, minden gyermek külön sorba kerül, az egész elemet pedig zárójelek fogják közre. Az egy sorban elférő elemek, például az egyetlen összetevőcímke, soron belül maradnak.
Támogatja a fragmenteket és az önlezáró összetevőket?
Igen, a <> és </> formában írt fragmenteket, valamint az olyan önlezáró összetevőket, mint a <Item key={1}/>, elemzi és megőrzi. Attribútumaikat és kapcsos zárójelek közötti kifejezéseiket az eredeti formában másolja át.
Mi történik szintaktikai hiba esetén?
Az elemző leáll, és az eszköz megjeleníti a hibaüzenetet, például a váratlan tokent, ahelyett, hogy félig formázott kódot adna vissza. Javítsa ki a jelzett helyet, majd formázza újra.
Milyen stílust használ a JavaScript rész?
A blokkok behúzása két szóköz, soronként egy utasítás szerepel, az operátorok körül szóközök vannak, az utasítások végén pedig pontosvesszők állnak. A stílus nem módosítható.
Megmaradnak a megjegyzések?
Igen, a JavaScript sor- és blokkmegjegyzései megmaradnak. A JSX kifejezéseken belüli megjegyzések a kapcsos zárójelek között maradnak.
Támogatja a TypeScript használatát TSX fájlokban?
Nem, a típusannotációk nem részei az eszköz által elemzett JSX nyelvtanának, ezért a típusokat tartalmazó TSX szintaktikai hibát jelezve elutasításra kerül. Típusozott kódhoz használja a TypeScript formázót.
A formázás megváltoztatja, hogyan jelenik meg az összetevőm?
A JavaScript csak újra kiírásra kerül, a JSX elrendezése pedig megváltoztatja a blokk elemek közötti szóközöket, amelyeket a React figyelmen kívül hagy, ha külön sorokban szerepelnek. Ha a pontos szóközök számítanak, ellenőrizze a címkék melletti soron belüli szöveget.
Miért javascript kódkerítéssel van körülvéve a kimenet?
A JSX a JavaScript kiterjesztése, ezért az eredmény javascript jelölésű Markdown kódblokkban jelenik meg. Másolja ki a kerítések közötti sorokat a .jsx fájljába.
Mekkora lehet az összetevőm?
Futtatásonként legfeljebb 5 MB kódot fogad el; a nagyobb bemenetet üzenettel utasítja el. A kimenet megegyezik a Code Formatter JSX beállításával.