Navigera i webbdjungeln: Lintning och formatering

Det finns ett antal verktyg som inte egentligen krävs, men som markant förbättrar kvaliteten på koden man skriver. Här går vi igenom två kategorier av verktyg som hjälper en att följa en konsekvent kodstil: lintning och formatering.

Lintning

Ordet "lint" kommer från engelskan och betyder "ludd" på kläder eller liknande, vilket ju är extra fluff som man inte vill ha. Inom programmering har lintning kommit att betyda:

statisk kontroll av källkod för att detektera stil- eller programmeringsfel

Ett lintverktyg hjälper alltså till att hitta småfel i din kod, som kompilatorn normalt inte bryr sig om. Exempel på sådant som ett lintverktyg kan ge varningar om i Javascript:

• Oväntad indentering
• Oanvänd variabel
• Använd tre likhetstecken === istället för två ==
• Undvik funktionen alert

Ett lintverktyg kan integreras direkt i editorn, som ett byggsteg, som ett terminalprogram eller någon kombination av dessa. Det finns plugin för dom vanligaste lintverktygen till dom flesta editorerna, och i sin dokumentation ger dom normalt instruktioner för hur man kan integrera dom i sitt byggverktyg. Här är några av dom populäraste lintverktygen för webbspråk år 2019:

Ytterligare alternativ som har varit stora men som nog har sett sina bästa dagar: JSLint och JSHint för Javascript; TSLint för Typescript; och CSS Lint för CSS.

Formatering

Historiskt har det funnits ett flertal verktyg för formatering av Javascript, HTML, CSS, JSON, men det överlägset bästa för alla webbspråk idag är Prettier. Verktyget fixar indentering och whitespace, delar upp långa rader, kombinerar korta rader, lägger till semikolon, tar bort onödiga parenteser och mycket mer. Prettier är ganska magiskt när man först börjar använda det.

Precis som med lintverktygen, så kan man välja att använda Prettier i sin editor via ett plugin, som ett byggsteg eller som ett terminalprogram. Prettier använder mycket få konfigurationsparametrar, just för att vi utvecklare ska få slippa stildiskussioner. Dom enda som man kan behöva justera är 1) indentering med tabb/mellanslag, 2) strängar med " eller ', och 3) radlängd, men också i dessa fall är det ofta en bra idé att använda standardinställningarna. Dom är helt enkelt riktigt bra - jag kan i princip aldrig komma på ett bättre sätt att formatera koden än det Prettier gör automatiskt. Nedan följer ett exempel.

Före:

function randomMacAddress() {

  const num = Math.floor (Math.random()*0xFFFFFF).toString(16)
  .toLowerCase().padStart(6, "0")
  // Prepend every two chars with a colon
  	.replace(/../g, ":$&")
  	  .substr(1)

  return(num);

}

Efter:

function randomMacAddress() {
  const num = Math.floor(Math.random() * 0xffffff)
    .toString(16)
    .toLowerCase()
    .padStart(6, "0")
    // Prepend every two chars with a colon
    .replace(/../g, ":$&")
    .substr(1);

  return num;
}

(Den här bloggen skrivs med Markdown, och i exemplet "Före" här ovanför måste jag explicit avaktivera Prettier. Prettier kan nämligen formatera Markdown och Javascriptkod inuti Markdown.)