U kunt er bijna altijd van uitgaan dat een goed stuk tekst het resultaat is van goede bewerking. In dit opzicht is code niet anders dan proza. Een van de voordelen die we als ontwikkelaars en programmeurs genieten, is dat we editors, of code linters, kunnen inbouwen in onze workflows.

Linting is de handeling of het proces van het controleren van je code op fouten van welke aard dan ook. Er zijn veel gedachten over hoe de effectiviteit van een bepaald stuk code te optimaliseren. Maar controleren of het foutloos is en voldoet aan een bepaalde stijlgids is de basis. Soms is dit een kwestie van consistentie en leesbaarheid, soms is het een kwestie van de code echt te laten lopen.

Wanneer het aankomt op JavaScript linting, zijn er een handvol tools die zich onderscheiden. Laten we eens kijken naar vier linters die je kunnen helpen om te beginnen of om je linting proces te verfijnen: JSLint, standardJS, JSHint en ESLint.

JSLint

JSLint werd in 2002 ontwikkeld door Douglas Crockford, die ook een van de beste boeken over JavaScript heeft geschreven. JSLint brengt eenvoud en snelheid op tafel. Maar het is ook zeer eigenzinnig, wat een zegen of een vloek kan zijn.

JSLint bestaat uit een site van één pagina die wordt gedomineerd door een tekstveld waarin je je code kunt plakken. Klik op de knop ‘JSLint’ en alle fouten, stilistisch, syntactisch of anderszins, worden onder het tekstveld weergegeven. Onder het tekstveld is een kleine lijst met opties, configureerbaar door selectievakjes. Opties zijn onder andere het tolereren van extra witruimte, het gebruik van het ’this’ keyword (wat wordt ontmoedigd door Crockford in zijn voordrachten), en het opnemen van Node.js.

Als je je niet gebonden voelt aan een bepaalde stijlgids en je wilt een betrouwbare bron om je code te controleren, dan is JSLint een geweldige optie. Het is vooral effectief voor het testen van stukjes code of als je op zoek bent naar een manier om snel kleine projecten te linten – misschien een statische site van één pagina die slechts één JavaScript-bestand bevat.

standaardJS

Gebaseerd op GitHub-sterren, is standaardJS de populairste optie, met bijna 19.000 sterren. Het is volledig gebaseerd op meningen, wat betekent dat het helemaal niet aanpasbaar is. Maar, als je niet gebonden bent aan een bepaalde stijlgids kan dit een zegen zijn. Het wordt geleverd in de vorm van een Node CLI, en kan globaal of als een ontwikkelingsafhankelijkheid worden geïnstalleerd met behulp van je terminal of opdrachtregel naar keuze:

$ npm install standard --global// or$ npm install standard --save-dev

Omdat standardJS Node en npm als vereisten heeft, en omdat het wordt uitgevoerd vanaf de opdrachtregel of door een npm script, ligt de lat iets hoger dan het niveau van JSLint. Maar omdat het niet configureerbaar is, heb je verder niet veel om je zorgen over te maken. Je kunt het vanaf de commandoregel uitvoeren als een één-woord commando en het zal elk bestand met een .js extensie in je huidige werkdirectory controleren.

Alle fouten die het vindt zullen worden afgedrukt naar je terminal of commandoregel. U kunt uitvoer verwachten vergelijkbaar met dit voorbeeld uit de standaardJS documentatie:

$ standardError: Use JavaScript Standard Stylelib/torrent.js:950:11: Expected '===' and instead saw '=='.

Als u een bestand of map moet specificeren, kunt u het pad als argument opnemen en jokertekens gebruiken. Het accepteert ook jokertekens. In dit voorbeeld zoekt standardJS naar JavaScript-bestanden in de directory src en de submappen daarvan, en maakt deze lint:

$ standard "src/**/*.js" --fix

De vlag --fix na het bestandspad is de optie om fouten automatisch te herstellen als ze worden gevonden. Dit kan veel tijd besparen, maar het kan ook een goede leerschool zijn om de fouten zelf op te lossen.

Als u de conventies en regels die StandardJS gebruikt wilt verkennen voordat u beslist of u het wilt gebruiken, vindt u hier een volledige lijst. StandardJS is een goede optie voor wie op zoek is naar een snelle en betrouwbare manier om aan de slag te gaan met een JavaScript linter.

JSHint

JSHint begon als een vork van JSLint. Het doel was om een meer configureerbare linter te maken. Als je StandardJS hebt gebruikt, of een andere linter met een eigen mening, en je bent op zoek naar een manier om je eigen linting-regels aan te passen, dan is JSHint misschien iets voor jou. Het biedt de meeste voordelen van de eerder genoemde linters en dan nog wat.

Net als JSLint, heeft de JSHint homepage een tekstveld waar je code kunt plakken. Het Metrics-veld rechts van het tekstveld wordt in real time bijgewerkt terwijl u typt. Het toont een lijst met statistieken over uw code, zoals het aantal functies dat de code bevat. Natuurlijk toont het ook alle linting fouten die het vindt.

Als je niet van de copy/paste methodologie houdt en je wilt het in je project inbouwen, kan JSHint globaal worden geïnstalleerd of als een project afhankelijkheid met behulp van npm:

$ npm install jshint --global// or$ npm install jshint --save-dev

Eenmaal geïnstalleerd, zul je de CLI gebruiken om je code te lintten. Hier zijn twee voorbeeld commando’s die een enkel bestand en een directory controleren, respectievelijk:

$ jshint index.js// or$ jshint src/

In het eerste voorbeeld, zal JSHint het index.js bestand linten en in het tweede zal het recursief zoeken in de ‘src/’ directory en alle JavaScript bestanden linten die het vindt. JSHint zal alle fouten die het vindt in uw terminal afdrukken.

Als u niet geeft om maatwerk, kan JSHint worden gebruikt zoals beschreven in de bovenstaande voorbeelden en het zal prima werken. Maar vanaf hier kan de complexiteit aanzienlijk toenemen, omdat JSHint volledig configureerbaar is en het ook een API blootstelt, wat betekent dat het kan worden gebruikt als een JavaScript-module in je eigen JavaScript-bestanden.

Een aangepaste configuratie, die moet worden opgeslagen in een bestand met de naam .jshintrc, zou er als volgt uit kunnen zien:

{"esversion": 5,"eqeqeq": true,"strict": true}

Dit voorbeeld, van boven naar beneden, stelt de ECMAScript versie in op 5, vereist het gebruik van drie gelijkheidstekens ( === of !==) in plaats van twee (== of !=) bij het vergelijken van waarden, en dwingt een strikte modus af. U kunt uw eigen configuraties toevoegen door het pad naar uw .jshintrc bestand op te geven achter een -- config vlag op de opdrachtregel of door ze te declareren als het ‘jshintConfig’ attribuut in uw project package.json bestand. JSHint zal de standaard opties gebruiken voor alle regels die je niet aanpast.

De command line optie zou er zo uit kunnen zien:

// looks for '.jshintrc' in the current directory$ jshint --config './.jshintrc'

Terwijl de package.json optie er zo uit zou kunnen zien:

{ "jshintConfig": { "esversion": 5, "eqeqeq": true, "strict": true }}

Je kunt deze basis gebruiken om aan de slag te gaan met het aanpassen van je eigen linting regels met JSHint. Als u meer wilt weten, vindt u in de officiële documenten een uitgebreide beschrijving van het gebruik van de JSHint API en alle manieren waarop deze aan uw behoeften kan worden aangepast.

ESLint

GitHub-sterren daargelaten, als het gaat om het linten van JavaScript, is ESLint waarschijnlijk de linter die het meest in het wild is gezien en die voor veel mensen het meest geschikt zal zijn. In zijn eigen documentatie vergelijkt het zichzelf met JSLint en JSHint voor wat betreft de methodes die het gebruikt voor het parsen van JavaScript. En, net als bij JSHint, kunt u op uw gemak standaardinstellingen gebruiken en aanpassingen toevoegen als uw voorkeuren of behoeften veranderen.

Om met ESLint aan de slag te gaan, installeert u het globaal of als een dependency voor ontwikkeling:

$ npm install eslint --save-dev// or$ npm install eslint --global

Als u ESLint globaal installeert, zijn de configuraties van toepassing op alle projectbestanden waar u het tegen gebruikt. Maar als u verschillende configuraties wilt voor verschillende projecten, kunt u het installeren als een ontwikkelingsafhankelijkheid en voor elk project een ander configuratiebestand maken. Als ESLint is geïnstalleerd als projectafhankelijkheid, in plaats van als een algemeen bestand, dan moet het uitvoerbare bestand als volgt worden uitgevoerd vanuit de node_modules map:

$ ./node_modules/.bin/eslint --init

Als u het bovenstaande commando uitvoert, wordt u door een aantal vragen geleid bij het configureren van ESLint. (Opmerking: Ongeacht hoeveel u van plan bent om uw linting-regels aan te passen, u moet met deze stap beginnen omdat ESLint het .eslintrc-bestand nodig heeft dat door dit proces wordt gegenereerd voordat het uw code kan linten.)

De eerste vraag die u wordt gesteld is hoe u ESLint moet configureren. U heeft drie opties: gebruik een populaire stijlgids, beantwoord vragen over uw stijl, of laat ESLint zichzelf voor u configureren door uw bestanden te inspecteren om te beslissen hoe de regels moeten worden ingesteld. Als het vooruitzicht om het zelf te configureren intimiderend lijkt, dan kunt u terugvallen op het gebruik van een populaire stijlgids, ontwikkeld door een van een paar bekende organisaties.

Of welke weg u ook inslaat, ESLint zal uw antwoorden gebruiken om een bestand met de naam .eslintrc te genereren in de huidige werkdirectory. Dit is het bestand dat u zult aanpassen als u later wijzigingen wilt aanbrengen in de linting regels.

Hier volgt een voorbeeld .eslintrc bestand in JSON formaat dat de standaard Airbnb JavaScript stijlgids regels gebruikt en twee aangepaste regels bevat om de strikte modus uit te schakelen en console.log() statements toe te staan:

{ "extends": "airbnb-base", "rules": { "strict": "off", "no-console": "off" }}

Als u ervoor kiest om vragen over uw stijl te beantwoorden, zal het u vragen welke ECMAScript versie u gebruikt, of u tabs of spaties verkiest, puntkomma’s of niet, en of u JSX en/of React gebruikt. ESLint’s out-of-the-box ondersteuning voor React en aanvullende plugins zullen er waarschijnlijk voor zorgen dat het de beste keuze is voor React-ontwikkelaars. In ieder geval voor degenen die net beginnen met linting.

Nadat ESLint is geïnstalleerd en een .eslintrc-bestand is gegenereerd, kun je de CLI gebruiken om aan de slag te gaan met het linten van je code. ESLint zoekt standaard naar uw .eslintrc bestand, dus u hoeft geen configuraties op te geven op de commandoregel. Maar u kunt verschillende vlaggen gebruiken om te veranderen hoe ESLint zich gedraagt. In het onderstaande voorbeeld vertelt de -- quiet vlag ESLint om alleen fouten weer te geven, in plaats van zowel waarschuwingen als fouten. De --fix vlag vertelt ESLint om te proberen alle fouten die het vindt automatisch te herstellen.

// run eslint against file1.js$ ./node_modules/.bin/eslint file1.js// run eslint against file1.js and file2.js with flags to modify behavior$ ./node_modules/.bin/eslint file1.js file2.js --quiet --fix

Net als bij de andere CLIs die we hebben besproken, kunt u wild cards en bestandspaden gebruiken in plaats van specifieke bestandsnamen als dat nodig is. Hoewel ESLint zeer configureerbaar is, maakt het de leercurve gemakkelijk door een toegankelijke installatiegids te gebruiken voor de standaard configuratiemethode. Als u echt diep wilt graven met aanpassingen, bevat de officiële documentatie goede uitleg over alles wat u kunt doen met ESLint.