Angular je jedním z nejoblíbenějších rámců pro vývoj webových aplikací. Umožňuje vám vytvářet výkonné a škálovatelné aplikace pomocí TypeScriptu. Abyste však ze svého kódu vytěžili maximum, musíte sledovat jeho kvalitu a dodržovat určité standardy psaní kódu.
V tomto kontextu se nástroj Eslint stává neocenitelným pomocníkem. Umožňuje vám zkontrolovat kód, aby odpovídal určitým pravidlům a normám, a také automaticky opravit některé typické chyby. V tomto článku se podíváme na to, jak nakonfigurovat Eslint ve vývojovém prostředí Visual Studio Code (VSCode) pro projekty na Angular.
Prvním krokem je nastavení nezbytných závislostí. Pro práci s eslint v angular projektu budeme potřebovat dvě hlavní závislosti-Eslint a Typescript. Můžete je nainstalovat spuštěním následujících příkazů v terminálu:
npm install eslint typescript --save-devPo instalaci závislostí je nutné nakonfigurovat konfigurační soubor Eslint. Chcete-li to provést, vytvořte soubor .eslintrc.json v kořenovém adresáři projektu a přidejte do něj následující kód:
Nyní, když je eslint nakonfigurován v projektu, je nutné jej nakonfigurovat ve vývojovém prostředí VSCode. K tomu budete muset nainstalovat rozšíření Eslint pro VSCode. Chcete-li nainstalovat rozšíření, přejděte na kartu Extensions v postranním panelu VSCode, do vyhledávacího pole zadejte "ESLint" a nainstalujte rozšíření vyvinuté společností Microsoft.
Nastavení Eslint na VSCode pro Angular
V této části se podíváme na to, jak nastavit ESLint ve Visual Studio Code (VSCode) pro angular projekty.
- Nainstalujte rozšíření Eslint pro VSCode. Otevřete VSCode a přejděte na kartu "Extensions". Do vyhledávacího pole zadejte "ESLint" a vyhledejte rozšíření vyvinuté pro Microsoft. Klepnutím na tlačítko" Install " jej nainstalujete.
- Nainstalujte ESLint do svého projektu Angular. Otevřete terminál ve VSCode a spusťte následující příkaz: ng add @angular-eslint/schematics . To přidá potřebné závislosti a nastavení pro použití ESLint ve vašem projektu Angular.
- Vytvořte soubor s nastavením ESLint. V kořenové složce vašeho projektu Angular vytvořte soubor s názvem".eslintrc.json". V tomto souboru můžete určit pravidla a nastavení, která chcete použít na svůj kód.
- Nakonfigurujte rozšíření Eslint na VSCode. Otevřete soubor nastavení VSCode (File > Preferences > Settings), vyhledejte sekci "ESLint" a nastavte "ESLint: Auto Fix On Save" na true. To umožní automaticky opravit některé chyby při ukládání souboru.
- Restartujte VSCode. Jakmile provedete nastavení, restartujte VSCode, aby se změny projevily.
- Nastavte pravidla ESLint pro váš projekt Angular. V souboru."eslintrc.json " můžete určit konkrétní pravidla, která by se měla vztahovat na váš projekt. Můžete například zadat přísné požadavky na odsazení, použít středník nebo zakázat používání nepoužívaných proměnných.
- Nastavte Eslint Ignored na VSCode. Pokud chcete vyloučit některé soubory nebo adresáře z analýzy ESLint, můžete je přidat do souboru nastavení VSCode. Chcete-li to provést, vyhledejte sekci "ESLint: Ignore" v souborech nastavení VSCode a přidejte příslušné cesty.
Váš projekt Angular je nyní nakonfigurován tak, aby používal ESLint ve VSCode. V souboru můžete nakonfigurovat další pravidla a nastavení."eslintrc.json", aby vyhovoval vašim požadavkům a stylu kódování.
Instalace Eslint a jeho závislostí
Chcete-li nastavit Eslint v projektu Angular, budete potřebovat následující závislosti:
- Terminál (pro provádění příkazů)
- Node.js (nejlepší je nainstalovat nejnovější verzi LTS)
Než nainstalujete Eslint, musíte vytvořit projekt Angular:
- Otevřete terminál a spusťte následující příkaz:
ng new my-angular-app- Přejděte do složky s novým projektem:
cd my-angular-appPo vytvoření projektu a přechodu do jeho složky můžete začít instalovat Eslint a jeho závislosti:
- Spusťte následující příkaz pro instalaci Eslint:
npm install eslint --save-dev- Poté nainstalujte Eslint Plugin pro Angular:
npm install @angular-eslint/eslint-plugin --save-dev- Dále nainstalujte Eslint Parser pro TypeScript:
npm install @typescript-eslint/parser --save-devPo úspěšné instalaci všech závislostí můžete začít konfigurovat konfiguraci Eslint pro váš projekt Angular.