de Steven Gilbert

Dacă doriți să contribuiți la proiecte open source precum Routech, mai întâi va trebui să configurați scame.

Majoritatea proiectelor au propriile lor standarde de stil pentru JavaScript, iar acestea vor fi puse în aplicare automat de instrumente de linting, cum ar fi ESLint.

Să configurăm ESLint pentru a rula Atom, unul dintre cei mai populari editori de cod.

Înainte de a începe, iată un head-up rapid pe care fac câteva presupuneri:

  • Ați urmat Ghidul de contribuție al Free Code Camp până la partea care citește Configurare Linting.
  • Așa că ați instalat necesarul premise (în special Node.js și npm).
  • Aveți cel puțin o înțelegere de bază despre utilizarea Linie de comanda și git.
  • Îl folosești Atom ca editor de text (deși acest articol ar trebui să fie util chiar dacă nu sunteți – ar trebui doar să îl verificați editor de text documentație pentru instrucțiuni privind ESLint)

Ce este mai exact scamele?

Linting este procesul de rulare a unui program care va analiza codul pentru eventuale erori. ” – Oded pe Stack Overflow

Și ESLint este o instrument de scame specific codului JavaScript. Folosiți ESLint pentru a găsi cod problematic („erori”) scris în JavaScript.

Apropo, „ES” din numele ESLint provine de la „ECMAScript”, care este numele oficial al limbajului JavaScript de bază.

Imaginați-vă ESLint ca bunica dvs. care vă spune cum să vă trăiți viața. Ea îți arată erorile și îți spune să le cureți. Îl asculți pe bunica, pentru că bunica știe.

Aceste „erori” pot fi obiectiv, ceea ce înseamnă că sunt cauzate de un cod care nu corespunde, să zicem, sintaxei JavaScript (sau a oricărui limbaj de programare pe care îl lint). În acest fel, ați spune că linterul detectează erori de sintaxă.

Spun „erori obiective”, deoarece aceste erori sunt inerente JavaScript în sine. Dacă lăsați un punct și virgulă la sfârșitul unei declarații variabile, aceasta este în mod obiectiv o eroare conform autorilor JavaScript – chiar dacă nu oprește programul dvs. de a rula (a se vedea inserție automată de punct și virgulă).

Sau aceste erori pot fi subiectiv, care înseamnă tu ai (nu Comitetul tehnic 39, corpul de standarde al ECMAScript) a definit un set de reguli pe care ar trebui să le respecte codul dvs. Aceste reguli de codificare sunt rezumate în mod obișnuit într-un Ghid de stil JavaScript, care este un document care declară un fel de bune practici de codificare. Free Code Camp printre multe alte proiecte software utilizează ghiduri de stil.

Airbnb’s Ghid de stil JavaScript este unul dintre cele mai populare pentru dezvoltatorii JavaScript, iar ghidul de stil al Free Code Camp se bazează pe acesta.

Scopul urmării unui ghid de stil este de a avea un „standard de scriere” pe care dezvoltatorii proiectului dvs. îl urmează pentru a păstra codul curat, simplu și consecvent. Acest lucru este similar cu conceptul de AP Stylebook urmează jurnaliștii. Singura diferență este că AP Stylebook este un ghid de stil pentru gramatica engleză, în timp ce ghidul de stil Airbnb este pentru JavaScript.

După ce ați clarificat cum ar trebui scris codul pentru proiectul dvs. software (adică ați ales un ghid de stil sau ați creat unul al dvs.), sunteți gata să vă configurați reguli de linting pentru ESLint.

Modul în care funcționează ESLint este să îi spui ce reguli (de exemplu, îți iei regulile ghidului de stil și le transformi în linting reguli) ar trebui să știe despre și ce ar trebui să aibă grijă, astfel încât ESLint să vă poată atinge pe umăr și să vă anunțe când scrieți cod problematic.

Pentru a spune ESLint despre regulile dvs. de linting, le configurați într-un fișier config numit.eslintrc sau eslintConfig sau package.json, pe care ESLint îl va căuta și citi automat. Și pe măsură ce vă dezvoltați, ESLint vă va avertiza cu privire la codul de probleme care nu respectă aceste reguli, astfel încât să puteți face revizuiri – pe măsură ce codificați. Ceea ce este ca și cum ai avea cu tine un program de perechi de bunici.

Unde ESLint strălucește esteconceput pentru a fi complet configurabil, ceea ce înseamnă că puteți dezactiva fiecare regulă și rula numai cu validarea sintaxei de bază sau puteți combina regulile incluse și regulile personalizate pentru a face ESLint perfect pentru proiectul dvs.. ” Cu alte cuvinte, puteți amesteca și potrivi reguli obiective și subiective.

Tu ai Opțiuni când vine vorba de instrumente JavaScript de scurgere, dar în acest articol ne concentrăm pe ESLint, deoarece Free Code Camp îl specifică în ghidurile sale de contribuție. Și este utilizat pe scară largă în altă parte.

Ai și tu Opțiuni când vine vorba de ghiduri de stil JavaScript. Airbnb’s este unul bun cu care să vă familiarizați, deoarece s-a terminat 45.000 de stele pe GitHub în momentul scrierii acestui articol și este în creștere în utilizare.

Configurați Linting pentru Routech

Există două moduri de a instala ESLint: la nivel global și local. Ne vom concentra pe instalarea acestuia local, ceea ce înseamnă pentru directorul local de lucru, adică depozitul clonat Free Code Camp.

1: Deschideți clona Free Code Camp în editorul de text (presupunând că ați clonat într-adevăr Free Code Camp pe computerul dvs.)

2: În terminal, cd (schimbați directorul) în directorul dvs. Free Code Camp

3: Tastați npm install eslint --save-dev în Terminal

4: În editorul de text Atom, accesați Preferințe >;> Instavoi> & gt; și tastați linter-eslint în caseta de căutare Pachete de căutare

Cum sa configurati ESLint in Atom astfel incat sa puteti

Notă: De asemenea, puteți instala pachetele Atom din linia de comandă folosind apm comanda. Vedea aceste instrucțiuni pentru un exemplu.

5: Instalați linter-eslint și linter.

6: În directorul tău Free Code Camp, închide din orice <filename&gt; .js și apoi redeschideți

Și acum data viitoare când scrieți JavaScript, ar trebui să vedeți ESLint funcționând!

1612014609 281 Cum sa configurati ESLint in Atom astfel incat sa puteti

Notă: am lăsat deoparte un pas important: configurarea ESLint, adică partea în care personalizați ESLint și îi spuneți despre regulile dvs. de linting. Am făcut-o pentru că atunci când clonați depozitul Free Code Camp, acesta deja vine cu fișiere de configurare ESLint, de exemplu, vezi eslintrc și package.json. Și deci nu este nevoie să faceți nicio configurație proprie.

În cazul în care lucrați la un proiect în care trebuie să configurați ESLint, vă îndrept spre următoarele linkuri:

Pentru a încheia:

  1. Linting este procesul de verificare a codului problematic.
  2. ESLint este un astfel de instrument care efectuează scame.
  3. ESLint poate fi un instrument excelent de învățare, deoarece vă obligă să scrieți un cod curat și consistent și să dezvoltați obiceiuri bune de codare.
  4. Multe proiecte open source vă cer să rulați ESLint.
  5. Ar trebui să aveți ESLint configurat în editorul de text pentru a contribui la Free Code Camp.
  6. Dacă nu utilizați Atom, verificați editor de text documente despre cum se instalează ESLint.
  7. Rămâneți cursul.

Dacă aveți întrebări, puteți să mă trimiteți pe Twitter @gilbertginsberg sau mă găsește la GilbertIndex.