Téměř vždy se můžete vsadit, že dobré dílo prošlo dobrou úpravou. V tomto ohledu se kód neliší od prózy. Jednou z výhod, které jako vývojáři a programátoři využíváme, jsou editory neboli lintery kódu, které lze zabudovat do našich pracovních postupů.

Lintování je činnost nebo proces kontroly kódu na chyby jakéhokoli druhu. Existuje mnoho úvah o tom, jak optimalizovat účinnost daného kusu kódu. Základem je však kontrola, zda neobsahuje chyby a dodržuje určitou stylovou příručku. Někdy jde o konzistenci a čitelnost, jindy o to, aby kód vůbec běžel.

Pokud jde o lintování JavaScriptu, existuje hrstka nástrojů, které vynikají. Podívejme se na čtyři lintovací nástroje, které vám mohou pomoci začít nebo zdokonalit proces lintování: JSLint, standardJS, JSHint a ESLint.

JSLint

JSLint vytvořil v roce 2002 Douglas Crockford, který také napsal pravděpodobně jednu z nejlepších knih o JavaScriptu. JSLint přináší jednoduchost a rychlost. Je však také velmi názorově vyhraněný, což může být požehnáním nebo prokletím.

JSLint se skládá z jediné stránky, které dominuje textové pole, kam můžete vložit svůj kód. Po kliknutí na tlačítko ‚JSLint‘ se pod textovým polem zobrazí všechny chyby, ať už stylistické, syntaktické nebo jiné. Pod textovým polem se nachází malý seznam možností, které lze konfigurovat pomocí zaškrtávacích políček. Mezi možnosti patří tolerování nadbytečných bílých znaků, používání klíčového slova ‚this‘ (které Crockford ve svých přednáškách nedoporučuje) a zahrnutí Node.js.

Pokud nejste vázáni žádnou konkrétní stylistickou příručkou a chcete spolehlivý zdroj, který za vás zkontroluje váš kód, je JSLint skvělou volbou. Je obzvláště efektivní pro testování fragmentů kódu nebo pokud hledáte způsob, jak rychle lintovat malé projekty – třeba statický web o jedné stránce, který obsahuje pouze jeden soubor JavaScriptu.

standardJS

Pouze na základě hvězdiček na GitHubu je standardJS nejoblíbenější možností s téměř 19 000 hvězdičkami. Je zcela názorově odlišná, což znamená, že ji nelze vůbec přizpůsobit. Pokud však nejste vázáni žádným konkrétním průvodcem stylu, může to být požehnáním. Dodává se ve formě Node CLI a lze jej nainstalovat globálně nebo jako vývojovou závislost pomocí terminálu nebo příkazového řádku dle vlastního výběru:

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

Protože standardJS má jako předpoklady Node a npm a protože se spouští z příkazového řádku nebo pomocí skriptu npm, je laťka oproti úrovni JSLint mírně zvýšena. Ale protože není konfigurovatelný, nemusíte se o nic jiného starat. Můžete jej spustit z příkazového řádku jako jednoslovný příkaz a on zkontroluje každý soubor s příponou .js ve vašem aktuálním pracovním adresáři.

Jakékoli nalezené chyby vypíše na terminál nebo příkazový řádek. Můžete očekávat výstup podobný tomuto příkladu ze standardní dokumentaceJS:

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

Pokud potřebujete určit soubor nebo adresář, můžete jako argument uvést cestu a použít zástupné znaky. Program rovněž akceptuje zástupné znaky. V tomto příkladu bude standardJS hledat a lintovat všechny soubory JavaScriptu v adresáři src a jeho podadresářích:

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

Příznak --fix za cestou k souboru je možnost automatické opravy chyb při jejich nalezení. To může být velká úspora času, ale také to může být skvělé učební cvičení, kdy si chyby opravíte sami.

Pokud chcete prozkoumat konvence a pravidla, která standardJS používá, než se rozhodnete, zda jej použít, úplný seznam najdete zde. StandardJS je skvělou volbou pro ty z vás, kteří hledají rychlý a spolehlivý způsob, jak začít pracovat s linerem JavaScriptu.

JSHint

JSHint vznikl jako fork JSLintu. Cílem bylo vytvořit konfigurovatelnější linter. Pokud používáte standardJS nebo jiný názorově odlišný linter a hledáte způsob, jak si začít přizpůsobovat vlastní pravidla pro lintování, JSHint by mohl být právě pro vás. Nabízí většinu výhod výše zmíněných linterů a ještě něco navíc.

Stejně jako JSLint obsahuje domovská stránka JSHint textové pole, do kterého můžete vložit kód. Pole Metrics napravo od textového pole se během psaní v reálném čase aktualizuje a sčítá průběžný seznam statistik o vašem kódu, například počet funkcí, které obsahuje. Samozřejmě také zobrazuje všechny nalezené chyby lintování.

Pokud se vám nelíbí metodika copy/paste a chcete ji zapracovat do svého projektu, JSHint lze nainstalovat globálně nebo jako závislost projektu pomocí npm:

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

Po instalaci budete k lintování kódu používat rozhraní CLI. Zde jsou dva příklady příkazů, které kontrolují jeden soubor, respektive adresář:

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

V prvním příkladu bude JSHint lintovat soubor index.js a ve druhém příkladu bude rekurzivně prohledávat adresář ‚src/‘ a lintovat všechny nalezené soubory JavaScript. JSHint vypíše všechny nalezené chyby do terminálu.

Pokud vám nezáleží na přizpůsobení, můžete JSHint použít tak, jak je popsáno ve výše uvedených příkladech, a bude fungovat bez problémů. Odtud však může složitost výrazně narůst, protože JSHint je zcela konfigurovatelný a také vystavuje API, což znamená, že jej lze použít jako modul JavaScriptu ve vašich vlastních souborech JavaScriptu.

Vlastní konfigurace, která by měla být uložena v souboru s názvem .jshintrc, soubor by mohl vypadat takto:

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

Tento příklad shora dolů nastavuje verzi ECMAScriptu na 5, vyžaduje použití tří znamének rovnosti ( === nebo !==) na rozdíl od dvou (== nebo !=) při porovnávání hodnot a vynucuje přísný režim. Vlastní konfigurace můžete zahrnout zadáním cesty k souboru .jshintrc za příznakem -- config na příkazovém řádku nebo jejich deklarací jako atributu ‚jshintConfig‘ v souboru package.json projektu. JSHint použije své výchozí volby pro všechna pravidla, která si nepřizpůsobíte.

Volba příkazového řádku může vypadat takto:

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

Proti tomu volba package.json může vypadat takto:

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

Tyto základy můžete použít, abyste se vydali cestou přizpůsobování vlastních lingovacích pravidel pomocí JSHint. Pokud hledáte více, oficiální dokumentace obsahuje vyčerpávající popis používání rozhraní API JSHint a všech způsobů, jak jej přizpůsobit vašim potřebám.

ESLint

Pokud pomineme hvězdy serveru GitHub, pokud jde o lintování JavaScriptu, je ESLint pravděpodobně linter, který je ve volné přírodě vidět nejčastěji, a pro mnoho lidí bude tím pravým. Ve své vlastní dokumentaci se přirovnává k JSLint a JSHint, pokud jde o metody, které používá pro parsování JavaScriptu. A podobně jako u JSHintu si můžete usnadnit práci použitím výchozích nastavení a přidávat úpravy podle toho, jak se mění vaše preference nebo potřeby.

Chcete-li začít používat ESLint, nainstalujte jej globálně nebo jako vývojovou závislost:

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

Pokud nainstalujete ESLint globálně, jeho konfigurace se uplatní na všechny soubory projektu, proti kterým jej spustíte. Pokud však chcete pro různé projekty různé konfigurace, můžete jej nainstalovat jako vývojovou závislost a pro každý projekt vytvořit jiný konfigurační soubor. Uvědomte si, že pokud je ESLint nainstalován jako závislost projektu, na rozdíl od globální instalace, musíte spustit spustitelný soubor ze složky node_modules takto:

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

Při spuštění výše uvedeného příkazu vás konfigurací ESLintu provede řada otázek. (Poznámka: Bez ohledu na to, jak moc plánujete přizpůsobit svá pravidla pro lintování, musíte začít tímto krokem, protože ESLint potřebuje soubor .eslintrc, který bude vygenerován tímto procesem, než bude moci lintovat váš kód)

První otázka, která vám bude položena, je, jak nakonfigurovat ESLint. Máte tři možnosti: použít populárního průvodce stylem, odpovědět na otázky týkající se vašeho stylu nebo nechat ESLint, aby se nakonfiguroval sám tím, že zkontroluje vaše soubory a rozhodne, jak nastavit pravidla. Pokud vám vyhlídka na vlastní konfiguraci hned zpočátku připadá děsivá, můžete se vrátit k použití populárního průvodce styly vytvořeného jednou z několika známých organizací.

Nezávisle na tom, kterou cestou se vydáte, ESLint použije vaše odpovědi k vytvoření souboru s názvem .eslintrc v aktuálním pracovním adresáři. Tento soubor budete upravovat, pokud budete chtít později provést změny v pravidlech lintování.

Tady je příklad souboru .eslintrc ve formátu JSON, který používá výchozí pravidla průvodce styly JavaScriptu Airbnb a obsahuje dvě vlastní pravidla pro vypnutí striktního režimu a povolení příkazů console.log():

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

Pokud se rozhodnete odpovědět na otázky týkající se vašeho stylu, zeptá se vás například na to, jakou verzi ECMAScriptu používáte, zda preferujete tabulátory nebo mezery, středníky nebo ne a zda používáte JSX a/nebo React. Díky hotové podpoře Reactu a doplňkovým zásuvným modulům bude ESLint pravděpodobně nejlepší volbou pro vývojáře Reactu. Alespoň pro ty, kteří s lintováním teprve začínají.

Po instalaci aplikace ESLint a vygenerování souboru .eslintrc můžete pomocí rozhraní CLI začít lintovat svůj kód. ESLint hledá váš soubor .eslintrc ve výchozím nastavení, takže nemusíte zadávat žádné konfigurace na příkazovém řádku. Můžete však použít různé příznaky a změnit tak chování programu ESLint. V příkladu níže příznak -- quiet říká ESLintu, aby zobrazoval pouze chyby, na rozdíl od varování i chyb. Příznak --fix mu říká, aby se pokusil automaticky opravit všechny nalezené chyby.

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

Stejně jako u ostatních CLI, které jsme probrali, můžete v případě potřeby použít zástupné znaky a cesty k souborům místo konkrétních názvů souborů. Přestože je systém ESLint velmi dobře konfigurovatelný, usnadňuje učební křivku tím, že pro výchozí způsob konfigurace používá přístupného průvodce nastavením. Pokud se chcete do přizpůsobení opravdu pustit, oficiální dokumentace obsahuje skvělé vysvětlení všeho, co můžete s ESLintem dělat.

.