linters - claudiobak/Backend GitHub Wiki

Linters

Lint of een linter, is een static code analysis tool die gebruikt wordt om fouten, errors, bugs of stylistische errors in je code zichtbaar te maken. De term komt origineel van een Unix Utility die C language source code inspecteerde (Wikipedia, 2022). Tegenwoordig zijn linters dan ook essentieel geworden voor developers om gemakkelijk het aantal errors in je code te verminderen en de algehele kwaliteit van je code te verbeteren doordat je sneller code errors kan vinden en oplossen.

Ik heb een aantal populaire linters opgezocht en met elkaar vergeleken. Zo heb je bijvoorbeeld:

JSHint

JSHint helpt net zoals de andere linters, de developers met het detecteren van potentiële bugs. JSHint is een linter speciaal voor Javascript, JSHint scant de source code en reporteerd vervolgens alle fouten in de code, errors en potentiële bugs.

image

ESLint

ESLint is een linter die speciaal gecreeërd is met de focus op het zelf instellen van de linting rules. De default rules zijn geschreven net als elke ander plugin. ESLint lijkt ook erg op JSHint, alleen is ESLint wat uitgebreider. Zo support ESLint 'right out of the box' bijvoorbeeld JSX syntax, terwijl JSHint deze functionaliteit niet heeft (Testim, 2020).

image

CSS Lint

CSS Lint is een linter die speciaal gericht is op CSS code. Deze linter voert basic syntax checking uit en hanteert een aantal regels binnen de code waarin de linter checkt op problematische patterns of inefficiëntie. De regels zijn allemaal pluggable, dus je kan gemakkelijk aanpassen welke regels er worden gehanteerd.

image

Formatters

Als formatter maakte ik voor dit ik aan dit project begon het meest gebruik van Beautify maar voor dit project heb ik ook Prettier geïnstalleerd. Met Prettier kun je namelijk ook andere talen formatten naast HTML en CSS, zoals Javascript en SCSS, en dat leek mij voor dit project een stuk efficiënter. Daarnaast heb ik ook gekeken naar welke van de twee voor het laatst geupdate is. Voor Prettier was de laatste update 5 dagen geleden, en voor Beautify was de laatste update 9 dagen geleden. Beide worden dus nog regelmatig geupdate en daarom ben ik gaan kijken welke het meest populair is. Prettier heeft 42.3k stars en 3.3k forks op hun Github pagina, terwijl Beautify 7.7k stars en 1.3k forks op hun Github pagina. Daarom heb ik er toch voor gekozen om Prettier te gebruiken omdat deze veruit het populairst is.

image

Mijn keuze

Ik heb uiteindelijk voor ESLint gekozen. Dit komt omdat ESLint 'out of the box' uitgebreider is dan JSHint. En het lijkt mij het verstandigst om voor de optie te gaan die het meest veelzijdig is. Daar naast heb ik ervoor gekozen om geen CSSLint te gebruiken omdat ik uberhaupt al automatisch mijn eigen specifieke rule-set hanteer met het schrijven van CSS. Het lijkt mij daarom overbodig om dan alsnog een CSS Linter te gebruiken.

image of Prettier and ESLint logo