Jak spustit ESLint pomocí předzávěru

Aktualizace: Existuje lepší způsob, jak do projektu přidat háčky s předběžným potvrzením. Pokladna husky. Můžete se podívat na níže uvedený tutoriál a naučit se, jak ručně přidávat předzávěry.

Než půjdeme dopředu, ráda bych poskytla trochu zázemí pro předvázací háček ESLint a Git. Pokud je znáte, můžete přeskočit následující dvě sekce.

ESLint

Zdroj obrázku: https://library.io/atom/linter-plus-eslint

Vývojáři mají sklon k chybám při kódování. Například byste mohli zapomenout zavřít závorku nebo byste nakonec mohli vytvořit proměnnou, která již existuje. Chyby, jako je tento, však mohou skončit přerušením aplikace nebo webu. Tento kód buggy bychom mohli poslat do cloudového úložiště nebo k vyřešení problémů způsobených těmito chybami může trvat značné množství času. Pokud bude váš kód přezkoumáván, zabere by to vašim recenzentům čas na nalezení takových nedbalých chyb, nebo by jim mohli úplně uniknout.

To je místo, kde obložení přichází na obrázek. Linting je proces spuštění programu, který bude analyzovat kód pro možné chyby. Pro vyrovnání takových potenciálních chyb používáme Linters.

Linters pomáhají při vývoji vývojáře psát čistý kód. Každý jazyk by mohl mít své vlastní lintery, které by zvýraznily jejich kód. Zde je odkaz, který se mi líbil a který obsahuje některé dobré ukazatele pro psaní čistšího kódu:
https://github.com/showcases/clean-code-linters

Mezi nimi budeme konkrétně hovořit o ESLint, který je moderním linkovacím nástrojem pro vložení JavaScriptu / ECMAScriptu 6. Podle popisu na jejich webových stránkách

ESLint je otevřený zdrojový program pro vkládání JavaScriptu, který původně vytvořil Nicholas C. Zakas v červnu 2013. Vyrovnávání kódu je typ statické analýzy, která se často používá k nalezení problematických vzorců nebo kódu, který nedodržuje určité pokyny pro styl.

Jednoduše řečeno, používá se k ověření souborů JavaScriptu proti možným chybám. „ES“ v ESLint znamená ECMAScript. Můžete vytvořit konfigurační soubor .eslintrc a určit pravidla, podle kterých chcete ověřit svůj kód. Svůj kód můžete nechat zapnout za chodu v požadovaném editoru (zkontrolujte, zda existuje plugin / API pro integraci ESLint s vaším editorem), nebo jej můžete uvolnit pomocí nástrojů příkazového řádku. Volba je na tobě. Dávám přednost linlování za běhu.

Git předzávazkový háček

Zdroj obrázku: http://www.sterlinghamilton.com/git-hook-pre-commit-for-debug-comments/

Když jsem diskutoval o ESLint, dal jsem příklad zmínkou o tom, že vývojář by mohl skončit tlačením kódu buggy, i když kód není platný. I když jste nastavili linter, může vás chránit před neplatným kódem, ale nemůže vás chránit před tlačením tohoto neplatného kódu na repo. Potřebujeme mechanismus, který přestane tlačit takový kód na repo.

To je místo, kde Git předběžně zavěsí háček. Bude blokovat vývojáři v odevzdání kódu, pokud nesplní pravidla stanovená háky dostupnými v .git / hooks. Tyto háčky mají být spustitelné.

Vezměte prosím na vědomí, že háček Git pre-commit lze použít pro více než jen ověření vašeho kódu. Informace o Git Hooks naleznete na https://git-scm.com/book/gr/v2/Customizing-Git-Git-Hooks

ESLint Git předvázací háček

Použil bych existující skript https://gist.github.com/linhmtran168/2286aeafe747e78f53bf

Níže jsou kroky, které jsem následoval, abych nepouští JavaScript / ES6, než jsem se zavázal:

  1. Pokud jste pro svůj repo neinicializovali git, proveďte to příkazem:
    git init
  2. Ve složce projektu byste měli vidět složku .git.
  3. Přejděte na .git / hooks. Uvidíte soubor s názvem pre-commit.sample
  4. Přejmenujte tento soubor na předběžný závazek
  5. Odeberte existující ukázkový kód.
  6. Upravil jsem skript https://gist.github.com/linhmtran168/2286aeafe747e78f53bf podle iamjochemova komentáře v Gist a vytvořil jsem svůj vlastní Gist, abych ho použil s ESLint.
    https://gist.github.com/rashtay/328da46a99a9d7c746636df1cf769675
  7. Spusťte chmod + x .git / hooks / pre-commit, aby se stal spustitelným souborem.
  8. Voila!

Rád bych slyšel zpětnou vazbu / návrhy na zlepšení.