Puteți paria aproape întotdeauna că o scriere bună a beneficiat de o editare bună. În această privință, codul nu este diferit de proză. Unul dintre beneficiile de care ne bucurăm în calitate de dezvoltatori și programatori sunt editorii, sau code linters, care pot fi integrați în fluxurile noastre de lucru.

Linting este actul sau procesul de verificare a codului dvs. pentru erori de orice fel. Există multe gânduri cu privire la modul de optimizare a eficienței unei anumite bucăți de cod. Dar verificarea pentru a se asigura că este lipsită de erori și că respectă un anumit ghid de stil este linia de bază. Uneori, aceasta este o chestiune de coerență și lizibilitate, alteori este o chestiune de a face codul să ruleze în primul rând.

Când vine vorba de linting-ul JavaScript, există o mână de instrumente care se disting. Să ne uităm la patru linters care vă pot ajuta să începeți sau să vă rafinați procesul de linting: JSLint, standardJS, JSHint și ESLint.

JSLint

JSLint a fost creat în 2002 de Douglas Crockford, care a scris, de asemenea, ceea ce este, fără îndoială, una dintre cele mai bune cărți despre JavaScript. JSLint aduce simplitate și viteză la masă. Dar este, de asemenea, foarte avizat, ceea ce poate fi o binecuvântare sau un blestem.

JSLint constă într-un site cu o singură pagină care este dominat de un câmp de text în care puteți lipi codul dumneavoastră. Faceți clic pe butonul „JSLint” și orice erori, stilistice, sintactice sau de altă natură, vor fi afișate sub câmpul de text. Sub câmpul de text se află o mică listă de opțiuni, configurabile prin casete de selectare. Opțiunile includ tolerarea spațiilor albe suplimentare, utilizarea cuvântului cheie ‘this’ (care este descurajat de Crockford în discuțiile sale) și includerea Node.js.

Dacă nu sunteți obligat la un anumit ghid de stil și doriți o sursă de încredere care să vă verifice codul în locul dumneavoastră, JSLint este o opțiune excelentă. Este deosebit de eficient pentru testarea fragmentelor de cod sau dacă sunteți în căutarea unei modalități de a lint rapid proiecte mici – poate un site static cu o singură pagină care conține doar un singur fișier JavaScript.

standardJS

Pe baza exclusivă a stelelor GitHub, standardJS este cea mai populară opțiune, ajungând la aproape 19.000 de stele. Este complet opinat, ceea ce înseamnă că nu este deloc personalizabil. Dar, dacă nu sunteți îndatorat unui anumit ghid de stil, acest lucru poate fi o binecuvântare. Se prezintă sub forma unui CLI Node și poate fi instalat la nivel global sau ca dependență de dezvoltare, folosind terminalul sau linia de comandă aleasă:

$ npm install standard --global// or$ npm install standard --save-dev

Pentru că standardJS are Node și npm ca prerechizite și pentru că este rulat din linia de comandă sau printr-un script npm, ștacheta este ușor ridicată față de nivelul lui JSLint. Dar pentru că nu este configurabil, nu aveți prea multe alte motive de îngrijorare. Îl puteți rula din linia de comandă ca o comandă de un singur cuvânt și va verifica fiecare fișier cu extensia .js din directorul de lucru curent.

Toate erorile pe care le găsește vor fi tipărite în terminal sau în linia de comandă. Vă puteți aștepta să vedeți o ieșire asemănătoare cu acest exemplu din documentația standardJS:

$ standardError: Use JavaScript Standard Stylelib/torrent.js:950:11: Expected '===' and instead saw '=='.

Dacă trebuie să specificați un fișier sau un director, puteți include calea ca argument și să folosiți caractere joker. De asemenea, acceptă și caractere joker. În acest exemplu, standardJS va căuta și va lint orice fișier JavaScript în directorul src și în subdirectoarele sale:

$ standard "src/**/*.js" --fix

Semnalizatorul --fix după calea fișierului este opțiunea de a corecta automat erorile pe măsură ce acestea sunt găsite. Acest lucru poate fi un mare economizor de timp, dar ar putea fi, de asemenea, un mare exercițiu de învățare pentru a corecta singur erorile.

Dacă doriți să explorați convențiile și regulile pe care le folosește standardJS înainte de a decide dacă să îl folosiți, o listă completă poate fi găsită aici. StandardJS este o opțiune excelentă pentru cei care caută o modalitate rapidă și fiabilă de a începe cu un linter JavaScript.

JSHint

JSHint a început ca o bifurcație a JSLint. Scopul a fost de a face un linter mai configurabil. Dacă ați folosit standardJS, sau un alt linter cu opinie, și căutați o modalitate de a începe să vă personalizați propriile reguli de linting, JSHint ar putea fi pentru dumneavoastră. Acesta prezintă majoritatea beneficiilor linterilor menționați mai sus și încă ceva.

Ca și JSLint, pagina de pornire a JSHint prezintă un câmp de text în care puteți lipi codul. Câmpul Metrics din dreapta câmpului de text se va actualiza în timp real pe măsură ce tastați, contorizând o listă curentă de statistici despre codul dumneavoastră, cum ar fi o numărătoare a numărului de funcții pe care le conține. Bineînțeles, afișează, de asemenea, orice erori de linting pe care le găsește.

Dacă nu vă place metodologia copy/paste și doriți să o integrați în proiectul dvs., JSHint poate fi instalat global sau ca dependență de proiect folosind npm:

$ npm install jshint --global// or$ npm install jshint --save-dev

După ce este instalat, veți folosi CLI pentru a vă linting codul. Iată două exemple de comenzi care verifică un singur fișier și, respectiv, un director:

$ jshint index.js// or$ jshint src/

În primul exemplu, JSHint va lint fișierul index.js, iar în cel de-al doilea va căuta recursiv în directorul ‘src/’ și va lint orice fișier JavaScript pe care îl găsește. JSHint va imprima orice erori pe care le găsește în terminal.

Dacă nu vă interesează personalizarea, JSHint poate fi folosit așa cum este descris în exemplele de mai sus și va funcționa foarte bine. Dar, de aici încolo, complexitatea poate crește semnificativ, deoarece JSHint este complet configurabil și, de asemenea, expune un API, ceea ce înseamnă că poate fi folosit ca un modul JavaScript în propriile fișiere JavaScript.

O configurație personalizată, care ar trebui să fie stocată într-un fișier numit .jshintrc, fișier care ar putea arăta astfel:

{"esversion": 5,"eqeqeq": true,"strict": true}

Acest exemplu, de sus în jos, stabilește versiunea ECMAScript la 5, necesită utilizarea a trei semne de egalitate ( === sau !==) față de două (== sau !=) atunci când se compară valori și impune modul strict. Puteți include configurațiile dvs. personalizate specificând calea către fișierul .jshintrc în spatele unui indicator -- config la linia de comandă sau declarându-le ca atribut „jshintConfig” în fișierul package.json al proiectelor dvs. JSHint va folosi opțiunile sale implicite pentru orice reguli pe care nu le personalizați.

Opțiunea de pe linia de comandă ar putea arăta astfel:

// looks for '.jshintrc' in the current directory$ jshint --config './.jshintrc'

În timp ce opțiunea package.json ar putea arăta astfel:

{ "jshintConfig": { "esversion": 5, "eqeqeq": true, "strict": true }}

Puteți folosi aceste noțiuni de bază pentru a porni pe calea personalizării propriilor reguli de linting cu JSHint. Dacă doriți mai mult, documentația oficială conține o descriere exhaustivă a modului de utilizare a API-ului JSHint și a tuturor modurilor în care acesta poate fi personalizat pentru a se potrivi nevoilor dumneavoastră.

ESLint

Lăsând la o parte stelele GitHub, atunci când vine vorba de linting-ul JavaScript, ESLint este probabil linter-ul văzut cel mai mult în mediul natural și va fi cel la care se va orienta o mulțime de oameni. În propria documentație, se compară cu JSLint și JSHint în ceea ce privește metodele pe care le folosește pentru analiza JavaScript. Și, similar cu JSHint, vă ușurați utilizarea folosind valorile implicite și adăugați personalizări pe măsură ce preferințele sau nevoile dumneavoastră se schimbă.

Pentru a începe cu ESLint, instalați-l la nivel global sau ca dependență de dezvoltare:

$ npm install eslint --save-dev// or$ npm install eslint --global

Dacă instalați ESLint la nivel global, configurațiile sale se vor aplica tuturor fișierelor de proiect cu care îl executați. Dar dacă doriți configurații diferite pentru proiecte diferite, îl puteți instala ca dependență de dezvoltare și puteți crea un fișier de configurare diferit pentru fiecare proiect. Rețineți că, dacă ESLint este instalat ca dependență de proiect, spre deosebire de global, trebuie să rulați executabilul din folderul node_modules astfel:

$ ./node_modules/.bin/eslint --init

Când executați comanda de mai sus, veți fi ghidat prin configurarea ESLint printr-o serie de întrebări. (Notă: Indiferent de cât de mult intenționați să vă personalizați regulile de linting, trebuie să începeți cu acest pas deoarece ESLint are nevoie de fișierul .eslintrc care va fi generat de acest proces înainte de a vă putea lint codul.)

Prima întrebare care vi se pune este cum să configurați ESLint. Aveți trei opțiuni: folosiți un ghid de stil popular, răspundeți la întrebări despre stilul dvs. sau lăsați ESLint să se configureze singur pentru dvs. inspectând fișierele dvs. pentru a decide cum să configurați regulile. Dacă perspectiva de a vă configura singur de la bun început vi se pare intimidantă, puteți recurge din nou la utilizarea unui ghid de stil popular dezvoltat de una dintre cele câteva organizații cunoscute.

Indiferent de calea pe care o urmați, ESLint va folosi răspunsurile dumneavoastră pentru a genera un fișier numit .eslintrc în directorul de lucru curent. Acesta este fișierul pe care îl veți modifica dacă doriți să faceți modificări la regulile de linting mai târziu pe parcurs.

Iată un exemplu de fișier .eslintrc în format JSON care folosește regulile implicite ale ghidului de stil Airbnb JavaScript și include două reguli personalizate pentru a dezactiva modul strict și a permite declarațiile console.log():

{ "extends": "airbnb-base", "rules": { "strict": "off", "no-console": "off" }}

Dacă alegeți să răspundeți la întrebări despre stilul dumneavoastră, vă va întreba lucruri precum ce versiune ECMAScript folosiți, dacă preferați tabulațiile sau spațiile, punct și virgulă sau nu, și dacă folosiți JSX și/sau React. Suportul gata de utilizare al ESLint pentru React și plugin-urile suplimentare îl vor face, probabil, cea mai bună alegere pentru dezvoltatorii React. Cel puțin pentru cei care abia încep să se familiarizeze cu linting.

După ce ESLint este instalat și a fost generat un fișier .eslintrc, puteți utiliza CLI pentru a începe să vă linting codul. ESLint caută fișierul dvs. .eslintrc în mod implicit, astfel încât nu trebuie să specificați nicio configurație la linia de comandă. Dar puteți utiliza diverse stegulețe pentru a modifica modul în care se comportă ESLint. În exemplul de mai jos, stegulețul -- quiet îi spune lui ESLint să afișeze doar erorile, spre deosebire de ambele avertismente și erori. Stegulețul --fix îi spune să încerce să corecteze automat orice erori pe care le găsește.

// run eslint against file1.js$ ./node_modules/.bin/eslint file1.js// run eslint against file1.js and file2.js with flags to modify behavior$ ./node_modules/.bin/eslint file1.js file2.js --quiet --fix

Ca și în cazul celorlalte CLI-uri despre care am discutat, puteți utiliza wild carduri și căi de acces la fișiere în loc de nume de fișiere specifice, dacă este necesar. Deși ESLint este foarte ușor de configurat, facilitează curba de învățare prin utilizarea unui ghid de instalare accesibil pentru metoda sa de configurare implicită. Dacă doriți să vă adânciți cu adevărat în personalizări, documentația oficială conține explicații excelente despre tot ceea ce puteți face cu ESLint.

.