Kontrola JavaScriptu s JSLint a JSHint

V článku si představíme dva podobné nástroje, které vám mohou ušetřit čas při programování statickou kontrolou kódu v JavaScriptu. Zkontrolují, zda dodržujete jednotná pravidla zápisu kódu a upozorní vás na případné syntaktické chyby, překlepy, ale i na „zapomenuté“ příkazy, proměnné či nejasné konstrukce.

Seriál: Javascriptaření (9 dílů)

  1. Javascriptaření: hrajte si s funkcemi! 31.1.2011
  2. ECMAScript Strict mode ve Firefoxu 4 8.2.2011
  3. Javascriptaření: nejen jQuery živ je JavaScriptař 8.3.2011
  4. Javascriptaření: fyzika, grafika a společenská konverzace 23.3.2011
  5. JavaScriptaření: drátujeme, překládáme, spojujeme 31.3.2011
  6. Javascriptaření: ukažte mi, označte mě, opravte mě 13.4.2011
  7. Kontrola JavaScriptu s JSLint a JSHint 14.7.2011
  8. Základní vzory pro vytváření jmenných prostorů v JavaScriptu 10.10.2011
  9. Javascriptaření: překladače, pakovače 9.11.2011

JSLint

JSLint je nástroj pro kontrolu kvality kódu. Jeho autorem je známý vývojář a propagátor Douglas Crockford (bude hostem na letošním WebExpo – pozn.red.). Nástroj JSLint provede statickou analýzu a upozorní na místa, která by mohla způsobit problémy. Používání JSLintu nutí programátora dodržovat určité konvence. Výsledkem je kód, u něhož je konzistentní coding standard, což pomáhá eliminovat mnohé zásadní chyby.

Abychom si udělali lepší představu o tom, co JSLint dokáže, přejdeme rovnou k jednoduchému příkladu. Představme si, že náš zdrojový kód obsahuje mimo jiné tuto podmínku (s „chybou“):

if (a = b) {
    // nejaky korektni kod
}

Bystrý čtenář si povšimne, že došlo zřejmě k chybě z nepozornosti či k překlepu a proměnné se v podmínce neporovnají, ale přiřazují. JSLint v takovém případě vypíše pozici chyby a zprávu:

Expected a conditional expression and instead saw an assignment.

Instalace a použití

JSLint existuje jako online nástroj (JSLint online), ale lze jej použít i offline. Stáhněte si aktuální verzi z GitHubu:

git clone https://github.com/douglascrockford/JSLint

V aktuálním adresáři se vytvoří adresář se staženým projektem. Hlavní soubor, který nás zajímá, je jslint.js. V něm se nachází globální funkce JSLINT. Použití s implicitním nastavením je snadné:

var myResult = JSLINT(source, options);

V proměnné source se nachází řetězec s kódem určeným ke kontrole. V myResult bude hodnota true, pokud byl kód podle JSLint správný, jinak false. V globálně dostupném poli JSLINT.errors budou pak jednotlivé chyby, vždy s číslem řádku, popisem problému a dalšími informacemi.

Druhý parametr je volitelný parametr, který obsahuje nastavení pravidel.

Používáte-li nějaký specializovaný editor, může být JSLint dostupný jako plugin. Některé pluginy do editorů mohou mít ale jiné nastavení, např. plugin pro VIM nevyžaduje mezeru za ‚if‘ a naopak chce středník za každým příkazem.

Podívejme se teď na část pravidel, které JSLint obsahuje. A nezapomeňte na autorovo varování: JSLint will hurt your feelings.

Typová kontrola

var i = 0;
i = "a";
Type confusion: 'i': number and 'a': string.

Přestože JavaScript není staticky typovaný jazyk, JSLint dokáže v tomto případě rozpoznat, že jste do číselné proměnné chtěli uložit řetězec.

Operace inkrementace a dekrementace

Tyto operace jsou zakázány, neboť bývají zdrojem záludných chyb. Jsou povolené jen v cyklu for.

Vytváření objektů

var a = new Object();
Use the object literal notation {}.

JSLint vyžaduje specifický zápis pro nové objekty. Proč nám nutí jinou notaci, když je to „to samé“? Důvody jsou následující:

  • syntaxe je mnohem kratší
  • elegantněji se vytvářejí objekty za běhu:
    {name: "Bob", age: 8}

Povinné středníky

var foo = function () {
    //...
}

Středníky jsou v JavaScriptu nepovinné (resp. existují poměrně komplikovaná pravidla, která říkají, kde si má interpret středník „domyslet“). Výsledkem je, že pokud k předchozímu kódu připíšete něco takového:

(function () {
    //...
})();

bude celý kód interpretován jako

var foo = function () {
    //...
}(function () {
    //...
})();

Druhá funkce se stane parametrem pro volání té první, a výsledek se bude volat jako funkce. Tedy něco jiného, než jsme zamýšleli. Proto JSLint na střednících trvá.

Eval je zlo

Přiznejme si, že spouštět kód v řetězci není úplně nejčistší řešení. Kód v řetězci není vizuálně strukturovaný, editory běžně nezvýrazňují syntax JavaScriptu v řetězcích, a to ani nemluvíme o možných bezpečnostních rizicích, spojených s neošetřeným vstupem funkce eval().

Nedosažitelný kód

JSLint kontroluje, zda za příkazy jako return, které „odkloní“ běh programu, není nějaký další kód. Pokud je, upozorní na to.

JSLint dovede uživatele zahltit slušnou řádkou zpráv i při poměrně banální chybě. Vyplatí se nejdřív podívat na daný řádek a zamyslet se, co je špatně, než mechanicky chybu po chybě napravovat.
Některá varování JSLint mohou být až nesmyslná a mohou vás pěkně vytočit. Dejte ale Douglasovi šanci a najděte si, co to varování znamená – většinou má nějaký smysl. Pokud vám ale některá varování opravdu nevyhovují a považujete je v dané situaci (nebo obecně) za nesmyslná, můžete některá z nich potlačit v konfiguraci.

Závěrem: JSLint nám dává možnost zamyslet se nad způsobem, jakým píšeme v JavaScriptu, a nad návrhem jazyka ECMAScript jako takového.

JSHint

Jestliže se vám zdá JSLint příliš radikální a omezujíci, JSHint by mohlo být to pravé. Jeho autory rozčiloval fakt, že JSLint nutil programátory psát jako Douglas Crockford. Proto vznikl fork z verze 2010–12–16. Ten je méně pedantický a dostal jméno JSHint. Jeho vývoj je řízený komunitou a klade důraz především na respektování odlišných programovacích stylů. Je možné nastavit kontrolu každého pravidla, které chceme dodržovat.

git clone https://github.com/jshint/jshint.git

Použití offline verze je stejné jako u JSLint, jen se používá funkce JSHINT.

Konstrukce, které JSLint zakazoval, je možné v JSHint povolit. Například operátor přiřazení v podmínce, podmínka bez složených závorek, funkce eval… Navíc je u JSHint možné specifikovat i prostředí (prohlížeč, jQuery/Prototype atd.), které používáme. JSHint tak rozpozná příslušné globální proměnné a nehlásí „planý poplach“.

Jako materiál pro článek byla použita JSLint edice 2011–07–01, JSHint edice 2011–04–16, Ubuntu 11.04.

Student FI MU se zájmem o počítačovou grafiku, web a programovací jazyky. Pořád zkouší nové projekty a ve volném čase se rád podívá na anime či projede na koni.

Věděli jste, že nám můžete zasílat zprávičky? (Jen pro přihlášené.)

Komentáře: 18

Přehled komentářů

tdvorak Validace z příkazové řádky
srigi Re: Validace z příkazové řádky
tdvorak Re: Validace z příkazové řádky
srigi Re: Validace z příkazové řádky
Čelo coffee
2X4B-523P :-)) - titulek musí být alespoň 4 znaky
Jerry Validace v kurzu
DavidDurman zeon.js
pb viac zdrojovych suborov
tdvorak Re: viac zdrojovych suborov
pb Re: viac zdrojovych suborov
asdasd Re: Kontrola JavaScriptu s JSLint a JSHint
blizz chyba?
David Hrachový Re: chyba?
tdvorak Re: chyba?
juraj eval
Opravdový odborník :-) Re: eval
juraj Re: eval
Zdroj: https://www.zdrojak.cz/?p=3517