ESLint: Cesta ke kvalitnímu JavaScriptu

Není nad úhledný kód. ESLint dokáže zajistit, že celá vaše aplikace bude jako ze škatulky. Uhlídá nejen vás, ale i celý tým.

TL;DR

  • jednotný styl kódu je důležitý
  • inspirujte se u AirBnB v jejich (JavaScript Style Guide)[https://github.com/airbnb/javascript]
  • použijte .eslintrc od AirBnB: npm i -D eslint-config-airbnb
  • pro nastavení odlišných pravidel front-endového kódu využijte dědění od základního .eslintrc
  • spouštějte ESLint přes NPM "lint": "node ./node_modules/eslint/bin/eslint.js ./lib/*.js"

ESLint: ušijte si na sebe bič!

Jak se v tom může někdo vyznat!? Si jistě říkáte, když vidíte kód psaný v jiném stylu, než na který jste zvyklí. Co hůře, pokud v rámci jednoho projektu narazíte na několik stylů naráz. V jednom skriptu odsazení tabulátory, v dalším dvěma mezerami. Ještě hůře, když začnete narážet na zapomenuté logy do konzole, nepoužité proměnné nebo funkce, špatné a nepřehledné konstrukce, a tak dále.

ESLint je od toho, aby ukáznil nejen vás, ale i celý tým. Díky němu bude projekt vypadat celistvě a budete mít zaručeno, že se do kódu nedostane něčí ošklivost a nebo lépe, že tu ošklivost nezapomenete v projektu sami.

Existují i jiné nástroje na kontrolu kvality kódu, například (JSHint)[http://jshint.com], nebo (JSLint)[http://www.jslint.com], ale ESLint válcuje své konkurenty zejména množstvím aplikovaných pravidel, podporou a flexibilitou. Jeho výhody jsou nesporné:

  • ESLint je podporován ve Webstormu od JetBrains, ve VS Code, v Atomu, ale i v dalších IDE
  • ESLint podporuje spouštění z příkazové řádky (CLI) a je možné ho zapojit do Continuous Intergation
  • ESLint umožňuje kontrolu syntaxe (mezery a odřádkování)
  • s ESLintem je možné zabránit prohřeškům, které zhoršují orientaci v kódu, či jsou častým zdrojem chyb
  • existují pluginy pro React, Node, Mochu i Angular, které kontrolují dodržování best practices
  • v rámci konfigurace je možné dědit od jiných konfiguračních souborů, což usnadňuje přenositelnost pravidel

Jaký styl zvolit? Učte se od profesionálů z AirBnB!

Co se týče syntaxe (mezery a odřádkování v různých konstrukcích) je prakticky jedno, jaký styl zvolíte. Důležité je mít jeden jednotný styl. Jiná situace jsou Best Practices. Ty už jsou často předem danná a respektují současné světové trendy, které určuje komunita kolem JS. Nastavování ESLintu se pak komplikuje, zejména kvůli nepřebernému množství pravidel.

Nejlepší je nesnažit se vymyslet kolo, ale použít už hotové. Velmi vhodný sborník pravidel pro JavaScript (ale i pro CSS/SASS) má AirBnB. Jejich (JavaScript Style Guide)[https://github.com/airbnb/javascript] je dokumentací stylu, a celé nastavení je pak k dispozici jako NPM balíček: npm install eslint-config-airbnb. Pokud s kterýmkoliv pravidlem nesouhlasíte, díky dědičnosti ESLint konfigurace je možné si jejich soubor upravit na míru.

V rámci onboardingu vývojářů do projektu/firmy je vhodné, aby noví členové týmu pochopili, proč jsou pravidla nastavena, tak jak jsou. Forkem AirBnB Style Guide a jeho drobnými úpravami získáte skvělý materiál, který každému novému kusu v týmu usnadní nástup. MIT licence pravidel je pak otevírá komerčnímu užití.

Nasazujeme ESLint s pravidly od AirBnB

Nejprve ESLint i pravidla a potřebné pluginy nainstalujeme:

npm install --save-dev eslint eslint-plugin-react eslint-plugin-import eslint-plugin-jsx-a11y eslint-config-airbnb  

Dále v kořenovém adresáři projektu připravíme soubor .eslintrc pro validaci serverového kódu. Atribut sourceType zajišťuje, že ESLint parser bude počítat se serverovým require-exports a proti původnímu nastavení AirBnB je třeba ještě povolit generátory, které na frontendu není vhodné používat kvůli jejich ne úplně dobré transpilaci.

{
    "extends": "airbnb",
    "parserOptions": {
        "ecmaFeatures": {
            "generators": true,
            "modules": false
        },
        "sourceType": "script"
    },
    "rules": {
        "func-names": 0,
        "strict": [2, "global"],
        "indent": [2, 4, {"SwitchCase": 1}],
        "space-before-function-paren": [2, {"anonymous": "always", "named": "always"}]
    }
}

Oproti nastavení AirBnB preferuji místo odsazení dvěma mezerami čtyři a mezeru před závorkami funkce, proto v rámci objektu rules tato nastavení přepisuji.

ESLint pro prohlížeč a React

Ve frontendovém kódu platí jiná pravidla než na frontendu, zejména kvůli transpilerům, které nové standardy přepisují tak, aby jim rozuměly i starší prohlížeče. ESLint umožňuje pro každou podsložku projektu pozměnit nastavení tak, aby pro serverový kód mohly platit jiné direktivy než pro frontendový kód. Například je možné validovat správné používání React komponent i JSX.

Jak toho docílit? Do složky s vaším frontendovým kódem, například vložte soubor další soubor .eslintrc, který jen přizpůsobí váš kořenový .eslintrc potřebám frontendu:

{
    "extends": "../.eslintrc",
    "parserOptions": {
        "ecmaFeatures": {
            "generators": false,
            "jsx": true,
            "modules": true
        },
        "sourceType": "module"
    },
    "plugins": [ "react" ],
    "rules": {
        "react/jsx-no-bind": 0,
        "react/jsx-indent-props": [2, 4]
    }
}

Pokud chcete svůj frontendový kód používat i v rámci serveru, je vhodné používat místo modulů-importů klasický systém require-exports, který je v Node.js podporovaný. Vyhnete se tak nutnosti transpilace kódu při jeho použití na serveru. Jediným rozdílem mezi mezi serverovým a klientským kódem pak můžou tvořit JSX a DOM použitý v komponentách.

Spouštíme ESLint z konzole

Pokud používáte základní task runner, který je součástí NPM, stačí do package.json do sekce scripts direktivu lint a specifikovat adresáře, na kterých se má ESLint spuštět:

"scripts": {
    "lint": "node ./node_modules/eslint/bin/eslint.js ./public/**/*.js* ./routes/**/*.js ./lib/**/*.js ./bin/**/*.js ./config/**/*.js"
},

Ke spuštění kontroly pak stačí jen příkaz spustit:

$ npm run lint

Mám zkušenost, že NPM je dostatečně dobrý task runner pro většinu operací spojených s vývojem a provozem JS projektu. Navíc je jednoduchý a nutí vývojáře zjednodušovat workfow.

Funkční příklad zdrojového kódu

Pro lepší představu, jak zapojit do projektu ESLint jsem si pujčil zdrojový kód z příkladu "Startujeme React v ES6 s pomocí Webpacku" a nasadil jsem na něj ESLint. Výsledek je možné vidět na mém Githubu v Příkladu použití ESLintu

David Menger

Read more posts by this author.