JSX-muotoilija
Muotoile ja kaunista JSX syntaksikorostuksella
Syöte
Muotoiltu tuloste
Mikä on JSX-muotoilija?
JSX on JavaScript XML-tyylistä syntaksia React-komponenteille. JSX-muotoilija lisää sisennystä ja rivinvaihtoja JSX/React-koodiin. Reactin JSX-dokumentaatio määrittelee syntaksin. Tavanomaiset JavaScript-muotoilijat eivät välttämättä käsittele JSX:ää oikein.
Tämä työkalu toimii kokonaan selaimessasi. Mitään ei lähetetä palvelimelle. Liitä JSX tai lataa .jsx- tai .js-tiedosto; saat muotoillun tuloksen. Pelkkään JavaScriptiin: JavaScript-muotoilija. Validointiin: JavaScript-validaattori. TypeScript-muunnokseen: JavaScript TypeScriptiksi.
Käyttöohje
Liitä tai lataa
Liitä JSX- tai React-koodi vasempaan paneeliin tai lataa .jsx- tai .js-tiedosto. Esimerkki lataa esimerkkikoodin. Tyhjennä nollaa.
Tarkista tuloste
Oikea paneeli näyttää muotoillun JSX:n oikealla sisennuksella. Virheellinen JSX näyttää virheen.
Kopioi tai lataa
Käytä Kopioi tai Lataa tuloksen saamiseksi. Koodin ajamiseen: JavaScript-konsoli. Minifiointiin: JavaScript-tiivistin.
JSX-muotoilijaesimerkkejä
Tässä esimerkki tiivistetyn JSX/React-koodin muotoilusta.
Esimerkki: tilaajan korttikomponentti
Tiivistetty JSX-syöte:
Muotoiltu tuloste:
Milloin JSX-muotoilija auttaa
Kun työskentelet Reactin, Next.js:n tai muiden JSX-pohjaisten kehysten kanssa, tämä muotoilija käsittelee JavaScriptin ja XML:n sekoituksen. Erinomainen komponenteille, hookeille ja JSX-malleille. Build-työkalut kuten webpack ja Vite käyttävät usein Babelia JSX:n muuntamiseen. Pelkkään JS:ään: JavaScript-muotoilija.
Usein kysytyt kysymykset
Onko datani yksityistä?
Kyllä. Muotoilu tapahtuu kokonaan selaimessasi. Mitään ei lähetetä palvelimelle.
JSX-muotoilija vs. JS-muotoilija?
JSX-muotoilija ymmärtää JSX-syntaksin (tunnisteet, propsit). JS-muotoilija on pelkälle JavaScriptille. Käytä JSX-muotoilijaa React-koodille.
Tukeeko TypeScript/TSX?
Se voi käsitellä TSX:ää joissain tapauksissa. TypeScript-painotteiseen muotoiluun tarkista tuloste.
Entä Vue-mallit?
Vue käyttää eri mallisyntaksia. Tämä työkalu on JSX/Reactille.