Voit melkein aina lyödä vetoa, että hyvä kirjoitus on hyötynyt hyvästä muokkauksesta. Tässä suhteessa koodi ei eroa proosasta. Yksi eduista, joista me kehittäjinä ja ohjelmoijina nautimme, ovat työtehtäviimme sisällytettävät editorit eli koodin linttaajat.

Linttaaminen on teko tai prosessi, jossa tarkistat koodisi kaikenlaisten virheiden varalta. On olemassa monia ajatuksia siitä, miten tietyn koodinpätkän tehokkuus voidaan optimoida. Mutta sen tarkistaminen, että se on virheetön ja noudattaa tiettyä tyyliohjetta, on peruslähtökohta. Joskus kyse on johdonmukaisuudesta ja luettavuudesta, joskus taas siitä, että koodi saadaan ylipäätään toimimaan.

Javaskriptin suomentamisessa on kourallinen työkaluja, jotka erottuvat muista. Tutustutaan neljään linting-työkaluun, jotka voivat auttaa sinua aloittamaan tai tarkentamaan linting-prosessia: JSLint, standardJS, JSHint ja ESLint.

JSLint

JSLintin loi vuonna 2002 Douglas Crockford, joka on myös kirjoittanut kiistatta yhden parhaista JavaScript-kirjoista. JSLint tuo mukanaan yksinkertaisuutta ja nopeutta. Mutta se on myös hyvin omapäinen, mikä voi olla siunaus tai kirous.

JSLint koostuu yhden sivun sivustosta, jota hallitsee tekstikenttä, johon voit liittää koodisi. Napsauta ’JSLint’-painiketta ja kaikki virheet, tyylilliset, syntaktiset tai muut, näytetään tekstikentän alla. Tekstikentän alla on pieni luettelo vaihtoehdoista, jotka voidaan määrittää valintaruuduilla. Vaihtoehtoja ovat muun muassa ylimääräisen välilyönnin sietäminen, ’this’-avainsanan käyttö (jota Crockford ei suosittele puheissaan) ja Node.js:n sisällyttäminen.

Jos et ole sitoutunut mihinkään tiettyyn tyylioppaaseen ja haluat luotettavan lähteen tarkistamaan koodisi puolestasi, JSLint on loistava vaihtoehto. Se on erityisen tehokas koodinpätkien testaamiseen tai jos etsit tapaa, jolla voit nopeasti linttailla pieniä projekteja – ehkäpä yhden sivun staattista sivustoa, joka sisältää vain yhden JavaScript-tiedoston.

standardJS

Riippumatta pelkästään GitHubin tähdistä, standardJS on suosituin vaihtoehto lähes 19 000 tähdellä. Se on täysin mielipiteellinen, eli sitä ei voi muokata lainkaan. Mutta jos et ole sidottu mihinkään tiettyyn tyylioppaaseen, tämä voi olla siunaus. Se tulee Node CLI:n muodossa, ja sen voi asentaa globaalisti tai kehitysriippuvuutena valitsemallasi terminaalilla tai komentorivillä:

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

Koska standardJS:llä on edellytyksenä Node ja npm, ja koska sitä ajetaan komentoriviltä tai npm-skriptillä, rima nousee hiukan korkeammalle kuin JSLintin tasolla. Mutta koska se ei ole konfiguroitavissa, sinulla ei ole paljon muuta huolehdittavaa. Voit ajaa sen komentoriviltä yhden sanan komentona, ja se tarkistaa jokaisen tiedoston, jolla on .js-pääte, nykyisessä työhakemistossasi.

Mahdolliset löytämänsä virheet tulostetaan päätelaitteeseen tai komentoriville. Voit odottaa näkeväsi samanlaisen tulosteen kuin tämä esimerkki standardJS-dokumentaatiosta:

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

Jos haluat määrittää tiedoston tai hakemiston, voit sisällyttää polun argumentiksi ja käyttää jokerimerkkejä. Se hyväksyy myös jokerimerkkejä. Tässä esimerkissä standardJS etsii ja linttaa kaikki JavaScript-tiedostot hakemistosta src ja sen alihakemistoista:

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

Tiedostopolun perässä oleva --fix-merkki on vaihtoehto, jolla virheet korjataan automaattisesti sitä mukaa, kun niitä löytyy. Tämä voi säästää paljon aikaa, mutta voi myös olla hyvä oppimistehtävä korjata virheet itse.

Jos haluat tutustua standardJS:n käyttämiin konventioihin ja sääntöihin ennen kuin päätät, haluatko käyttää standardJS:ää, täydellinen luettelo löytyy täältä. StandardJS on hyvä vaihtoehto niille, jotka etsivät nopeaa ja luotettavaa tapaa päästä alkuun JavaScript-linterin kanssa.

JSHint

JSHint alkoi JSLintin haarautumisena. Tavoitteena oli tehdä konfiguroitavampi linteri. Jos olet käyttänyt standardJS:ää tai jotain muuta mielipidekeskeistä linteriä ja etsit tapaa alkaa muokata omia linting-sääntöjäsi, JSHint saattaa olla sinua varten. Siinä on suurin osa edellä mainittujen linttereiden eduista ja vähän enemmänkin.

JSLintin tavoin JSHintin etusivulla on tekstikenttä, johon voit liittää koodia. Metrics Tekstikentän oikealla puolella oleva Metrics-kenttä päivittyy reaaliaikaisesti kirjoittaessasi, ja se laskee juoksevaa tilastoluetteloa koodistasi, esimerkiksi sen sisältämien funktioiden lukumäärän. Tietenkin se näyttää myös kaikki löytämänsä linttausvirheet.

Jos et pidä kopioi/liitä -menetelmästä ja haluat leipoa sen osaksi projektiasi, JSHint voidaan asentaa globaalisti tai projektin riippuvuutena npm:n avulla:

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

Asennuksen jälkeen käytät CLI:tä koodisi linttaamiseen. Seuraavassa on kaksi esimerkkikomentoa, jotka tarkistavat vastaavasti yhden tiedoston ja hakemiston:

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

Ensimmäisessä esimerkissä JSHint linttaa tiedoston index.js ja toisessa se etsii rekursiivisesti hakemistosta ’src/’ ja linttaa kaikki löytämänsä JavaScript-tiedostot. JSHint tulostaa kaikki löytämänsä virheet päätelaitteeseen.

Jos et välitä räätälöinnistä, JSHintia voi käyttää yllä olevissa esimerkeissä kuvatulla tavalla ja se toimii aivan hyvin. Mutta tästä eteenpäin monimutkaisuus voi kasvaa huomattavasti, koska JSHint on täysin konfiguroitavissa ja se myös paljastaa API:n, mikä tarkoittaa, että sitä voidaan käyttää JavaScript-moduulina omissa JavaScript-tiedostoissasi.

Kustomoitu konfiguraatio, joka tulisi tallentaa tiedostoon nimeltä .jshintrc, tiedosto voisi näyttää tältä:

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

Tämä esimerkki, ylhäältä alaspäin, asettaa ECMAScriptin versioksi 5, vaatii kolmen yhtäsuuruusmerkin käyttöä ( === tai !==) kahden (== tai !=) sijaan (== tai !=) arvoja verrattaessa ja pakottaa noudattamaan tiukkoja sääntöjä. Voit sisällyttää mukautetut konfiguraatiot määrittelemällä .jshintrc-tiedoston polun -- config-lippukkeen takana komentorivillä tai ilmoittamalla ne ’jshintConfig’-attribuutilla projektisi package.json-tiedostossa. JSHint käyttää oletusasetuksiaan kaikkiin sääntöihin, joita et muokkaa.

Komentorivin asetus voi näyttää tältä:

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

Vaikka package.json-asetus voi näyttää tältä:

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

Voit käyttää näitä perusasioita päästäksesi alkuun omien linting-sääntöjesi muokkaamisessa JSHintin avulla. Jos etsit lisää, virallisissa dokumenteissa on kattava kuvaus JSHintin API:n käytöstä ja kaikista tavoista, joilla sitä voi muokata tarpeisiisi sopivaksi.

ESLint

GitHub-tähtiä lukuunottamatta, kun kyse on JavaScriptin linttauksesta, ESLint on luultavasti linteri, jota on nähty eniten luonnossa, ja se tulee olemaan valinta monille ihmisille. Omassa dokumentaatiossaan se vertaa itseään JSLinttiin ja JSHinttiin niiden menetelmien osalta, joita se käyttää JavaScriptin jäsentämiseen. JSHintin tapaan voit helpottaa käyttöä käyttämällä oletusasetuksia ja lisätä mukautuksia, kun mieltymyksesi tai tarpeesi muuttuvat.

Jos haluat aloittaa ESLintin käytön, asenna se globaalisti tai kehitystyön riippuvuussuhteena:

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

Jos asennat ESLintin globaalisti, sen konfiguraatiot pätevät kaikkiin projektitiedostoihin, joita vastaan käytät sitä. Mutta jos haluat erilaisia konfiguraatioita eri projekteille, voit asentaa sen kehitysriippuvuutena ja luoda eri konfiguraatiotiedoston kullekin projektille. Huomaa, että jos ESLint on asennettu projektiriippuvuutena eikä globaalisti, sinun on ajettava suoritettava suoritusohjelma node_modules-kansiosta seuraavasti:

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

Kun suoritat yllä olevan komennon, sinua opastetaan ESLintin konfiguroinnissa kysymysten avulla. (Huomautus: Riippumatta siitä, kuinka paljon aiot muokata linting-sääntöjäsi, sinun on aloitettava tästä vaiheesta, koska ESLint tarvitsee .eslintrc-tiedoston, joka syntyy tämän prosessin tuloksena, ennen kuin se voi linttailla koodisi.)

Ensimmäinen kysymys, joka sinulta kysytään, on ESLintin määrittäminen. Sinulla on kolme vaihtoehtoa: voit käyttää suosittua tyyliopasta, vastata tyyliäsi koskeviin kysymyksiin tai antaa ESLintin konfiguroida itsensä puolestasi tarkastelemalla tiedostojasi päättääkseen, miten säännöt asetetaan. Jos mahdollisuus konfiguroida se itse heti alkuunsa tuntuu pelottavalta, voit turvautua suosittuun tyylioppaaseen, jonka on kehittänyt jokin harvoista tunnetuista organisaatioista.

Kävitpä sitten mitä polkua tahansa, ESLint käyttää vastauksiasi luodakseen nykyiseen työhakemistoon tiedoston nimeltä .eslintrc. Tätä tiedostoa muokkaat, jos haluat myöhemmin tehdä muutoksia linting-sääntöihin.

Tässä on esimerkki .eslintrc-tiedostosta JSON-muodossa, joka käyttää Airbnb:n JavaScript-tyylioppaan oletussääntöjä ja sisältää kaksi mukautettua sääntöä, joilla kytketään pois käytöstä strict-tila ja sallitaan console.log()-lausekkeet:

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

Jos päätät vastata tyyliäsi koskeviin kysymyksiin, se kysyy muun muassa, mitä ECMAScript-versiota käytät, pidätkö mieluummin tabulaattoreista vai välilyönneistä, puolipisteistä vai ei, ja käytätkö JSX:ää ja/tai Reactia. ESLintin valmis tuki Reactille ja täydentävät lisäosat tekevät siitä todennäköisesti parhaan valinnan React-kehittäjille. Ainakin niille, jotka vasta aloittavat linttauksen.

Kun ESLint on asennettu ja .eslintrctiedosto on luotu, voit käyttää CLI:tä aloittaaksesi koodisi linttauksen. ESLint etsii .eslintrc-tiedoston oletusarvoisesti, joten sinun ei tarvitse määrittää mitään asetuksia komentorivillä. Voit kuitenkin käyttää erilaisia lipukkeita muuttaaksesi ESLintin käyttäytymistä. Alla olevassa esimerkissä -- quiet-lippu määrää ESLintin näyttämään vain virheet eikä sekä varoituksia että virheitä. Lippu --fix käskee sitä yrittämään korjata automaattisesti kaikki löytämänsä virheet.

// 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

Kuten muissakin käsittelemissämme CLI:issä, voit tarvittaessa käyttää jokerimerkkejä ja tiedostopolkuja tiettyjen tiedostonimien sijasta. Vaikka ESLint on hyvin konfiguroitavissa, se helpottaa oppimista käyttämällä lähestyttävää asennusopasta oletuskonfigurointimenetelmänä. Jos haluat todella syventyä mukautuksiin, virallinen dokumentaatio sisältää loistavat selitykset kaikesta, mitä ESLintillä voi tehdä.