Gør minificeret JavaScript læsbart online
Indsæt en minificeret .js-fil, en webpack-pakke eller et kodestykke på én linje, og få korrekt indrykket JavaScript i højre panel. Prettier formaterer direkte i din browser, uden at noget bliver uploadet.
Hvorfor JavaScript bliver ulæseligt
Moderne byggeprocesser minificerer JavaScript, før det udgives. Terser, esbuild, SWC og lignende værktøjer fjerner mellemrum og kommentarer, erstatter lokale variabel- og funktionsnavne med enkelte bogstaver, samler indlejrede blokke i kædede udtryk og pakker hele applikationen i én eller to filer. En React-app, der begyndte som tre hundrede læsbare kildefiler, ankommer til browseren som én linje på flere hundrede kilobyte. Koden kører stadig fint, men så snart du vil læse den, møder du en massiv tekstmur uden synlig struktur.
Det får du tilbage med formatering
Formatering genskaber det, der gør en kodepakke nem at navigere i. Instruktioner får hver deres linje, så et stakspor med linje 1, kolonne 24815 kan undersøges i en læsbar fil. Indlejringen bliver synlig, så du kan se, hvor en funktion begynder og slutter, hvilken gren en betingelse styrer, og hvordan en kæde af callbacks hænger sammen. Strenge, URL'er og endpointnavne bliver nemme at finde, hvilket ofte er formålet med at undersøge et eksternt script.
Moderne syntaks understøttes
Formatteren læser moderne JavaScript og er ikke begrænset til gammel syntaks. Pilefunktioner, klasser, async og await, generatorer, optional chaining, nullish coalescing, template literals, destrukturering, spread-syntaks, dynamiske imports og ES-moduler formateres korrekt. JSX understøttes også, hvilket er nyttigt ved React-komponenter, hvor denne syntaks stadig findes i filen. Da Prettier udfører arbejdet, følger resultatet de samme konventioner, som din editor allerede anvender på dine egne filer.
Værktøjets begrænsninger
At gøre minificeret kode læsbar genskaber ikke hele udviklingshistorien. Minificeringen har slettet kommentarerne og omdøbt variablerne. Ingen formatter kan gætte, at en variabel kaldet n tidligere hed remainingRetries. Hvis projektet har udgivet et source map, bør du indlæse det i browserens udviklerværktøjer, da det er den eneste vej til originalen. Er filen bevidst obfuskeret, får du en læsbar struktur, men hensigten med koden kan stadig være skjult.
Ofte stillede spørgsmål
Kan værktøjet formatere en webpack- eller Vite-pakke?
Ja. Indsæt pakken, eller åbn filen med Vælg fil, så bliver den formateret som enhver anden JavaScript-fil. Store pakker kan tage nogle sekunder, fordi arbejdet sker på din egen computer. Modulstrukturen bliver lettere at se, når koden er indrykket.
Fjerner det obfuskering af JavaScript?
Det formaterer obfuskeret kode, så den bliver væsentligt lettere at læse, men ophæver ikke selve obfuskeringen. Kodede strenge, kunstigt kontrolflow og død kode indsat med vilje bliver stående.
Kan formatering ødelægge min kode?
Formatteren søger at bevare JavaScripts opførsel, mens den anvender en ensartet stil. Tegnsætning, anførselstegn og layout kan ændres, så resultatet er ikke en identisk kopi. Gem originalen, gennemgå resultatet, og kør projektets tests, før en redigeret eller formateret pakke tages i produktion.