Gjør JavaScript lesbart på nett
Lim inn en minifisert .js-fil, en webpack-pakke eller et kodeutdrag på én linje, og få JavaScript med riktige innrykk i panelet til høyre. Prettier formaterer koden i nettleseren din, uten at noe lastes opp.
Hvorfor JavaScript blir vanskelig å lese
Mange byggeprosesser for produksjon minifiserer JavaScript før publisering. Minifiseringsverktøy fjerner unødvendige mellomrom og kommentarer og kan forkorte navn eller skrive om uttrykk. Et eget pakketrinn kan samle moduler i større filer, slik at skriptet som leveres, skiller seg betydelig fra prosjektets kildefiler. Trinnene skal bevare oppførselen mens koden klargjøres for levering, men gjør manuell gjennomgang vanskeligere. Et prosjekt med mange lesbare moduler kan ende som noen få tettpakkede filer. Formatering synliggjør strukturen som fortsatt finnes i pakkene, uten å reversere endringene fra byggeprosessen.
Hva formateringen faktisk gir deg tilbake
Formatering av en programpakke legger til linjeskift, mellomrom og innrykk som gjør den gjenværende koden enklere å undersøke. Nøstede funksjoner og betingede forgreninger blir synlige, og strenger eller navn på endepunkter blir lettere å finne. De nye linjenumrene tilhører den formaterte kopien. Et stakkspor fra den minifiserte filen viser fortsatt til originalfilen. LFUnminify omregner ikke disse posisjonene og kobler dem ikke til kildekart. Bruk den formaterte visningen til å forstå logikken rundt et problem, og nettleserens feilsøker til å undersøke nøyaktige posisjoner under kjøring. En særpreget streng fra en feilmelding eller nettverksforespørsel er et nyttig utgangspunkt. Finn den i den formaterte kopien, og les betingelsene rundt den fremfor å anta at den nærmeste funksjonen forårsaket problemet. Genererte hjelpefunksjoner og omsluttende kjøretidskode blir værende i pakken etter formatering. Sammenligning med originalkilden, når den er tilgjengelig, gir en mer pålitelig forklaring enn innrykk alene.
Moderne syntaks støttes
Formatereren tolker moderne JavaScript, ikke bare et utvalg fra ti år tilbake. JavaScript-formatereren støtter pilfunksjoner, klasser, async og await, generatorer, valgfri kjeding, nullish coalescing, malstrenger, destrukturering, spread-syntaks, dynamisk import og ES-moduler. JSX støttes også, noe som er nyttig når du undersøker en React-komponent der kompileringen har beholdt JSX-syntaksen. Siden Prettier gjør arbeidet, følger resultatet konsekvente konvensjoner, selv om verktøyets innstillinger kan avvike fra konfigurasjonen i kodeeditoren din.
Hvor går grensene?
Formatering reverserer ikke endringene som ble gjort under byggingen. En variabel som heter n, forblir n, selv om det opprinnelige navnet var remainingRetries. Pakkede moduler blir i filen du oppgir, og slettede kommentarer kan ikke utledes pålitelig. Det opprinnelige kodelageret eller et kildekart kan hjelpe deg med å finne sammenhengen utenfor dette verktøyet. Bevisst obfuskert kode forblir obfuskert etter formatering. Kodede strenger, kunstige forgreninger og villedende navn kan fortsatt skjule betydningen. Bruk resultatet som hjelp til gjennomgang, og test eventuelle endringer i det faktiske prosjektet.
Ofte stilte spørsmål
Kan verktøyet formatere en webpack- eller Vite-pakke?
Ja, JavaScript-pakker med støttet syntaks kan formateres når du limer inn innholdet eller åpner en lokal fil. Resultatet beholder den pakkede koden og gjenskaper ikke separate kildemoduler. Store pakker kan gjøre nettleseren treg eller få den til å slutte å svare. Undersøk derfor en mindre, komplett del når det er mulig.
Fjerner verktøyet obfuskering i JavaScript?
Det kan formatere støttet JavaScript-syntaks i en obfuskert fil, men det opphever ikke obfuskeringen. Kodede strenger, kunstig kontrollflyt og bevisst villedende navn blir værende. Innrykk kan hjelpe deg å undersøke strukturene, men et lesbart oppsett alene fastslår ikke hva skriptet gjør, eller om det er til å stole på.
Kan formateringen ødelegge koden min?
Formatereren skal bevare oppførselen til JavaScript samtidig som den gir koden en konsekvent stil. Den kan endre tegnsetting, anførselstegn og oppsett, så resultatet er ikke en identisk kopi byte for byte. Behold originalen, gjennomgå resultatet og kjør prosjekttestene før du bruker en redigert eller formatert pakke i produksjon.