En enkel hemlighet för att göra din kod automatiskt mer läsbar

(Ryan Chong) (2 dec 2020)

Flikar eller mellanslag?

Det är frågan. Utvecklare är enormt meningsfulla gäng. När det är dags att besluta om något som verkar trivialt som att använda flikar eller mellanslag kan det alltså snabbt utvecklas till flamkrig. Mitt läger mot ditt läger.

Men det är inte det enda som utvecklare diskuterar. Förr i tiden får vi ofta många kommentarer om vår kodformatering under kodgranskningsprocessen.

Till exempel får vi kommentarer om:

  • Inkonsekvent indrag
  • Inkonsekvent användning av enkla och dubbla citat
  • Inkonsekvent insättning av semikolon
  • Inkonsekvent användning av flikar mot mellanslag

Tack och lov, utvecklare är också en mycket effektiv folk. Det tog inte lång tid innan de bestämde sig för att spendera dagar med att diskutera vilken konvention som trumf den andra inte är den bästa användningen av tiden.

Och därmed kom de fram till en lösning: Kodformaterare .

Så här fungerar det. Definiera först en standardkonfiguration. Dela sedan standardkonfigurationen med alla som arbetar med samma projekt. Kodformateraren formaterar automatiskt din kod baserat på den konfigurationen innan den når kodförvaret. Som ett resultat kommer allas kod att vara konsekvent, oavsett deras ursprungliga formatering.

Det finns många smaker av kodformaterare, men i slutändan kommer en standard fram. Prettier betraktas allmänt av många som standarden för FE-utveckling. Jag kommer att förklara hur det fungerar på ett ögonblick.

Men låt oss först prata om att installera Prettier.

Installera Prettier

Om du inte har det, gå till din favoritkodredigerare och installera tillägget. Vi använder Visual Studio-kod (VS-kod). I VS-kod klickar du helt enkelt på tilläggspanelen och söker efter “Vackrare”. Du kommer att se något liknande skärmdumpen nedan.

Konfigurera snyggare konfiguration

Därefter måste vi definiera den snyggare konfigurationen. Detta är för att säga snyggare att formatera koden med hjälp av flikar eller mellanslag, enkla citat eller dubbla citat och så vidare. Du hittar den fullständiga listan över konfigurationer här .

Vår snyggare konfiguration

I VS-kodens settings.json aktiverar du javascript-formaterare och välj också när du vill formatera.

Våra inställningar.json

Alternativt kan du också öppna GUI-versionen (Preferens> Öppna användarinställningar) och växla relevanta inställningar manuellt.

Våra GUI-inställningar

Hur snyggare fungerar

Tänk på exemplet Nedan. Den första skärmdumpen visar en bit javaskriptkod i sin opformerade version. Det är svårt att räkna ut var koden börjar och slutar.

Nu, med kodformaterare som Prettier, är allt vi behöver göra att spara den och allt kommer att bli prettifierad snyggt så:

formaterad kod
Efter: Formaterad kod

Sammanfattning

Att formatera koden manuellt är inte den bästa tiden. Satsa på en standard och implementera sedan den standarden som en konfiguration. Slutligen spenderar du inte extra tid på att kommentera kodformaten i din nästa kodgranskning.

TeamSpirit anställer senior / junior programvaruutvecklare i Singapore. Om du är intresserad av att arbeta med vänliga kollegor som värdesätter dina förslag och ger dig mycket självständighet, skicka ditt CV till recruit.sg @ teamspirit.com