ESLint: Základné fakty o základných nástrojoch front-endu

V poslednej dobe sa viac zapájam do front-end vývoja. Čím viac toho robím, tým viac sa moja myseľ a moja duša strácajú v chaotickom svete. Aj jednoduchá aplikácia To-Do – List môže ľahko vyžadovať množstvo nástrojov - ESLint, Babel, Webpack, aby sme vymenovali aspoň niektoré - a balíčky iba na začiatok.

Našťastie existuje veľa štartovacích súprav, takže nemusíme robiť všetko od základov. Vďaka nim je všetko už nastavené, takže môžeme ihneď začať písať prvý riadok kódu. Šetrí čas pri opakujúcich sa nudných úlohách, čo môže byť skvelé pre skúsených vývojárov.

Táto výhoda však prichádza s cenou pre začiatočníkov. Keďže všetko funguje po vybalení z krabice, zdá sa to ako kúzlo a možno by nevedeli, čo sa skutočne deje pod kapotou, čo je na istej úrovni dôležité pochopiť. Aj keď krivka učenia nie je taká strmá ako iné - skúste to porovnať s niektorými nástrojmi, ktoré ste sa učili a používali, získate, čo mám na mysli - v tomto chaotickom svete potrebujeme na cestu sprievodcu prežitím.

Táto séria bude obsahovať základné nástroje front-end vývoja a to, čo o nich musíme vedieť. To nám umožní vládnuť nad nástrojmi namiesto toho, aby boli nimi riadené.

V ňom sa zameriame na skúsenosti vývojárov každého z týchto nástrojov. Cieľom tejto série je teda slúžiť ako sprievodca prežitím a poskytnúť prehľad o všetkých nástrojoch na vysokej úrovni, nie slúžiť ako dokumentácia.

Čo bude zahrnuté:

  • ESLint <- Sme tu
  • Babel
  • Webpack
  • Prietok
  • Strojopis
  • Jest.

Dosť na úvod, začnime s prvým nástrojom: ESLint.

Čo je ESLint a prečo by sme ho mali používať?

ESLint je, ako už z názvu vyplýva, filtrom pre ECMAScript. A definícia lintera je:

stroj na odstraňovanie krátkych vlákien z bavlníkových semien po odzrnení.

Aj keď kód a bavlníkové semienka nemajú žiadny vzťah, bez ohľadu na kód alebo bavlníkové semiačka, fliaš pomôže, aby boli veci čistejšie a konzistentnejšie. Nechceme vidieť tento kód:

const count = 1; const message = "Hello, ESLint" count += 1 

Obe vyzerajú škaredo a majú chybu. Tu je krok, keď s tým pomôže spoločnosť ESLint. Namiesto toho, aby sme pri spustení kódu mohli chybu vyhodiť na konzolu prehliadača, ESLint ju zachytí pri písaní (teda nie, naozaj: budeme na to potrebovať editor alebo IDE prípony, ktorým sa budeme venovať neskôr).

Samozrejme, nie je ťažké zistiť túto chybu, ale nebolo by krajšie mať asistenta, ktorý nám pripomína, vždy keď sa chystáme urobiť chybu a možno ju automaticky opraviť? Aj keď ESLint nedokáže zachytiť všetky druhy chýb, ušetrí nám to aspoň trochu úsilia, aby sme mohli tráviť čas inými vecami, na ktorých záleží a ktoré vyžadujú ľudskú pozornosť.

Ako funguje ESLint?

Teraz, keď vieme, čo je ESLint a prečo to potrebujeme, poďme trochu hlbšie a skontrolujte, ako funguje. V podstate to môžeme rozdeliť na tri veľké kroky.

Analyzátor

Kód, ktorý napíšeme, nie je nič iné ako postupnosť znakov. Táto postupnosť však nie sú len náhodné znaky: musia sa riadiť súborom pravidiel alebo konvencií, ktorými je gramatika formujúca jazyk.

Pre človeka nám prechod od čítania textu alebo kódu k ich koncepčnému pochopeniu vyžaduje len málo úsilia. Pre počítač je to oveľa ťažšie dosiahnuť. Napríklad:

const tool = 'ESLint' // 1 const tool = "ESLint" // 2 

Keď čítame dva riadky vyššie, okamžite vieme, že sú identické a dajú sa čítať ako „existuje konštanta pomenovaná toolhodnotou ESLint“. Pre počítač, ktorý nechápe význam, vyzerajú tieto dva riadky celkom inak. Výsledkom je, že ak načítame nespracovaný kód do aplikácie ESLint, je takmer nemožné urobiť čokoľvek.

Keď sa veci skomplikujú a bude ťažké komunikovať - ​​premýšľajte, ako môžeme mať počítač, aby sme pochopili, čo robíme - abstrakcia môže byť únikom. Abstrakciou veci skryjeme všetky nepotrebné detaily, znížime hluk a udržíme všetkých na jednej stránke, čo uľahčuje komunikáciu. Vo vyššie uvedenom príklade nezáleží na jednej medzere alebo dvoch medzerách, ani na jednoduchých úvodzovkách alebo dvojitých úvodzovkách.

Inými slovami, to je to, čo analyzátor robí. Konvertuje nespracovaný kód na abstraktný syntaxový strom (AST) a tento AST sa používa ako médium, na ktorom sa môžu zakladať pravidlá pre vlákna. Existuje ešte veľa krokov, ktoré musí syntaktický analyzátor urobiť, aby vytvoril AST - ak sa chcete dozvedieť viac o tom, ako sa generuje AST, táto príručka má dobrý prehľad.

Pravidlá

Ďalším krokom v tomto procese je spustenie AST prostredníctvom zoznamu pravidiel. Pravidlo je logikou toho, ako zistiť možné existujúce problémy v kóde od AST. Tu uvedené problémy nemusia byť nevyhnutne syntaktické alebo sémantické chyby, ale môžu to byť aj štylistické chyby. Výstup rozdaný z pravidla bude obsahovať niektoré užitočné informácie pre neskoršie použitie, ako sú riadky kódu, polohy a informatívne správy o probléme.

Okrem zachytávania problémov môže pravidlo podľa možnosti dokonca automaticky opraviť kód. Napríklad, ak sa na vyššie uvedený kód nepoužije viacnásobné medzery, upravia sa všetky nadbytočné medzery, čo spôsobí, že kód bude vyzerať čistý a konzistentný.

 const tool = "ESLint" // 2 // becomes const tool = "ESLint" // 2 

V rôznych scenároch môže byť pravidlo použité na rôznych úrovniach - odhlásené, iba varovné alebo striktné - a má rôzne možnosti, ktoré nám poskytujú kontrolu nad tým, ako toto pravidlo používať.

Výsledok

Týmto sa končí proces. Pri výstupe z pravidla ide len o to, ako ho zobrazíme ľudsky priateľským spôsobom, a to vďaka všetkým užitočným informáciám, ktoré sme už spomenuli. Potom z výsledku môžeme rýchlo poukázať na problém, kde je, a urobiť nápravu, alebo možno nie.

Integrácia

ESLint možno použiť ako samostatný nástroj s robustným rozhraním CLI, ale je to holý spôsob použitia ESLint. Nechceme zadávať príkaz zakaždým, keď chceme vložiť kód, najmä vo vývojovom prostredí. Riešením je integrovať ESLint do nášho vývojového prostredia, aby sme mohli písať kód a vidieť problémy zachytené ESLintom na jednom mieste.

Tento druh integrácie pochádza z rozšírení špecifických pre IDE alebo editorov. Tieto rozšírenia vyžadujú, aby ESLint fungoval, pretože fungujú na pozadí ESLint - niet divu, že spolu s nimi musíme ešte nainštalovať ESLint, bez ESLintu však nie sú ničím. Tento princíp platí pre ďalšie IDE alebo editorské rozšírenia, ktoré denne používame.

Pamätáte si výstup z pravidla, o ktorom sme hovorili vyššie? Prípona ho použije na zobrazenie v IDE alebo editore. To, ako presne sa výstup zobrazí, závisí od toho, ako je rozšírenie implementované a ako je IDE alebo editor otvorený pre svoje rozšírenia. Niektoré rozšírenia tiež využívajú možnosti opravy problémov z pravidiel na zmenu kódu pri uložení, ak to povolíme.

Konfigurácia

Konfigurácia je hlavná sila, ktorá dáva nástroju všestrannosť. ESLint sa od toho nelíši, až na to, že má najkomplexnejšiu konfiguráciu spomedzi ostatných nástrojov. Všeobecne potrebujeme súbor alebo miesto na umiestnenie konfigurácie a je tu niekoľko možností.

Všetky sa dajú zredukovať na dva hlavné spôsoby: buď máme pre každý nástroj samostatný konfiguračný súbor, alebo ich všetky zoskupíme package.json.  .eslintrc.jsje jeden zo súborov, ktoré bude ESLint hľadať pre svoju konfiguráciu, a tiež ten s najvyššou prioritou.

Ďalšia vec, ktorú musíme o konfigurácii vedieť, je jej hierarchia a kaskádové správanie. Vďaka týmto funkciám nemusíme mať konfiguračný súbor v každom priečinku projektu.

Ak konfiguračný súbor neexistuje v priečinku, ESLint jednoducho vyhľadá rodiča priečinka, kým ho nenájde. Potom sa vráti k predvolenej konfigurácii pre používateľa v ~/.eslintrc. V opačnom prípade konfiguračný súbor pridá alebo prepíše súbory na vyšších úrovniach.

Je v tom však zvláštna vychytávka. Ak zadáme root: truev konfiguračnom súbore, vyhľadávanie sa zastaví na danom súbore namiesto toho, aby išlo hore ako predtým. Okrem toho bude ESLint používať tento konfiguračný súbor ako konfiguráciu root a všetky podradené konfigurácie budú založené na tomto.

To sa neobmedzuje iba na ESLint - tieto veci sú spoločné pre iné nástroje. Hovorme o konfigurácii špecifickej pre ESLint.

Analyzátor

Úloha syntaktického analyzátora v ESLint bola diskutovaná vyššie. Štandardne používa ESLint ako analyzátor Espree. Tento parser môžeme zmeniť na iný kompatibilný, ako napríklad babel-eslint alebo @ typecript-eslint / parser, ak použijeme Babel alebo Typescript.

Na konfiguráciu syntaktického analyzátora používame parserOptions. Medzi možnosťami podporovanými spoločnosťou Espree sú niektoré, ktoré často používame a je potrebné im venovať pozornosť:

  • ecmaVersion

Funkciám, ktoré chceme používať, musíme určiť príslušnú verziu ECMA. Napríklad ak emcaVersion: 5, kód uvedený nižšie poskytne určité chyby.

```javascript let a = [1, 2, 3, 4] // error due to `let` keyword var b = [...a, 5] // error due to spread syntax ``` 

Analyzátor nemôže analyzovať kód, pretože letsyntax kľúčového slova a šírenia boli práve zavedené v ES6. Pri zmene emcaVersionna hodnotu 6 alebo vyššiu sa chyby jednoducho vyriešia.

  • sourceType

V dnešnej dobe väčšinou všetko píšeme do modulov a potom ich spájame dokopy. Táto možnosť by teda väčšinou mala byť module.

Ďalšou hodnotou, ktorú môžeme použiť - rovnako ako predvolenú hodnotu - je script. Rozdiel je v tom, či môžeme použiť moduly JS alebo nie, tj použitie importa exportkľúčové slovo. Keď nabudúce dostaneme toto chybové hlásenie Parsing error: 'import' and 'export' may appear only with 'sourceType: module', vieme, kde hľadať.

  • ecmaFeatures.jsx

Môžu existovať ďalšie funkcie ES, ktoré chceme použiť, napríklad syntax JSX. ecmaFeatures.jsx: trueTúto funkciu používame na povolenie. Upozorňujeme, že podpora JSX od spoločnosti Espree nie je rovnaká ako podpora JSX v React. Ak chceme React specific JSX, mali by sme pre lepšie výsledky použiť eslint-plugin-react.

Ak použijeme iný syntaktický analyzátor, tieto možnosti sú viac-menej rovnaké. Niektoré môžu mať menej možností a iné môžu mať viac, ale všetky sú definované v časti parserOptions.

Životné prostredie

Závisí to od toho, kde je spustený kód: existujú rôzne preddefinované globálne premenné. Máme window, documentv prehliadači, napr. Bolo by nepríjemné, keby bolo povolené pravidlo ne-undef, a ESLint nám to stále hovorí windowalebo documentnie je definované.

Je envtu možnosť pomôcť. Zadaním zoznamu prostredí bude ESLint vedieť o globálnych premenných v týchto prostrediach a nechajme ich bez slova používať.

K dispozícii je špeciálny prostredie, musíme si uvedomiť, es6. Implicitne sa nastaví parserOptions.ecmaVersionna 6 a povolia sa všetky funkcie ES6, s výnimkou modulov, ktoré stále musíme používať parserOptions.sourceType: "module"osobitne.

Pluginy a zdieľateľné konfigurácie

Rovnaká konfigurácia pravidiel pre rôzne projekty môže byť namáhavá. Našťastie môžeme konfiguráciu znova použiť a iba podľa potreby prepíšeme pravidlá extends. Tento typ konfigurácie nazývame zdieľateľné konfigurácie a ESLint pre nás už má dve: eslint:recommendeda eslint:all.

Zdieľané konfigurácie ESLintu majú zvyčajne eslint-configpredponu, takže ich môžeme ľahko nájsť pomocou NPM s eslint-configkľúčovým slovom. Medzi stovkami výsledkov sú niektoré populárne, napríklad eslint-config-airbnb alebo eslint-config-google.

ESLint má po vybalení zopár pravidiel, ktoré slúžia na rôzne účely, od možných chýb, najlepších postupov, ES6 až po štylistické problémy. Na zvýšenie svojich schopností má ESLint navyše veľké množstvo pravidiel tretích strán, ktoré poskytuje takmer tisíc doplnkov. Podobne ako zdieľateľné konfigurácie, aj doplnky ESLint majú predponu eslint-plugina sú k dispozícii na NPM s eslint-pluginkľúčovým slovom.

Plugin definuje množinu nových pravidiel a vo väčšine prípadov zverejňuje svoje vlastné užitočné konfigurácie. Napríklad eslint-plugin-react nám dáva dve zdieľateľné konfigurácie, eslint-plugin-react:recommendeda eslint-plugin-react:allto ako eslint:recommendeda eslint:all. Ak chcete použiť jeden z nich, musíme najskôr definovať názov doplnku a potom rozšíriť konfiguráciu.

{ plugins: ["react"], extends: "plugin:react/recommended" } // Note that we need to prefix the config by `plugin:react` 

Častou otázkou je, aké doplnky alebo konfigurácie sa majú použiť. Aj keď to do veľkej miery závisí od našich potrieb, môžeme použiť program Awesome ESLint ako referenciu na vyhľadanie užitočných doplnkov a konfigurácií.

Krajšie

Už sme skoro tam - takmer sme sa dostali na koniec. V neposlednom rade si povieme niečo o populárnej dvojici ESLint, Prettier. Stručne povedané, Prettier je názorný formátovač kódu. Aj keď je možné Prettier použiť samostatne, jeho integrácia do ESLint výrazne vylepšuje zážitok a eslint-plugin-hezčí robí túto prácu.

Rozdiel medzi používaním samotného Prettier a používaním Prettier s ESLint možno zhrnúť do formátu kódu ako problém. Namiesto toho, aby ste problémy s formátom uvádzali osobitne, bude spustenie programu Prettier s ESLint zaobchádzať s problémami s formátom rovnako ako s inými problémami. Tieto problémy sú však vždy opraviteľné, čo sa rovná formátovaniu kódu.

Tak to eslint-plugin-prettierfunguje. Spúšťa program Prettier spravidla za scénou a porovnáva kód pred a po spustení programu Prettier. Napokon nahlási rozdiely ako jednotlivé problémy s ESLint. Na vyriešenie týchto problémov plugin jednoducho používa naformátovaný kód od spoločnosti Prettier.

Aby sme dosiahli túto integráciu, musíme si nainštalovať obidve prettiera eslint-plugin-prettier. eslint-plugin-prettiertiež prichádza s eslint-plugin-prettier:recommendedconfig - ktorý rozširuje eslint-config-krajší. Preto ho tiež musíme nainštalovať, eslint-config-prettieraby sme ho mohli používať.

{ "plugins": ["prettier"], "extends": "plugin:prettier/recommended" } 

Záver

Code linters alebo formatters sa stali de facto štandardom vo vývoji softvéru všeobecne, a ESLint, konkrétne vo front-end vývoji.

Jeho výhody idú ďaleko nad rámec toho, čo robí technicky, pretože pomáha vývojárom zamerať sa na dôležitejšie záležitosti. Vďaka delegovaniu štýlov kódu na stroj sa môžeme vyhnúť namysleným štýlom pri kontrole kódu a tento čas namiesto toho využiť na zmysluplnejšiu kontrolu kódu. Výhodou je aj kvalita kódu a získame tak konzistentnejší a menej náchylný na chyby.

Tento článok bol pôvodne uverejnený na mojom blogu .