JavaScript formázó: kód újratördelése és behúzása

A JavaScript-kód sokszor nehezen olvasható formában kerül elénk: egy weboldalba ágyazott szkript egyetlen hosszú sor, egy fórumról vagy chatből másolt kódrészletben szétcsúsztak a behúzások, vagy egy régi projektben mindenki másképp formázott. A JavaScript formázó (js formatter) egységes szerkezetbe tördeli a kódot, így könnyebb megérteni, hibát keresni benne, vagy továbbfejleszteni.

Az eszköz a kapcsos zárójelek mentén tördel és húz be: a { után új sort kezd és beljebb húz, a } elé új sort tesz és kijjebb húz. A pontosvesszővel lezárt utasítások külön sorba kerülnek, kivéve a zárójeleken belülieket, így a for (let i = 0; i < n; i++) fejléce egy sorban marad. Az else, catch és finally a záró kapcsos zárójellel egy sorba kerül.

A rövid objektumok és üres blokkok (például {}) egy sorban maradnak, a több egymást követő üres sort pedig egyetlen üres sorra vonja össze, így a kód tagolása megmarad, de nem lesz szellős.

A formázó nem értelmezi és nem futtatja a kódot, csak a szerkezetét rendezi. Ezért különösen ügyel arra, hogy semmi olyat ne változtasson meg, amitől a kód másképp működne:

• a szövegeket idézőjelben és aposztrófban, és a sablonszövegeket (`…${}…`) a bennük lévő pontosvesszőkkel és kapcsos zárójelekkel együtt,
• a megjegyzéseket (// és /* */),
• a reguláris kifejezéseket (például /a;b/g), amelyeket a környezetükből ismer fel,
• a meglévő sortöréseket: mivel a JavaScriptben a sortörés néha lezárja az utasítást (automatikus pontosvessző-beszúrás), a formázó nem vonja össze a sorokat, csak tördel és újra behúz.

A sorokon belüli szóközöket nem rendezi át, így az operátorok körüli térköz olyan marad, amilyen volt.

Bemenet:

function osszeg(a,b){if(a>b){return a-b;}else{return a+b}}

Formázva, két szóközös behúzással:

function osszeg(a,b) {
  if(a>b) {
    return a-b;
  } else {
    return a+b
  }
}

A behúzásból azonnal látszik, melyik utasítás melyik blokkba tartozik.

Ugyanez a kód tabulátoros vagy négy szóközös behúzással is kérhető.

Ez egy könnyű, telepítés nélküli formázó gyors feladatokhoz. Nem helyettesíti a fejlesztői környezetek teljes értékű formázóit (például a Prettiert), amelyek a kódot ténylegesen elemzik, egységesítik az idézőjeleket, a szóközöket és a sorhosszt, és a csapat szabályai szerint dolgoznak. Ha egy projekten rendszeresen dolgozol, azokat érdemes a szerkesztődbe építeni.

Nem ellenőrzi a kód helyességét sem: a hibás kódot is tördeli, és nem jelzi a szintaktikai hibákat. A minimalizált (minified) kód rövid változóneveit természetesen nem tudja visszaállítani, csak olvashatóbbá teszi a szerkezetét. Tömörítést (minify) nem végez, mert a JavaScript biztonságos tömörítéséhez a kód teljes elemzése kell.

Ha egy minimalizált könyvtárat vagy egy oldal forráskódját szeretnéd megérteni, a böngésző fejlesztői eszközeinek „Pretty print” ({}) gombja is hasonlót tesz, és a kódot közben futtatni, hibakeresni is lehet.

• Tanulóknak, akik egy példakódot szeretnének megérteni.
• Weboldal-szerkesztőknek, akik egy beágyazott követőkódot vagy widgetet kell, hogy átnézzenek, mielőtt beillesztik.
• Fejlesztőknek gyors feladatokhoz, amikor nincs kéznél a megszokott szerkesztő, például egy telefonon vagy egy idegen gépen.
• Ügyfélszolgálatoknak és tesztelőknek, akik egy hibát jelentő kódot olvasható formában szeretnének továbbítani.

A JSON-adatok formázására a JSON formázó, a stíluslapokéra a CSS formázó, a HTML-ére a HTML formázó a jobb választás.

Kódrészletek megosztásakor a formázott változatot érdemes kódblokkba tenni, hogy a behúzás megmaradjon: Markdownban három fordított aposztróf közé, e-mailben fix szélességű betűtípussal.

JavaScript-, TypeScript-, JSX- és JSON-fájlt közvetlenül is megnyithatsz, az eredményt pedig letöltheted. A formázás gépelés közben történik. Mivel a kódban kulcsok, belső címek vagy üzleti logika is lehet, fontos: minden a böngésződben történik, a kód nem kerül fel szerverre.