linters

Linters

Linters met elkaar vergelijken

Voordat ik een definitieve linter heb gekozen heb ik de twee populairste linters met elkaar vergeleken. Ik heb ze beoordeeld op een aantal criteria. De beoordelingen en criteria zijn terug te vinden in de tabel hieronder.

Linter	ESLint	JSHint
VS Code extensie downloads	14.417.681	1.864.010
Wekelijkse NPM installaties	18.176.261	513.061
Documentatie	Helder en Compleet	Compleet, maar vaag
Customization	Alle regels	Alle regels
Regels	Erg veel regels	Erg veel regels
Waarschuwingen	Duidelijke waarschuwingen	Minder duidelijke waarschuwingen

Uit dit kleine onderzoek heb ik een aantal conclusies getrokken:

• ESLint is verreweg de populairdere linter van de twee.
• De documentatie van ESLint is duidelijker en vooral makkelijker te navigeren.
• Naar mijn mening heeft ESLint een betere getting started guide dan JSHint.
• Beide linters hebben veel regels die naar je eigen wensen aangepast kunnen worden.
• ESLint heeft meer standaard configuraties simpelweg omdat hij populairder is. Denk hierbij bijvoorbeeld aan de populaire configuratie van AirBnB. Dit NPM pakketje heeft alleen al meer wekelijkse installaties dan JSHint.
• De waarschuwingen in de command line van ESLint geven het probleem beter weer dan de waarschuwingen van JSHint.

Mijn gekozen linter

Voor mijn JavaScript linter heb ik uiteindelijk gekozen voor ESLint. Uit mijn onderzoekje bleek dat deze linter beter was dan JSHint op een aantal vlakken, vandaar dat ik hiervoor heb gekozen. Ik heb ESLint als dev dependency geïnstalleerd in mijn project. Hierna heb ik de ESLint Visual Studio Code extensie geïnstalleerd waardoor ik live naar de waarschuwingen die ESLint geeft kan kijken. Ik heb ook een .eslintrc.js bestand aangemaakt waarin ik de settings van ESLint kan aanpassen. Ik heb echter tot nu toe nog geen settings aangepast in dit bestand.

Prettier

Ik heb voor mijn code formatter gekozen voor Prettier. Net als ESLint was Prettier online goed aangeschreven en erg populair. Prettier was verder ook goed te gebruiken in combinatie met ESLint. Hij wordt bijvoorbeeld ook gebruikt in de configuratie van AirBnB. Ik heb naderhand ook gerealiseerd dat prettier heel handig is bij het schrijven van markdown bestanden. Ik heb hem wederom als dev dependency en als extensie geïnstalleerd. Net als bij ESLint heb ik ook een .prettierrc bestand aangemaakt waar ik een aantal settings heb aangepast. Zo ziet mijn .pretterrc bestand er nu uit:

{
    "semi": true, // Deze setting zorgt er voor dat na elke regel een puntkomma wordt neergezet.
    "singleQuote": true, // Deze setting vervangt al de dubbele quotes naar enkele quotes.
    "trailingComma": "none", // Deze setting verwijdert onnodige komma's aan het einde van objecten.
    "arrowParens": "avoid" // Deze setting verwijdert de haakjes bij een arrow function die maar één parameter heeft.
}

Bronnen

• ESLint. (z.d.). Getting Started with ESLint. Geraadpleegd op 16 mei 2021, van https://eslint.org/docs/user-guide/getting-started
• JSHint. (z.d.). JSHint Documentation. JSHint. Geraadpleegd op 16 mei 2021, van https://jshint.com/docs/