Linters & Formatters - YunusEmreCMD/blokTech GitHub Wiki

Linters

Linters geven warnings en error weer in je code, dit is echt enorm, maar ook echt enorm handig. Een aantal populaire Javascript linters zijn:

• JSLint . Zeer eigenwijs en gebaseerd op Douglas Crockford's Javascript: The Good Parts , het laat niet veel configuratie toe.
• JSHint . Wordt geladen met verstandige standaardinstellingen, maar biedt veel meer configuratie dan JSLint.
• ESLint . Een extreem configureerbare linter die ook JSX ondersteunt en scripts automatisch kan opmaken om te passen bij uw favoriete code-opmaakstijl.

Welke linter moet je gebruiken?

​ Dit is geheel subjectief, maar ik gebruik momenteel ESlint

JSLint is super gemakkelijk om gewoon te gebruiken, maar biedt niet genoeg maatwerk voor mijn behoeften. ESLint daarentegen biedt te super veel maatwerk, die doet erg veel voor je, dat vind ik erg handig. JSHint biedt hetzelfde als ESlint alleen vergt veel configuratie, ik hou van lekker makkelijk en simpel.

ESLint zorgt ervoor dat je op de hoogte bent van je fouten en geeft aan hoe je deze kunt oplossen. Je kunt in de .eslintrc bepaalde rules aanmaken, hierin kun je aangeven waar de ESLint wel en niet op moeten letten met het geven van feedback of warning/error op je code, super handig! Dit is een voorbeeld van een aantal rules die zijn opgesteld

{
  "extends": [
    "wesbos"
  ],
  "rules": {
    "no-console": 2,
    "prettier/prettier": [
      "error",
      {
        "trailingComma": "es6",
        "singleQuote": true,
        "printWidth": 120,
        "tabWidth": 8,
      }
    ]
  }
}

Voorbeeld van hoe errors eruit zien bij het gebruiken van ESlint

Voordelen van linters

Linters detecteren veelvoorkomende programmeerfouten en zorgen ze ervoor dat bepaalde best practices worden gevolgd. Door ze te gebruiken, kunne verwarrende taalfuncties van JavaScript vermijd worden.

Als gevolg hiervan bevat linted-code waarschijnlijk minder bugs.

Door deze eenvoudige fouten op te sporen voordat een handmatige codereview wordt uitgevoerd, wordt het herzien van de code ook effectiever, aangezien de recensent zich kan concentreren op complexere kwesties.

Formatters

Formatters zijn extensies die je code opmaken of opschonen als het ware, het klinkt vrij onbeduidend, maar het is echt super chill naar mijn mening. Formatters, bijvoorbeeld Prettier maakt je code overzichtelijker niet alleen voor jezelf maar ook voor anderen. Door Ctrl + Shift + P te doen wordt je hele document gecheckt op onnodige spaties, of verkeerd geplaatste elementen, quotes etc. Dit maakt het document beter leesbaar. Je kan ook instellen, dat wanneer je het document opslaat, dat dan automatisch Prettier wordt toegepast.

Wat ook cool is dat je deze extensie kan toepassen via je console, dat gaat op de volgende manier:

ESlint installeren: npm install eslint --save-dev

Document configureren: npx eslint --init

ESlint toepassen: npx eslint yourfile.js

Document opmaken(fixen): npx eslint yourfile.js --fix

Zie hier wat Prettier doet met de volgende regels code wanneer je prettier je document laat fixen.

function hoi (    naam   ){
var age=10;
}

let age=12  ;

var array = ['singleQuote',   "doubleQuote"   ];

Na de fix

function hoi (naam) {
   const age = 10;
}

const age = 12;

const array = ['singleQuote', 'doubleQuote'];

Extra spacing wordt weggehaald, quotes worden recht getrokken, alles is nu single-quotes en let verandert in const.

Omdat ESLint al een ingebouwde formatter heeft die het document opmaakt, hoef je hiernaast niet extra een extensie te installeren als “prettier”. Ik vind ESLint en Prettier persoonlijk echt een goede en handige extensie, het helpt je echt goed op weg en neemt bepaalde taken op zich en laat zien waar je fout zit.