JavaScript beautify

Wanneer is het nuttig?

Om een geminimaliseerd script van een website te lezen, code te ordenen die je van een forum kopieerde, of te zien wat een bookmarklet echt doet. De beautifier voegt regeleinden en inspringing toe, en spaties rond operatoren, terwijl strings, template literals en reguliere expressies onaangeroerd blijven.

Opties

• Inspringen: 2 spaties, 4 spaties of een tab.
• Accolades: op dezelfde regel (if (a) {, de gebruikelijke JavaScript-stijl) of op een nieuwe regel.

Code lezen die je wilt begrijpen

Plak een geminimaliseerde bibliotheek, een bookmarklet of een inline script van een webpagina en je ziet één statement per regel met goede inspringing. Zo volg je makkelijk de logica en vind je de functie die je zoekt. Wees voorzichtig met code die je niet vertrouwt: lezen is veilig, maar voer hem niet uit in je console of op een site tenzij je begrijpt wat hij doet.

Grenzen van opmaak

Een beautifier kan niet herstellen wat een minifier heeft weggehaald. Variabelen die zijn ingekort tot a, b en c blijven zo, commentaar dat is gestript is weg en gebundelde code uit meerdere bestanden blijft één bestand. Heeft het geminimaliseerde bestand een sourcemap (een .map-bestand), dan kunnen de ontwikkelaarstools van je browser de oorspronkelijke namen tonen, wat beter is voor echt debuggen.

Stijlkeuzes

Accolades op dezelfde regel is de gangbare JavaScript-stijl; een nieuwe regel is de Allman-stijl die sommige teams gebruiken. Inspringgrootte is smaak: 2 spaties is gebruikelijk in JavaScript-projecten. Voor een team houdt een formatter als Prettier in je editor de stijl automatisch consistent.

Voor opmaak en stijlen zie je de HTML formatter en de CSS beautify. Werk je met data in plaats van code? De JSON formatter valideert terwijl hij opmaakt.