JavaScript formázása online
Illessz be egy tömörített .js fájlt, webpack-csomagot vagy egysoros kódrészletet, és a jobb oldali panelen máris megfelelően behúzott JavaScriptet kapsz. A Prettier közvetlenül a böngésződben végzi a formázást, feltöltés nélkül.
Miért válik olvashatatlanná a JavaScript?
A modern buildfolyamatok a közzététel előtt minifikálják a JavaScriptet. A Terser, esbuild, SWC és hasonló eszközök eltávolítják a szóközöket és megjegyzéseket, majd egybetűsre rövidítik a helyi változók és függvények nevét. Az egymásba ágyazott blokkokból összefűzött kifejezések lesznek, a teljes alkalmazás pedig egy-két fájlba kerül. Egy eredetileg háromszáz jól olvasható forrásfájlból álló React-alkalmazás néhány száz kilobájtos, egysoros csomagként érkezhet a böngészőbe. Továbbra is hibátlanul fut, de amikor el kellene olvasnod, szerkezet nélküli szövegfal fogad.
Mit ad vissza a formázás?
A csomag formázása visszahozza a kódban való eligazodást segítő elemeket. Az utasítások külön sorba kerülnek, így az első sor 24815. oszlopára mutató veremnyom helyett már tényleges kódrészleteket vizsgálhatsz. Látható lesz a beágyazás: hol kezdődik és végződik egy függvény, melyik ágat védi egy feltétel, és hogyan épül fel egy visszahívási lánc. A karakterláncok, URL-ek és végpontnevek is könnyen áttekinthetők. Egy külső szkript ellenőrzésekor gyakran éppen ezeket keresed, nem egy saját program hibáját.
A modern szintaxis is támogatott
A formázó a mai JavaScriptet értelmezi, nem egy évtizedekkel korábbi részhalmazt. A nyílfüggvények, osztályok, async és await, generátorok, opcionális láncolás, nullish coalescing, sablonliterálok, destrukturálás, spread szintaxis, dinamikus importok és ES-modulok egyaránt formázhatók. A JSX is támogatott, ami akkor fontos, ha olyan React-komponenst vizsgálsz, amelyből ezt még nem alakította át a fordítás. A munkát a Prettier végzi, ezért a kimenet ugyanazokat a megszokott szabályokat követi, amelyeket a szerkesztőd a saját fájljaidon alkalmaz.
Hol vannak a korlátok?
A formázás nem állítja vissza az elveszett forrást. A minifikáló törölte a megjegyzéseket és átnevezte a változókat; egyetlen formázó sem találhatja ki, hogy az n változó eredeti neve remainingRetries volt. Ha a projekt közzétett egy source map fájlt, azt töltsd be a böngésző fejlesztői eszközeibe, mert az eredeti kódhoz ez vezethet vissza. Ha pedig a fájlt szándékosan obfuszkálták, nem csupán minifikálták, akkor olvashatóbb szerkezetet kapsz, de a kód szándéka ettől még nem feltétlenül lesz világos.
Gyakori kérdések
Formázható webpack- vagy Vite-csomag?
Igen. Illeszd be a csomagot, vagy nyisd meg a Tallózás gombbal, és ugyanúgy formázza az eszköz, mint bármely más JavaScript-fájlt. A nagyobb csomagok néhány másodpercet igényelhetnek, mert a munka a saját gépeden történik. A behúzások után a modulok szerkezete is könnyebben követhető.
Megszünteti a JavaScript obfuszkálását?
Az obfuszkált kódot formázza, így jóval könnyebb lesz olvasni, de magát az obfuszkálást nem fordítja vissza. A kódolt karakterláncok, mesterséges vezérlési folyamatok és szándékosan beillesztett holt kódrészletek ugyanott maradnak.
Elronthatja a kódomat?
A formázó célja a JavaScript működésének megőrzése következetes stílus mellett. Az írásjelek, idézőjelek és elrendezés változhatnak, ezért a kimenet nem bájtról bájtra azonos másolat. Őrizd meg az eredetit, nézd át az eredményt, és éles használat előtt futtasd a projekt szokásos tesztjeit.