JSX formatavimo įrankis
Formatuokite React komponentus ir kitus JSX naudodami šį JSX formatavimo įrankį. Įklijuokite kodą, ir įrankis išanalizuos jį kaip JavaScript modulį su įjungtu JSX, išves JavaScript su dviejų tarpų įtrauka ir kabliataškiais, o kelių eilučių JSX elementus išdėstys taip, kad įdėtinės žymos būtų atskirose eilutėse skliaustuose. Apie sintaksės klaidas pranešama, todėl React kūrėjai gali greitai gauti lengvai skaitomus komponentus peržiūrai, derinimui ir dokumentacijai.
Dažnai užduodami klausimai
Kaip veikia JSX formatavimo įrankis?
Pirmiausia kodas išanalizuojamas kaip JavaScript modulis su įjungtu JSX ir išvedamas nuosekliu stiliumi. JSX elementai išdėstomi pagal tas pačias taisykles kaip HTML formatavimo įrankyje, todėl įdėtinės blokų žymos pateikiamos atskirose įtrauktose eilutėse.
Kaip rašomi kelių eilučių JSX elementai?
Kai elemente yra blokinio lygmens antrinių elementų, pavyzdžiui, div, section, p, ul arba h1, kiekvienas jų pateikiamas atskiroje eilutėje, o visas elementas apgaubiamas skliaustais. Į vieną eilutę telpantys elementai, pavyzdžiui, viena komponento žyma, lieka toje pačioje eilutėje.
Ar palaikomi fragmentai ir savaime užsidarantys komponentai?
Taip, fragmentai, užrašyti kaip <> ir </>, bei savaime užsidarantys komponentai, pavyzdžiui, <Item key={1}/>, išanalizuojami ir išsaugomi. Jų atributai ir išraiškos riestiniuose skliaustuose nukopijuojami taip, kaip parašyti.
Kas nutinka aptikus sintaksės klaidų?
Analizatorius sustoja, o įrankis parodo pranešimą, pavyzdžiui, apie netikėtą žetoną, užuot grąžinęs iš dalies suformatuotą kodą. Pataisykite nurodytą vietą ir formatuokite dar kartą.
Kokį stilių naudoja JavaScript dalis?
Blokams naudojama dviejų tarpų įtrauka, kiekvienas sakinys rašomas atskiroje eilutėje, aplink operatorius paliekami tarpai, o sakinių pabaigoje dedami kabliataškiai. Stiliaus parinkčių nėra.
Ar komentarai išsaugomi?
Taip, JavaScript eilutės ir blokų komentarai išsaugomi. Komentarai JSX išraiškose lieka jų riestiniuose skliaustuose.
Ar jis palaiko TypeScript failuose, skirtuose TSX?
Ne, tipų anotacijos nėra JSX gramatikos, kurią analizuoja šis įrankis, dalis, todėl TSX su tipais atmetamas kaip sintaksės klaida. Tipizuotam kodui naudokite TypeScript formatavimo įrankį.
Ar formatavimas pakeis tai, kaip atvaizduojamas mano komponentas?
JavaScript tik išvedamas iš naujo, o JSX išdėstymas pakeičia tarpus tarp blokinių elementų; React jų nepaiso, kai jie pateikiami atskirose eilutėse. Jei svarbus tikslus tarpų išdėstymas, patikrinkite greta žymų esantį tekstą.
Kodėl išvestis pateikiama javascript tvorelėje?
JSX yra JavaScript plėtinys, todėl rezultatas pateikiamas kaip Markdown kodo blokas su javascript žyma. Nukopijuokite eilutes tarp aptvarų į savo .jsx failą.
Kokio dydžio gali būti mano komponentas?
Iki 5 MB kodo per vieną vykdymą; didesnė įvestis atmetama ir parodomas pranešimas. Išvestis tokia pati kaip Code Formatter parinkties JSX.