Verbeter je Javascript met ESLint

eslint-logoTijdens het ontwikkelen van een website schrijf je code in verschillende talen. Het backend deel gaat bij ons met PHP, terwijl je voor de frontend in HTML, CSS en Javascript werkt. Al die verschillende talen zorgen ervoor dat je nog wel eens een syntax foutje maakt. In PHP wordt dat direct afgestraft met een foutmelding, maar Javascript vergeeft je veel fouten. Dat wil niet zeggen dat alles correct geïnterpreteerd wordt! Het vergeten van een simpele ; kan grote gevolgen hebben. Daarom is het verstandig om gebruik te maken van linting tools. Een linting tool checkt je code op syntax fouten en logische fouten. Zijn er variabelen die niet correct zijn gedefinieerd of niet worden gebruikt, dan krijg je dat ook te horen.

Er zijn een aantal linting tools in omloop, elk met hun eigen voors en tegens. Van de week heb ik me eens verdiept in linting tools en ben begonnen met ESLint. In deze blog beschrijf ik de installatie en de configuratie van ESLint.

ESLint installeren

node-logoESLint is eenvoudig te installeren via npm. npm is een heel handige ‘package manager’, die gebundeld mee komt bij een installatie van node.

 

npm-logoNode is zo geinstalleerd via de officiele Downloadpagina van node. Het pkg pakketje voor de Mac installeren was slechts een fluitje van een cent.

Dus npm was ook direct geinstalleerd. Maar omdat npm vaker wordt geupdate dan node zelf, was het van belang om npm nog even up to date te brengen. Dat gaat zo vanaf de command line:

sudo npm install npm -g

Het sudo commando wordt hier gebruikt omdat je deze installatie als super user moet doen. Goed, dan kunnen we nu ESLint installeren. Zoals zoveel pakketten die je installeert met npm leek het logische commando:

npm install -g eslint

Maar dat werkte niet omdat je ook dit commando als super user moest ingeven. Dus:

sudo npm install -g eslint

Dit werkte goed en eslint was geinstalleerd!

ESLint configureren

Vorige week had ik een laatste stuk Javascript geschreven voor onze nieuwe website. Vol goede moed draaide ik het programma met

eslint main.js

en ja hoor, een daverende 150 fouten kwamen aan het licht. Het was op dat moment dat ik dacht aan wat ik gelezen had op de ESLint site: ‘it is fully configurable’. En ja, de out of the box configuratie hoeft natuurlijk helemaal niet bij mijn coding style te passen.

Het werd dus tijd om ESLint te configureren. Dat kan op verschillende manieren. Een mogelijkheid is om je JS code te voorzien van comments die door ESLint worden gelezen. Maar dit vind ik niet zo netjes staan. Een andere manier is om een configuratie bestand te gebruiken. Dit kan in JSON geschreven worden of in YAML, maar het komt uiteindelijk allemaal op hetzelfde neer. Ik heb gekozen om een .eslintrc bestand aan te maken en daar mijn configuratie in te zetten.

Ik heb de configuratie gedaan op grond van de foutmeldingen in het stukje sample code. Mijn manier is om per foutmelding te kijken wat de ESLint rule precies inhoudt en dan te beslissen of ik de rule aan of uitzet en als hij aan mag blijven welke modus ik dan gebruik. Zo kwam ik tot onderstaande .eslintrc

eslintrc

Het eerste blokje bestaat uit de rules. Zoals reeds aangegeven kun je ze aan (=1) en uit (=0) zetten. Je kunt dus zien dat de regel no-console uitstaat. Deze regel laat namelijk niet toe dat je console.log statements gebruikt. Omdat dit een stukje test JS is, wil ik die wel toelaten. De regel moet dus uitstaan. Overigens zie je geen rules expliciet aanstaan omdat dat de default is. Alle regels staan dus aan, behalve diegene die ik aangepast wilde hebben. Voor het gebruik van de modus is er een strikt format. Je zet de waarde 2 tussen rechte haken en erachter zet je de modus van de regel. Zo gebruik ik altijd enkele quotes voor strings (in plaats van dubbele quotes of backticks) en mogen er geen trailing spaces op code regels staan, maar mogen volledige witregels wel. Dat vind ik fijn voor de leesbaarheid.

Globale variabelen en runtime environment

Omdat Javascript tegenwoordig in zowel de browser als op de server gedraaid kan worden, is het van belang om ESLint te vertellen in welk environment je je bevindt. Ik gebruik ESLint voor Javascript die in de browser draait en dus kies ik voor

browser: 1

In de browser zijn vervolgens bepaalde globale variabelen automatisch bekend (e.g., window, console), maar omdat ik ook met jQuery werk, moet je die zelf toevoegen als global via het blokje globals in de rc file.


Mijn Twitter profiel Mijn Facebook profiel
Pim Hooghiemstra Webdeveloper and founder of PLint-sites. Loves to build complex webapplications using Vue and Laravel! Laatste bericht
Sorting table dates in a Vue CLI project

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *