ESLint - je to neuvěřitelně výkonný nástroj pro statickou analýzu kódu JavaScript. Pomáhá vývojářům najít a opravit chyby a nesrovnalosti v jejich kódu, což umožňuje vytvářet kvalitnější a spolehlivější software. Než však začnete používat ESLint ve svém projektu, musíte jej správně nakonfigurovat, abyste dosáhli nejlepšího výsledku.
V tomto článku vám poskytneme podrobný návod k nastavení ESLint. K jeho přizpůsobení budete potřebovat jen pár minut a začnete využívat jeho výhody ve svých projektech.
Prvním krokem při konfiguraci ESLint bude jeho instalace do vašeho projektu. K tomu budete muset zadat příkaz v terminálu vašeho projektu:
npm install eslint --save-dev
Po úspěšné instalaci eslint do vašeho projektu musíte nakonfigurovat konfigurační soubor. Konfigurační soubor .eslintrc lze vytvořit v kořenové složce vašeho projektu. V tomto souboru můžete nastavit pravidla pro analýzu kódu, která chcete ve svém projektu použít.
Instalace a konfigurace ESLint
- Nainstalujte ESLint globálně pomocí dávkového Správce npm:
npm install -g eslinteslint --initnpm install eslint eslint-plugin-
- Pro Visual Studio Code nainstalujte rozšíření ESLint a přidejte do settings následující konfiguraci.json:
"eslint.validate": ["javascript","javascriptreact","vue"]eslint .Příkaz spustí ESLint pro všechny soubory v aktuálním adresáři a zobrazí nalezené chyby a varování v konzoli. Pro pohodlí můžete přidat skript do souboru package.json:
"scripts":
Vytvoření konfiguračního souboru
Chcete-li nakonfigurovat eslint, musíte vytvořit konfigurační soubor, ve kterém si určíte pravidla lintingu, jak chcete. V tomto souboru budete moci konfigurovat různé možnosti, jako je použití mezer nebo tabulátorů, použití středníků, délka řádku a další.
Vytvoření konfiguračního souboru není obtížné. Chcete-li začít, otevřete příkazový řádek nebo terminál a přejděte do kořenové složky projektu. Poté spusťte následující příkaz:
| eslint --init |
Po provedení tohoto příkazu vám eslint položí několik otázek k nastavení. Budete si muset vybrat styl kódování, který preferujete, a odpovědět na další otázky týkající se nastavení lintingu. Jak průzkum probíhá, eslint vygeneruje konfigurační soubor .eslintrc.json v kořenové složce vašeho projektu.
Konfigurační soubor můžete také vytvořit ručně. Stačí vytvořit nový soubor .eslintrc.json a přidejte do něj požadované nastavení ve formátu JSON.
Jakmile vytvoříte konfigurační soubor, můžete jej upravit a upravit pravidla lintingu tak, aby vyhovovala vašim potřebám. Zde můžete přidat nebo odstranit pravidla, zadat možnosti atd. celý seznam dostupných pravidel a jejich popis najdete v dokumentaci eslint.
Nastavení pravidel pro ESLint
Můžete začít konfigurovat pravidla pomocí konfiguračního souboru'.eslintrc`. V tomto souboru můžete zadat různá pravidla a jejich hodnoty. Existuje několik způsobů, jak upravit pravidla v tomto souboru:
1. Integrovaná pravidla: ESLint poskytuje sadu vestavěných pravidel, která lze použít ve výchozím nastavení. Můžete například určit, že každý řádek kódu musí skončit na středníku.
2. Pravidla odpojení: Někdy je nutné pravidlo dočasně deaktivovat na konkrétním řádku nebo části kódu. K tomu lze použít anotaci ' / * eslint-disable */'.
/* eslint-disable */console.log("This line will be ignored by ESLint");/* eslint-enable */3. Pokročilé konfigurace: ESLint poskytuje několik pokročilých konfigurací, které zahrnují sadu pravidel najednou pro konkrétní vývojové prostředí (jako je Node.js nebo React).
Správné nastavení pravidel pro ESLint výrazně zvyšuje kvalitu kódu a pomáhá identifikovat a předcházet chybám a nejednoznačnostem. Podle pokynů krok za krokem budete moci nastavit správná pravidla a nakonfigurovat eslint na svém projektu.
Použití konfiguračních komentářů
Jak jste se již dozvěděli, k nastavení pravidel eslint můžete použít Soubor .eslintrc nebo package.json. Někdy však nastanou situace, kdy je třeba nastavit zvláštní pravidla pro konkrétní soubory nebo dokonce pro jednotlivé části kódu. V takových případech lze použít konfigurační Komentáře.
Konfigurační komentáře jsou způsob, jak nastavit pravidla eslint přímo v kódu pomocí speciálních komentářů. Takové komentáře začínají symbolem / * eslint a končí symbolem */. Pomocí takových komentářů můžete změnit nebo přidat pravidla pouze pro tuto konkrétní část kódu.
/* eslint eqeqeq: "error" */const age = 18;if (age == 18)
V tomto příkladu jsme použili komentář / * eslint eqeq: "error" */. Uvedli jsme tedy eslint, že na daném řádku by mělo být spuštěno pravidlo eqeqeq (přísné srovnání) s úrovní chyby.
Konfigurační komentáře mohou být velmi užitečné, když potřebujete použít specifická pravidla v určité části kódu, aniž byste ovlivnili zbytek projektu. Nicméně, je třeba být opatrní a ne ucpat kód velkým množstvím takových komentářů, aby se nekomplikovalo jeho čtení a porozumění.
Práce s výjimkami
Modul eslint vám umožňuje nakonfigurovat pravidla pro ověření vašeho JavaScript kódu. Někdy však dochází k situacím, kdy je třeba z kontroly vyloučit určitou část kódu. K tomu existuje možnost použít výjimky v souboru .eslintrc.
Výjimky mohou být užitečné v následujících případech:
| 1. Vypnutí pravidla pro celý soubor | Pokud chcete dočasně zakázat kontrolu konkrétního pravidla pro celý soubor, můžete použít komentář /* eslint-disable */ na začátku souboru. Poté budou všechna pravidla ignorována až do konce souboru nebo do komentáře / * eslint-enable*/. |
| 2. Deaktivace pravidla pro konkrétní část kódu | Pokud chcete deaktivovat kontrolu pouze pro konkrétní část kódu, můžete použít Komentáře /* eslint-disable-next-line */ nebo /* eslint-disable-line */ před touto částí kódu. |
| 3. Vyloučení určitého pravidla pro určité soubory | Pokud chcete zakázat kontrolu určitého pravidla pouze u některých souborů, můžete v souboru použít pravidlo overrides .eslintrc. Například: |
,"overrides": [>]>V uvedeném příkladu bude pravidlo no-console ignorováno pouze pro soubory s příponou .test.js.
Správné použití výjimek vám pomůže nastavit eslint tak, aby byly kontroly kódu co nejpřesnější a nejužitečnější.
Integrace s editorem kódu
Pro pohodlnou práci s ESLint se doporučuje integrovat jej s editorem kódu. To vám umožní identifikovat a opravit chyby lintingu přímo při psaní kódu a také získat tipy a tipy pro styl kódování.
Téměř všechny oblíbené Editory kódu podporují rozšíření nebo pluginy pro integraci s ESLint. Níže jsou uvedeny pokyny pro nejběžnější editory:
Visual Studio Code: Nainstalujte rozšíření ESLint a poté přidejte následující nastavení do souboru nastavení VS Code (.vscode/settings.json ):
Sublime Text: Nainstalujte balíček SublimeLinter-ESLint přes Package Control. Po instalaci restartujte Sublime Text. Zkontrolujte, zda máte nainstalovaný Node.js a eslint globálně. Poté přidejte následující nastavení do souboru nastavení Sublime Text (Preferences → Package Settings → SublimeLinter → Settings ):
,"excludes": []>>,"paths": >Atom: Nainstalujte balíček linter-eslint přes Atom Package Manager. Zkontrolujte, zda máte nainstalovaný Node.js a eslint globálně. Poté přidejte následující nastavení do souboru nastavení Atom (Preferences → Packages → linter-eslint → Settings ):
,"useGlobalEslint": false,"globalNodePath": "">Po nastavení editoru kódu, ESLint automaticky zkontroluje váš kód na chyby a poskytne pokyny pro styl. To výrazně zlepší váš výkon a pomůže vám dodržovat osvědčené postupy při vývoji.
Kontrola kódu před obchodem
Ke konfiguraci ověření kódu před commitem lze použít před-commit Hook, který se automaticky spustí před spuštěním příkazu git commit. V takovém případě, pokud máte v projektu nainstalovaný eslint, provede se kontrola kódu pomocí konkrétního konfiguračního souboru před konverzí.
Pro přidání před-commit-Hooku do vašeho projektu stačí vytvořit soubor .git/hooks / pre-commit, který zadá příkaz k ověření kódu. Pokud například používáte eslint, můžete v souboru pre-commit zadat následující příkaz:
"npm run lint"
Před každou zprávou se tedy automaticky spustí příkaz, který spustí eslint ' a a ověří kód, aby splňoval určitá pravidla. Pokud v důsledku kontroly eslint vydá chyby, pak se commit neprovede a zobrazí se zpráva s popisem nalezených problémů. To umožní včas identifikovat potenciální chyby a opravit je, než se dostanou do hlavní větve kódu a ovlivní fungování celého projektu.
Integrace s CI/CD systémem
Aby byla nastavená pravidla eslint použita v procesu CI / CD, je třeba provést několik kroků. Nejprve se ujistěte, že je eslint nainstalován v prostředí, ve kterém bude proces CI/CD probíhat. Pokud není nainstalován eslint, spusťte příkaz:
npm install eslint --save-devDále vytvořte konfigurační soubor eslint (.eslintrc nebo .eslintrc.js) s potřebnými pravidly a možnostmi. Ujistěte se, že je tento soubor v kořenovém adresáři vašeho projektu.
V konfiguračním souboru CI / CD systému (např.gitlab-ci.yml pro GitLab CI/CD nebo .travis.yml pro Travis CI) přidejte další krok, který provede kontrolu kódu pomocí eslint:
script:- eslint .V tomto příkladu se příkaz eslint provádí pro aktuální adresář (v tomto případě je to kořenový adresář projektu). Pokud jsou vaše zdroje umístěny jinde, můžete změnit cestu k adresáři.
Nyní, při každém spuštění procesu CI/CD, bude eslint automaticky spuštěn a zkontrolován váš kód tak, aby odpovídal nastaveným pravidlům. Pokud kód není v souladu s pravidly, proces CI/CD bude přerušen a obdržíte odpovídající chybu nebo varování.
Integrace eslint s CI/CD systémem vám tedy umožňuje automaticky sledovat kvalitu vašeho kódu v každé fázi vývoje a zajistit konzistenci stylu kódování ve vašem projektu.
Konfigurace ESLint pro projekt sestavení
Při nastavování eslint pro projekt sestavení existuje několik funkcí, které stojí za pozornost. Nejprve se musíte ujistit, že v adresáři projektu je nainstalován balíček ESLint. K tomu můžete použít správce balíčků npm nebo yarn:
- Instalace pomocí npm: npm install eslint --save-dev
- Instalace pomocí yarn: yarn add --dev eslint
Po instalaci balíčku ESLint je nutné vytvořit konfigurační soubor .eslintrc.js nebo .eslintrc.json v kořenovém adresáři projektu. Tento soubor určuje pravidla linteru a nastavení projektu:
module.exports = ,extends: 'eslint:recommended',parserOptions: ,rules: ,>;Tento příklad používá základní konfiguraci výchozího linteru, která pokrývá širokou škálu pravidel kontroly kódu. Svá pravidla však můžete definovat v sekci "rules", aby Linter odpovídal vašim potřebám.
Kromě toho se při použití sběrače projektů, jako je Webpack nebo Gulp, doporučuje použít pluginy k integraci ESLint do procesu sestavení. To vám umožní automaticky zkontrolovat kód při každém sestavení projektu.
Například pro integraci ESLint do procesu sestavení pomocí Webpack lze použít plugin eslint-webpack-plugin . Chcete-li jej nainstalovat, musíte provést příkaz:
- Instalace pomocí npm: npm install eslint-webpack-plugin --save-dev
- Instalace pomocí yarn: yarn add --dev eslint-webpack-plugin
Po instalaci pluginu jej lze připojit v konfiguraci Webpack následovně:
const ESLintPlugin = require('eslint-webpack-plugin');module.exports = ),],>;Tímto způsobem ESLint automaticky zkontroluje kód při každém sestavení projektu, což pomůže vyhnout se chybám a udržovat jednotný styl kódování.
Doporučení pro používání ESLint
1. Nainstalujte ESLint do svého projektu: Nainstalujte balíček ESLint pomocí npm nebo yarn a inicializujte nový soubor .eslintrc pro přizpůsobení pravidel lintingu pro váš projekt.
2. Upravte pravidla: Při nastavování pravidel ESLint můžete použít jednu z předem připravených konfigurací, jako je Airbnb nebo Google. Nezapomeňte se podívat na všechna varování a chyby, které se objeví při prvním spuštění, a rozhodněte se, která z nich chcete ponechat nebo zakázat.
3. Integrujte ESLint do svého IDE: Nainstalujte plugin ESLint pro své oblíbené integrované vývojové prostředí (IDE) nebo textový editor. To vám umožní vidět chyby a varování přímo ve vašem kódu, což usnadní proces vývoje.
4. Zapněte ESLint do svého pracovního postupu: Spusťte ESLint před odesláním vašeho kódu do systému řízení verzí, abyste zajistili vysokou kvalitu vašeho kódu a dodržení stylů.
5. Opravte chyby, jak se objeví: ESLint nejen vydává varování, ale také může některé z nich automaticky opravit. Tuto funkci však musíte aktivně používat, aby váš kód zůstal čistý a jednotný.
6. Pravidelně aktualizujte pravidla: Postupně aktualizujte pravidla ESLint, abyste využili nové možnosti a zohlednili změny v normách JavaScriptu. To pomůže vašemu kódu zůstat aktuální a moderní.
Dodržování těchto pokynů vám pomůže učinit váš kód čitelnějším, homogennějším a bez potenciálních chyb. Nezapomeňte, že ESLint je pouze nástroj, který vám pomůže v procesu vývoje a není konečným cílem. Použijte jej ve spojení s dalšími nástroji a typizací ke zlepšení procesu vývoje aplikací JavaScript.