4.1 Linters
Een linter is een een tool die je kan helpen met het debuggen van je code. Een linter scant door je script heen om algemene bugs en errors op te sporen, en geeft je vervolgens feedback met regelnummers waar een mogelijke fout zit die je op kan proberen te lossen.
In aanvulling op het opsporen van bugs en errors, kunnen linters ook controleren op subjectieve, en stilistische preferenties. Denk bijvoorbeeld aan het controleren of er een spatie zit tussen het functie keyword en de haakjes, of het controleren of al je regels code wel met een punt comma eindigen.
Om te kijken welke linter het voor mij het meest waardevol is om te gebruiken tijdens het uitwerken van mijn feature heb ik research gedaan naar de volgende linters:
- Stylelint - CSS
- JSLint - Javascript
- JSHint - Javascript
- ESLint - Javascript
Stylelint helpt bij het voorkomen van errors in CSS, SCSS en andere syntaxes die geparsed kunnen worden door PostCSS. Stylelint kan op honderden regels testen, je kan zelf kiezen welke regels je aan wil zetten door een configuration file aan te maken.
Als je geen zin hebt om een configuration file te maken, kan je ook een "pre-written" configuration file gebruiken. Dit is een standaard configuration file met ongeveer 60 Stylelint regels. Stylelint is een best flexibele linter, hij is uit te breiden met extra plugins, en kan op 3 verschillende manieren gebruikt worden: Als command line tool, als Node.js module, of als PostCSS module
- Meer dan 150 regels die errors en stilistische fouten kunnen herkennen
- Bied support voor nieuwste CSS syntax
- Kan omgaan met CSS-like syntaxes
- Deelbare config files
- Lost sommige stilistische fouten automatisch op
- Herkent geen ongebruikte code
JSLint is 2002 gecreëerd door Douglas Crockford om ondersteuning te bieden aan wat hij de goede delen van Javascript vindt.
JSLint kan niet geconfigureerd worden door de gebruiker. Veel features kunnen helemaal niet worden uitgezet, en sommige features hebben weinig tot geen goede documentatie. De website van JSLint is niet heel behulpzaam, er is bijvoorbeeld geen duidelijke uitleg over hoe je deze linter in je editor integreerd.
- Out of the box geconfigureerd, en klaar voor gebruik
- Geen configuration file, dus configureren kan moeilijk zijn
- Beperkt aantal configuratie opties, veel regels kunnen niet worden uitgezet
- Je kan geen eigen regels toevoegen
- Slechte documentatie
- Moeilijk te zien welke regel een error veroorzaakt
JSHint is een configureerbare versie JSLint. Je kan elke regel configureren, en ze in een configuration file zetten. Dit maakt JSHint makkelijk te gebruiken in grotere projecten. JSHint biedt ook een duidelijke documentatie over wat elke regel doet, ook is JSHint makkelijk te integreren in je editor.
Het enige nadeel aan JSHint is dat er een kleine setup nodig is om het nuttig te maken, dit komt door de zogenaamde "relaxed" default setting. Het is ook moeilijker te weten te komen welke regels je moet veranderen om bepaalde errors aan- of uit te zetten.
- Meeste instellingen kunnen geconfigureerd worden
- Bied support voor configuration files, wat het makkelijk maakt te gebruiken bij grote projecten
- Bied out the box support aan veel libraries zoals: Jquery, NodeJS, Mocha etc.
- ES6 support
- Moeilijk te weten te komen welke regel een error veroorzaakt
- twee opties: enforcing en relaxing(kan gebruikt worden om JSHint strenger te maken, of juist om waarschuwingen te onderdrukken)
- Geen support voor eigen regels
ESLint is ontworpen om makkelijker uit te kunnen breiden, het is mogelijk veel eigen regels toe te voegen, en is makkelijk te installeren. Deze linter geeft beknopte outputs, maar laat standaard de regel waar een error of bug gevonden is zien waardoor je altijd weet welke regel(s) de error(s) veroorzaken.
De documentatie van ESLint is opzich goed. De lijst met regels is makkelijk te volgen en in logische categorieën gegroepeerd, maar de instructies tot configuratie kunnen soms verwarrend zijn. Ze bieden wel links aan naar hoe ESLint te integreren is in je editor, verschillende plugins, en verschillende voorbeelden.
- Erg flexibel: regels kunnen aan en uit worden gezet, veel regels hebben ook extra instellingen die ook verder te configureren zijn
- De output is niet moeilijk te begrijpen
- Bied veel regels die niet beschikbaar zijn in andere linters
- Bied ES6 en JSX support
- Voor gebruik is er wat configuratie nodig
- Kan soms langzaam zijn
Ik heb besloten de volgende linters te implementeren in mijn project:
- Stylelint
- JSHint
Ik heb voor er voor gekozen ESLint te gebruiken. Ik kwam erachter dat ESLint en JSHint beiden wat configuratie nodig hebben voor gebruik, de errors die JSHint geeft zijn niet altijd even duidelijk. Ik vond dit bij ESLint een stuk duidelijker. Ook is er erg veel ruimte voor configuratie in ESLint, ik vind de instructies niet altijd even duidelijk maar de documentatie is opzich goed en ze geven veel links naar voorbeelden.
Ik heb voor stylelint gekozen omdat ik verder nog geen extensie had voor het vinden van bugs en errors in mijn css bestand. Wat ik fijn vind aan Stylelint is dat ook hier de documentatie erg goed is, op de websites geven zij goed aan hoe je bepaalde regels aan- of uit kunt zetten. Wat ik ook fijn vindt is dat je niet perse zelf een config file hoeft te schrijven, verder bied Stylelint support voor de nieuwste CSS syntax, en lost hij sommige stilistische fouten automatisch op.