ESLint

Kontrola kvality kódu

Pokud na projektu pracuje více vývojářů, často chceme vynutit dodržování nějaké kultury ohledně formátování kódu, aby se nám nestalo, že kód v každý souboru bude vypadat jinak podle toho, kdo jej zrovna psal.

Významnou pomůckou je v tomto nástroj zvaný linter, který kontroluje napsaný kód a hlásí všechny prohřešky proti nim. Nejpoužívanější nástroj pro lintování JavaScriptu se jmenuje ESLint. Abychom si jej mohli vyzkoušet a správně nastavit, bude třeba provést následující kroky.

1. Vytvořte si na disku složku es-sandbox, ve které inicializujeme běžný NPM projekt pomocí

   npm init -y
   

2. V projektu vytvořte soubor index.js, do kterého vložte krátký kousek kódu, na kterém budeme lintování testovat.

   document.body.innerHTML = "<h1>Hello World</h1>";
   

3. Nainstalujte do projektu balíček eslint jako vývojovou závislost

   npm install -D eslint
   

4. Aby nám VS Code během vývoje zobrazoval lintovací chyby, je potřeba nainstalovat rozšíření s názvem ESLint.
5. VS Code je také potřeba správně nastavit. Následující nastavní přidáme do JSON Settings.

     "eslint.validate": [
       "javascript"
     ],
     "editor.codeActionsOnSave": {
       "source.fixAll.eslint": true,
     }
   

Konfigurace

Podobně jako Webpack i ESLint má svůj konfigurační soubor. Ten se jmenuje .eslintrc.js a vytvoříme jej v hlavní složce projektu. V základní verzi může konfigurace vypadat například takto.

module.exports = {
  env: {
    es2015: true,
  },
  parserOptions: {
    sourceType: 'module',
  },
}

• Pomocí vlastnosti env nastavujeme v jakém prostředí JavaScript používáme.
• Nastavením es2015: true říkáme, že používáme JavaScript ve verzi ES2015.
• Hodnota sourceType: 'module' říká, že chceme používat import/export místo vkládání JavaScriptu pomocí <script> tagů.

ESLint má dobrou dokumentaci, které se dočtete podrobnosti ke každému jednotlivému nastavení.