En enkel hemmelighet å gjøre koden din automatisk mer lesbar

(Ryan Chong) (2. des. 2020)

Faner eller mellomrom?

Det er spørsmålet. Utviklere er enormt meningsfulle gjeng. Når tiden kommer for å bestemme seg for noe som virker trivielt som å bruke faner eller mellomrom, kan det raskt utvikle seg til flammekrig. Leiren min mot leiren din.

Men det er ikke det eneste utviklere krangler om. I gamle dager får vi ofte mange kommentarer om kodeformateringen vår under kodevurderingsprosessen.

For eksempel vil vi få kommentarer til:

  • Inkonsekvent fordypning
  • Inkonsekvent bruk av enkle og doble anførselstegn
  • Inkonsekvent innsetting av semikolon
  • Inkonsekvent bruk av faner vs mellomrom

Heldigvis, utviklere er også en svært effektiv folk. Det tok ikke lang tid før de bestemte seg for at det å bruke dager på å diskutere hvilken konvensjon som trumfer den andre ikke er den beste bruken av tid.

Og dermed kom de med en løsning: Kodeformaterer .

Slik fungerer det. Først definerer du en standardkonfigurasjon. Del deretter standardkonfigurasjonen med alle som jobber med det samme prosjektet. Kodeformaterer vil automatisk formatere koden din basert på den konfigurasjonen før den når kodelageret. Som et resultat vil alles kode være konsistent, uavhengig av opprinnelig formatering.

Det er mange smaker av kodeformatering, men til slutt dukker det opp en standard . Prettier blir av mange ansett som standarden i FE-utvikling. Jeg vil forklare hvordan det fungerer om et øyeblikk.

Men først, la oss snakke om å installere Prettier.

Installere Prettier

Hvis du ikke har det, gå til favorittkodeditoren din og installer utvidelsen. Vi bruker Visual Studio Code (VS Code). I VS Code klikker du ganske enkelt på utvidelsespanelet og søker etter «Prettier». Du vil se noe som ligner på skjermbildet nedenfor.

Sette opp vakrere konfigurasjon

Deretter må vi definere den vakrere konfigurasjonen. Dette er for å fortelle penere å formatere koden ved å bruke faner eller mellomrom, anførselstegn eller doble anførselstegn og så videre. Du finner den komplette listen over konfigurasjon her .

Vår vakrere konfigurasjon

Aktiver deretter javascript-formatering i VS-kodens settings.json og velg også når du skal formatere.

Våre innstillinger.json

Alternativt kan du også åpne GUI-versjonen (Preferanse> Åpne brukerinnstillinger) og veksle de aktuelle innstillingene manuelt.

Våre GUI-innstillinger

Slik fungerer vakrere

Tenk på eksemplet under. Det første skjermbildet viser et stykke javascript-kode i sin uformaterte versjon. Det er vanskelig å finne ut hvor koden starter og slutter.

Nå, med kodeformatering som Prettier, er alt vi trenger å gjøre å lagre den, og alt blir prettifisert pent slik:

formatert kode
Etter: Formatert kode

Sammendrag

Formatering av kode manuelt er ikke den beste bruken av tid. Sett deg til en standard, og implementer deretter den standarden som en konfigurasjon. Til slutt vil du ikke bruke ekstra tid på å kommentere kodeformatene i din neste kodegjennomgang.

TeamSpirit ansetter senior / junior programvareingeniører i Singapore. Hvis du er interessert i å samarbeide med vennlige kolleger som verdsetter forslagene dine og gir deg mye autonomi, kan du sende din CV til recruit.sg @ teamspirit.com