Při psaní JavaScriptu trávím spoustu času opravou základních chyb. Často přejmenuji proměnnou a testuji svou aplikaci a pak zjistím, že jsem proměnnou nepřejmenoval na jednom místě. Přejmenovávám funkce, to samé. Píšu věci špatně a zase ztrácím čas klikáním v prohlížeči.
Pocit je vždy stejný – Proč jsem znovu udělal tuto chybu ? Programuji více než 15 let a stále pokračujte v tom.
To je důvod, proč miluji ESLint. Je to jako programování společně s někým, kdo tomu věnuje lepší pozornost než já. "Hele, zapomněl jsi to přejmenovat." "Hej, to bys neměl dělat."
ESLint je nástroj, který analyzuje váš kód a upozorňuje na jakékoli problémy, které najde. Dokáže najít chyby, potenciální problémové oblasti, špatné styly kódování a stylistické problémy. Nejlepší ze všeho je, že je vysoce konfigurovatelný, takže pokud s ním v něčem nesouhlasíte, můžete mu říct, aby o tom mlčel.
Dovolte mi ukázat vám skutečný příklad toho, jak vám používání ESLint přinese užitek.
Instalace a konfigurace
Než půjdeme dále, musíme nainstalovat ESLint. Stejně jako u většiny dnešních nástrojů JS k tomu potřebujete nodejs. Jakmile to nastavíte, spusťte…
npm install -g eslint
Tím se program stane eslint dostupné z příkazového řádku.
Příklad ze skutečného života
Abych vysvětlil výhody ESLint, ukážu vám skutečný příklad z kódové základny, na které jsem pracoval. Projdeme si kód a můžeme se podívat na to, co s ním ESLint dělá, aby nám usnadnil život.
Příklad souboru JavaScript je uveden níže. Nebojte se o použití AngularJS v něm – tyto techniky budete moci používat s jakoukoli knihovnou nebo frameworkem.
var module = angular.module('uploader', []);
/**
* XMLHttpRequest wrapper that supports file upload progress since $http doesn't
*
* Usage similar to $http, returns a promise from the send method
*/
module.service('uploader', ['$q', function($q) {
function readyStateChange(deferred, xhr) {
if(xhr.readyState == 4) {
if(xhr.status == 200) {
deferred.resolve(JSON.parse(xhr.responseText));
}
else {
deferred.reject('HTTP status ' + xhr.status);
}
}
}
function onProgress(deferred, xhr, ev) {
if(ev.lengthComputable) {
deferred.notify({ loaded: ev.loaded, total: ev.total });
}
}
return {
send: function(url, data) {
var fd = new FormData();
for(var k in data) {
fd.append(k, data[k]);
}
var d = $q.defer();
var xhr = new XMLHttpRequest();
xhr.open('POST', url, true);
xhr.onreadystatechange = readyStateChange.bind({}, d, xhr);
xhr.upload.onprogress = onProgress.bind({}, d, xhr);
xhr.send(fd);
return d.promise;
}
};
}]); Toto je základní komponenta pro nahrávání souborů. Kód je funkční, ale uvidíme, co se stane, když necháme ESLint vyzkoušet.
Typickým výchozím bodem s ESLint je nejprve analyzovat váš kód pomocí něj a podívat se na výstup. Níže je uveden výstup ESLint pro ukázkový modul.
V tomto okamžiku výstup obsahuje chyby, které by tam být neměly, jako například Angular is notdefined a XMLHttpRequest is notdefined.
Proč si ESLint stěžuje na XMLHttpRequest? Určitě by to nemělo dělat, protože XMLHttpRequest je standardní. XMLHttpRequest je standardní pouze v prohlížeči . Jiná prostředí, jako je NodeJS, to nemusí mít. Proto je prvním krokem sdělit ESLintu, že náš kód poběží v prohlížeči.
Za tímto účelem vytvoříme konfigurační soubor s názvem .eslintrc , který můžeme použít k tomu, abychom ESLint řekli, co má dělat. Níže uvidíte naši první verzi .eslintrc soubor.
{
"env": {
"browser": 1
}
}
ESLint lze konfigurovat pomocí JSON. Zde říkáme, že prostředím je prohlížeč. browser prostředí zabrání ESLintu dávat chyby o věcech jako XMLHttpRequest nebo window . Pokud byste to chtěli spustit v NodeJS, zahrnuli byste "node": 1 navíc, který dělá totéž, s výjimkou modulů Node-builtins.
Spusťte znovu eslint a zjistěte, co teď říká.
Chyby v prostředí prohlížeče jsou pryč, ale je tu další, kterou nechceme:
{
"env": {
"browser": 1
},
"globals": {
"angular": 1
}
}
globals pole konfiguruje globální proměnné. V tomto případě definujeme angular , ale pokud používáte jQuery nebo Backbone nebo Underscore nebo cokoli jiného, můžete přidat $ nebo Backbone nebo _ stejným způsobem.
Spusťte znovu eslint a chyba je pryč.
Stále jsou některé věci, které chci změnit. Dávám přednost používání jednoduchých uvozovek pro řetězce, takže přidám pravidlo, které to opraví.
{
"env": {
"browser": 1
},
"globals": {
"angular": 1
},
"rules": {
"quotes": [2, "single"]
}
}
rules vlastnost konfiguruje pravidla ESLint. quotes pravidlo definuje, zda ESLint dává chybu pro styl citace a který styl je povolen. Číslo 2 z toho dělá chybu. Nastavením na 1 by se z něj stalo varování, které se ve výstupu zobrazuje jinak. "single" říká ESLint, že chci povolit pouze jednoduché uvozovky.
Kódová základna pro tento příklad nepoužívá přísný režim ani nevyžaduje trojnásobné rovná se, takže tato pravidla také přidám.
Abyste věděli, které pravidlo nakonfigurovat, můžete se podívat na výstup.
Z toho můžeme vidět pro „použít přísné“ pravidlo je „přísné“ a pro === pravidlo je „eqeqeq“. Tyto dva můžeme přidat do konfigurace:
{
"env": {
"browser": 1
},
"globals": {
"angular": 1
},
"rules": {
"quotes": [2, "single"],
"eqeqeq": 0,
"strict": 0
}
}
Nastavení pravidla na 0 způsobí, že jej ESLint ignoruje.
Zbývající chyby lze snadno opravit. Odstraníme koncové mezery z řádku 35 a odstraníme prázdný řádek z konce souboru.
Odhalování chyb
Ukázkový kód nyní prochází ESLint bez chyb. Pojďme zavést nějaké změny, aby byly věci zajímavější.
Pamatujete si, jak jsem říkal, že často přejmenuji proměnnou a pak ji všude zapomenu přejmenovat? Pojďme se podívat, jak se s tím ESLint vypořádá. Přejmenuji xhr do request …
var request = new XMLHttpRequest();
request.open('POST', url, true);
request.onreadystatechange = readyStateChange.bind({}, d, xhr);
request.upload.onprogress = onProgress.bind({}, d, xhr);
request.send(fd);
Všimli jste si na první pohled chyby? Odešel jsem ve dvou případech xhr . Podívejme se, co se stane, když spustíme ESLint.
ESLint upozorňuje na dvě nedefinované proměnné, které jsou v tomto případě způsobeny přejmenováním. Nyní to můžeme snadno rozpoznat, aniž bychom museli trávit čas klikáním v prohlížeči.
Můžeme také jen pro legraci vyvolat chybu syntaxe:
To jsou jen dva příklady toho, co ESLint dokáže zachytit. Seznam vestavěných pravidel je velmi dlouhý a můžete dokonce psát vlastní pravidla nebo instalovat pluginy.
Doporučení
ESLint může být velmi cenným nástrojem, ale jako každý nástroj jej musíte používat, abyste získali výhody.
Mých pět doporučení, abyste z ESLint vytěžili maximum, jsou:
- Další informace naleznete v dokumentaci
- Spusťte jej ve svém projektu a nakonfigurujte jej tak, aby vyhovoval vašemu stylu kódování
- Nainstalujte si další pluginy pro knihovny, které používáte, aby byl ESLint ještě užitečnější
- Automatizujte ESLint, abyste jej nikdy nezapomněli spustit
- Získejte okamžitou zpětnou vazbu tím, že ji integrujete do svého editoru nebo IDE
Abychom vám to opravdu usnadnili, vytvořil jsem pro tyto kroky průvodce v 5 krocích. Průvodce v 5 krocích můžete získat na mém webu.
ESLint nám poskytuje základní záchrannou síť. Zachytí mnoho snadno chybných chyb a je velmi užitečné při práci v týmech při prosazování stylu kódování. Ale pro těsnější bezpečnostní síť byste měli investovat do jednotkových testů. To je ovšem téma na jindy.