Jak nastavit ESLint v Atomu, abyste mohli přispívat do Open Source

Nejedná se o vlákno, které dostanete z vlny.

Pokud chcete přispět k projektům s otevřeným zdrojovým kódem, jako je bezplatný kódový tábor, musíte nejprve nastavit linting.

Většina projektů má své vlastní styly standardů pro JavaScript a ty budou automaticky vynucovány pomocí linovacích nástrojů, jako je ESLint.

Připravme ESLint pro provoz v Atomu, jednom z nejpopulárnějších editorů kódů.

Než začneme, zde je krátký heads-up, který uvedu několik předpokladů:

  • Řídili jste se pokyny pro příspěvky k bezplatnému táboru až do té části, ve které je přečteno nastavení Linting.
  • Nainstalovali jste tedy nezbytné předpoklady (zejména Node.js a npm).
  • Máte alespoň základní znalosti o používání příkazového řádku a gitu.
  • Používáte Atom jako textový editor (ačkoli tento článek by měl být užitečný, i když nejste - stačí si prostudovat dokumentaci svého textového editoru, kde najdete pokyny týkající se ESLint)

Co přesně je podšívka?

"Linting je proces spuštění programu, který bude analyzovat kód pro možné chyby." - Oded on Stack Overflow

A ESLint je lintingový nástroj specifický pro JavaScript kód. Pomocí ESLint najdete problematický kód („chyby“) napsaný v JavaScriptu.

Mimochodem, „ES“ v názvu ESLint pochází z „ECMAScript“, což je oficiální název hlavního jazyka JavaScript.

Představte si ESLint jako vaši babičku, která vám říká, jak žít svůj život. Poukazuje na vaše chyby a řekne vám, abyste je vyčistili. Posloucháš babičku, protože babička ví.

Tyto „chyby“ mohou být objektivní, což znamená, že jsou způsobeny kódem, který neodpovídá, řekněme, syntaxi JavaScriptu (nebo jakémukoli programovacímu jazyku, který používáte). Tímto způsobem byste řekli, že linter zaznamenává chyby syntaxe.

Říkám „objektivní chyby“, protože tyto chyby jsou vlastní kódu JavaScript. Pokud na konci deklarace proměnné vynecháte středník, je to podle autorů JavaScriptu objektivně chyba - i když to nezastaví běh programu (viz automatické vkládání středníku).

Nebo tyto chyby mohou být subjektivní, což znamená, že jste (nikoli technická komise 39, orgán pro standardy ECMAScript) definovali soubor pravidel, podle kterých by se váš kód měl řídit. Tato pravidla kódování jsou obvykle shrnuta v průvodci stylem JavaScriptu, což je dokument, který deklaruje určitý druh nejlepší praxe kódování. Zdarma kódový tábor mezi mnoha dalšími softwarovými projekty používá průvodce stylem.

Průvodce skriptem jazyka JavaScript společnosti Airbnb je jedním z nejpopulárnějších pro vývojáře jazyka JavaScript a průvodce stylem Free Code Camp je založen na něm.

Účelem průvodce stylem je mít „standard psaní“, který vývojáři vašeho projektu dodržují, aby udržoval kód čistý, jednoduchý a konzistentní. To je podobné konceptu novinářů AP Stylebook. Jediným rozdílem je, že AP Stylebook je průvodce stylem anglické gramatiky, zatímco průvodce stylem Airbnb je pro JavaScript.

Jakmile si ujasníte, jak by měl být kód napsán pro váš softwarový projekt (což znamená, že jste si vybrali průvodce stylem nebo vytvořili vlastní), jste připraveni nastavit pravidla pro linkování pro ESLint.

Způsob, jakým ESLint funguje, je, že mu řeknete, jaká pravidla (tj. Berete svá pravidla průvodce stylem a převádějí je na pravidla lintingu), o kterých by měla vědět a na co by měla dávat pozor, takže ESLint vás může klepnout na rameno a dát vám vědět když píšete problematický kód.

Chcete-li sdělit společnosti ESLint pravidla týkající se linlování, nakonfigurujete je v konfiguračním souboru s názvem.eslintrc nebo eslintConfig nebo package.json, který ESLint vyhledá a přečte automaticky. A jak se vyvíjíte, ESLint vás upozorní na problémový kód, který tato pravidla nedodržuje, takže můžete provádět revize - při kódování. Což je jako mít s vámi babičský párový program.

V případě, že ESLint svítí, je „navržen tak, aby byl zcela konfigurovatelný, což znamená, že můžete vypnout každé pravidlo a spustit pouze se základním ověřením syntaxe, nebo můžete kombinovat svázaná pravidla a svá vlastní pravidla, aby byla ESLint perfektní pro váš projekt.“ V jiných slova, která můžete kombinovat jak objektivní, tak subjektivní.

Pokud jde o linkovací nástroje JavaScript, máte možnosti, ale v tomto článku se zaměřujeme na ESLint, protože Free Code Camp to specifikuje ve svých pokynech pro příspěvky. A jinde se používá.

Máte také možnosti, pokud jde o průvodce stylem JavaScriptu. Airbnb's je dobré se s ním seznámit, protože v době psaní tohoto textu má na GitHubu více než 45 000 hvězd a jeho používání se neustále zvyšuje.

Nastavení obložení pro volný kódový tábor

ESLint lze nainstalovat dvěma způsoby: globálně a lokálně. Zaměříme se na jeho lokální instalaci, což znamená pro váš lokální pracovní adresář, tj. Klonované úložiště Free Code Camp.

1: Otevřete svůj klon Free Code Camp v textovém editoru (předpokládá se, že jste skutečně klonovali Free Code Camp do počítače)

2: V Terminálu cd (změňte adresář) do adresáře Free Code Camp

3: Zadejte npm install eslint --save-dev do Terminal

4: V textovém editoru Atom přejděte na Předvolby >> Instalovat >> a do vyhledávacího pole Hledat balíčky zadejte linter-eslint.

Poznámka: Balíčky Atom můžete také nainstalovat z příkazového řádku pomocí příkazu apm. Viz tyto pokyny jako příklad.

5: Nainstalujte linter-eslint a linter.

6: V adresáři Free Code Camp zavřete všechny soubory .js a znovu otevřete

A teď, když píšete JavaScript, měli byste vidět, že ESLint funguje!

Poznámka: Vynechal jsem důležitý krok: konfiguraci ESLint, to je část, ve které přizpůsobujete ESLint a sdělte jí o svých pravidlech pro vkládání. Udělal jsem to, protože když klonujete úložiště Free Code Camp, již se dodává s konfiguračními soubory ESLint, například viz eslintrc a package.json. A tak nemusíte dělat žádnou vlastní konfiguraci.

V případě, že pracujete na projektu, kde potřebujete nakonfigurovat ESLint, poukazuji na následující odkazy:

  • Konfigurace ESLint.
  • Začínáme s ESLint v1.0
  • npm, eslint
  • Rozšiřitelná sdílená konfigurace AirLnb společnosti Airbnb

Zabalení:

  1. Linting je proces kontroly problematického kódu.
  2. ESLint je jeden takový nástroj, který provádí linting.
  3. ESLint může být skvělým nástrojem pro učení, protože vás nutí psát čistý, konzistentní kód a rozvíjet dobré zvyky při kódování.
  4. Mnoho open source projektů vás žádá o spuštění ESLint.
  5. V textovém editoru byste měli mít nastavený program ESLint, abyste mohli přispívat do Free Code Camp.
  6. Pokud nepoužíváte Atom, podívejte se do dokumentů svého textového editoru, jak nainstalovat ESLint.
  7. Zůstaňte v kurzu.

Pokud máte nějaké dotazy, můžete mě tweetovat na @gilbertginsberg nebo mě najít na GilbertIndex.