JSX-formaterer
Formater og pynt JSX med syntaksutheving
Inndata
Formatert utdata
Hva er JSX-formatereren?
JSX er JavaScript med XML-lignende syntaks for React-komponenter. JSX-formatereren legger til innrykk og linjeskift i JSX/React-kode. React JSX-dokumentasjonen definerer syntaksen. Standard JavaScript-formaterere håndterer ikke alltid JSX korrekt.
Dette verktøyet kjører helt i nettleseren din. Ingenting sendes til en server. Lim inn JSX eller last opp en .jsx- eller .js-fil; få formatert utdata. For ren JavaScript, bruk JavaScript-formaterer. For validering, bruk JavaScript-validator. For TypeScript-konvertering, bruk JavaScript til TypeScript.
Slik bruker du verktøyet
Lim inn eller last opp
Lim inn JSX- eller React-kode i venstre panel eller last opp en .jsx- eller .js-fil. Bruk Eksempel for å laste eksempelkode. Tøm nullstiller.
Sjekk utdata
Høyre panel viser formatert JSX med riktig innrykk. Ugyldig JSX viser en feil.
Kopier eller last ned
Bruk Kopier eller Last ned for resultatet. For å kjøre kode, bruk JavaScript-konsoll. For minifisering, bruk JavaScript-minifiserer.
Eksempler på JSX-formatering
Her er et eksempel på formatering av minifisert JSX/React-kode.
Eksempel: abonnentkortkomponent
Minifisert JSX-inndata:
Formatert utdata:
Når JSX-formatereren hjelper
Når du arbeider med React, Next.js eller andre JSX-baserte rammeverk, håndterer denne formatereren blandingen av JavaScript og XML. Flott for komponenter, hooks og JSX-maler. Byggverktøy som webpack og Vite bruker ofte Babel til å transformere JSX. For ren JS, bruk JavaScript-formaterer.
Ofte stilte spørsmål
Er dataene mine private?
Ja. Formatering skjer helt i nettleseren din. Ingen data sendes til en server.
JSX-formaterer vs. JS-formaterer?
JSX-formatereren forstår JSX-syntaks (tagger, props). JS-formatereren er for ren JavaScript. Bruk JSX-formatereren for React-kode.
Støtter det TypeScript/TSX?
Den kan håndtere TSX i noen tilfeller. For TypeScript-fokusert formatering, sjekk utdata.
Hva med Vue-maler?
Vue bruker annen mal-syntaks. Dette verktøyet er for JSX/React.