Formatter JSX
Formatați componentele React și alte JSX cu acest formatter JSX. Lipiți codul, iar instrumentul îl interpretează ca modul JavaScript cu JSX, afișează JavaScript cu indentare de două spații și punct și virgulă și aranjează elementele JSX pe mai multe linii, cu etichetele imbricate pe rânduri separate, între paranteze. Erorile de sintaxă sunt raportate, astfel încât dezvoltatorii React să obțină componente ușor de citit pentru recenzii, depanare și documentare.
Întrebări frecvente
Cum funcționează formatterul JSX?
Mai întâi, analizează codul ca modul JavaScript cu JSX activat și îl afișează într-un stil consecvent. Elementele JSX sunt apoi aranjate după aceleași reguli ca în formatterul HTML, astfel încât etichetele de bloc imbricate să apară pe propriile linii indentate.
Cum sunt scrise elementele JSX pe mai multe linii?
Când un element conține copii de tip bloc, precum div, section, p, ul sau h1, fiecare copil apare pe propria linie, iar întregul element este încadrat între paranteze. Elementele care încap pe un singur rând, precum o singură etichetă de componentă, rămân pe aceeași linie.
Sunt acceptate fragmentele și componentele cu etichete de închidere automată?
Da, fragmentele scrise ca <> și </> și componentele cu etichete de închidere automată, precum <Item key={1}/>, sunt analizate și păstrate. Atributele și expresiile lor dintre acolade sunt copiate așa cum au fost scrise.
Ce se întâmplă în cazul erorilor de sintaxă?
Analizatorul se oprește, iar instrumentul afișează mesajul de eroare, de exemplu „token neașteptat”, în loc să returneze cod formatat doar parțial. Corectați locul indicat și formatați din nou.
Ce stil folosește partea JavaScript?
Blocurile sunt indentate cu două spații, există o instrucțiune pe linie, spații în jurul operatorilor și punct și virgulă la sfârșitul instrucțiunilor. Stilul nu poate fi modificat prin opțiuni.
Sunt păstrate comentariile?
Da, comentariile pe linie și de bloc din JavaScript sunt păstrate. Comentariile din expresiile JSX rămân între acolade.
Acceptă TypeScript în fișiere TSX?
Nu, adnotările de tip nu fac parte din gramatica JSX analizată de acest instrument, așa că TSX cu tipuri este respins ca eroare de sintaxă. Folosiți formatterul TypeScript pentru cod tipizat.
Formatarea schimbă modul în care se redă componenta mea?
JavaScript este doar reafișat, iar aspectul JSX schimbă spațiile albe dintre elementele de bloc, pe care React le ignoră când acestea sunt pe linii separate. Verificați textul din linie de lângă etichete dacă spațierea exactă contează.
De ce este rezultatul inclus într-un bloc de cod javascript?
JSX este o extensie a JavaScript, așa că rezultatul este returnat ca bloc de cod Markdown marcat javascript. Copiați liniile dintre delimitatori în fișierul .jsx.
Cât de mare poate fi componenta mea?
Până la 5 MB de cod la fiecare rulare; intrările mai mari sunt respinse cu un mesaj. Rezultatul este același ca opțiunea JSX din Code Formatter.