10 instrumente de lustruit CSS și JavaScript pentru optimizarea codului

Instrumentele de lăcuit pot ajuta în mod semnificativ dezvoltatorii să scrie calitate bună, cod optimizat. Linting este un proces de verificare a codurilor care caută erori în codul sursă și semnalează potențialele bug-uri. Majoritatea linters utilizează tehnica de analiză statică a codului, ceea ce înseamnă codul este verificat fără a fi executat efectiv.

Poți să scarpinăți la diferite ocazii, cum ar fi în timp real în timp ce scrieți codul, atunci când salvați fișierul, când efectuați modificările sau înainte ca codul să intre în producție. Oricare ar fi fluxul dvs. de lucru, este important nu scot în mod regulat, deoarece vă poate salva de pe urma multor dureri de cap în viitor.

Linteriile nu sunt doar unelte de prevenire a erorilor, dar pot fi folosite și în timpul depanării pentru a găsi erori greu de capturat in caz contrar. În acest articol vom verifica 10 instrumente puternice de lustruire pe care le puteți folosi pentru a vă lămuia fișierele CSS și JavaScript pentru a îmbunătăți calitatea codului.

1. CSSLint

CSSLint are intenția de a "răni sentimentele tale", dar în schimb, "te face să codiști mult mai bine". CSSLint conduce în prezent piața de lustruire CSS. Este scris în JavaScript, este open-source și vine cu multe opțiuni configurabile.

CSSLint vă permite să alegeți ce fel de erori și avertismente (compatibilitate, performanță, duplicare etc.) pe care doriți să le testați, și validează sintaxa dvs. CSS în raport cu regulile pe care le alegeți.

Aceasta nu funcționează numai în browser, ci are și o interfață de linie de comandă și o puteți integra în propriul sistem de construcție.

2. SublimeLinter CSSLint

CSSLint este un astfel de liner CSS eficient că este greu să găsești un concurent care măsoară până la el. Probabil că acesta este motivul pentru care cadrul de lămurire SublimeLinter și-a construit pluginul de lustruire CSS pe partea de sus a acestuia. SublimeLinter este un plugin SublimeText care oferă utilizatorilor un mijloc de a-și scuipa codul (CSS, PHP, Python, Java, Ruby etc.) chiar în interiorul editării SublimeTextr.

Înainte de a instala pluginul SublimeLinter CSSLint în sine, trebuie să instalați CSSLint ca modul Node.js. Lucrul cel mai bun pentru acest instrument util este că tu trebuie doar să configurați setările o singură dată, sau dacă sunteți mulțumit de setările implicite, nici măcar nu trebuie să faceți acest lucru, atunci puteți obține întotdeauna avertismentele și notificările relevante în editorul dvs. SublimeText fără a mai avea probleme.

3. StyleLint

StyleLint ajută dezvoltatorii să evite erorile în CSS, SCSS sau orice alte sintaxe pe care le poate parcurge PostCSS. StyleLint testează peste o sută de reguli și puteți alegeți pe care doriți să le porniți (a se vedea un exemplu de config).

Dacă nu doriți să creați o configurație proprie, puteți opta și pentru o configurație standard pre-scrisă, care conține aproximativ 60 de reguli StyleLint. StyleLint este un instrument destul de flexibil, poate fi extins prin pluginuri suplimentare și utilizat în 3 forme diferite: ca instrument de linie de comandă, ca modul Node.js sau ca plugin PostCSS.

4. Validatorul W3C CSS

Deși Validatorul CSS al W3C nu este considerat, de obicei, ca un instrument de lingușire, acesta oferă dezvoltatorilor o mare oportunitate de a verifica codul sursă CSS împotriva standardelor oficiale ale W3C. W3C și-a construit validatorii cu intenția de a oferi un instrument asemănător programului de verificare a programului Lint pentru limba C.

La început, au creat validatorul de marcaj HTML care a fost ulterior urmat de validatorul CSS. Validatorul CSS al W3C nu are la fel de multe opțiuni ca CSSLint, dar este returnează mesaje de eroare detaliate și ușor de înțeles și notificări.

Ca o caracteristică suplimentară, puteți să verificați și codul în funcție de standardele recente de web mobil ale W3C, ceea ce nu este un lucru rău în era webului mobil.

5. Marcaj murdar

Dirty Markup curăță, formatează și validează codul HTML, CSS și JavaScript. Poate fi o alegere excelentă dacă vă place designul simplu și doriți o soluție rapidă. Marcaj murdar aruncă mesaje de eroare și notificări în timp real in timp ce tu scrieți sau modificați codul dvs. în interiorul editorului.

Când ați lovit “Curat” butonul, acesta remediază simultan erorile de sintaxă, modifică formatul, dar lasă avertizările intacte permițându-i să le rezolvi oricum vrei. Nu puteți alege regulile pentru care doriți să încercați, ci toate cele trei tipuri de fișiere aveți câteva setări care vă permit să decideți formatul din ieșirea curățată.

6. JSLint

JSLint a fost lansat pentru prima dată în 2002 de către Douglas Crockford și nu a pierdut din când în când, astfel încât să puteți presupune în siguranță că este un instrument stabil și de încredere în JavaScript.

JSLint poate procesa codul sursă JavaScript și textul JSON și este dotat cu un a configurație gata făcută care urmează cele mai bune practici ale JS Crockford a scris în cartea sa intitulată JavaScript: piesele bune.

JSLint are câteva opțiuni pe care le puteți alege, dar tu nu puteți adăuga propriile reguli personalizate sau nu puteți dezactiva majoritatea funcțiilor. JSLint a început deja să includă cele mai recente standarde ECMAScript 6, puteți verifica stadiul actual al implementării ES6 aici.

7. JSHint

JSHint este o furculiță foarte populară de JSLint și este folosită de mari companii de tehnologie precum Facebook, Twitter și Medium

JSHint este un proiect bazat pe comunitate, care a început cu efortul de a creați o versiune mai bine configurabilă și mai puțin avizată a JSLint. JSHint permite dezvoltatorilor să configureze oricare dintre opțiunile de lustruire și să plaseze configurația personalizată într-un fișier separat, o opțiune care face instrumentul ușor de reutilizat și o potrivire bună pentru proiecte mai mari.

Puteți nu numai să utilizați JSHint pentru a scapa de vanilie JavaScript, dar are și suport pentru mai multe biblioteci populare JS, cum ar fi jQuery, Mootools, Mocha și Node.js.

8. ESLint

ESLint este cel mai recent lucru important pe peisajul de lustruit JavaScript. Popularitatea sa provine din natura sa foarte flexibilă. Nu numai că puteți personaliza tone de reguli sofisticate de lustruire și le puteți integra cu toți editorii de coduri majori, dar puteți, de asemenea, ușor extind funcționalitățile sale prin adăugarea unor pluginuri diferite.

De asemenea, puteți specifica opțiunile de parser alegeți standardul limbii JS pe care doriți să îl sprijiniți în timpul procesului de lingușire, ceea ce înseamnă că nu numai că puteți să vă verificați scripturile față de sintaxa implicită ECMAScript 5, dar și împotriva ECMAScript 6, ECMAScript 7 și JSX.

9. SAVC

JSCS sau JavaScript Code Style este un linter de stil pluggable pentru JavaScript, care verifică regulile de formatare a codului.

Scopul JSC este de a oferi un mijloc de a programarea aplicării aderării la un anumit ghid de stil de codificare. Deși JSCS nu verifică bug-uri și erori, este încă folosit de mulți jucători importanți din industria de tehnologie, cum ar fi Google, AirBnB și AngularJS, deoarece ajută dezvoltatorii să păstreze o bază de cod extrem de lizibilă și consistentă.

JSCS este un economizor de timp real, deoarece vă remediază automat erorile de formatare, astfel încât să nu trebuiască să le treceți unul câte unul. Dispune de numeroase presetări diferite, care aparțin unor proiecte mai mari, cum ar fi Google, Grunt sau presetări de codare Wikimedia, pe care le puteți utiliza cu ușurință în propriile proiecte, dar de asemenea, puteți crea o configurație particularizată.

10. StandardJS

StandardJS sau stilul standard JavaScript este un stil de cod linter la fel ca JSCS, dar diferă de acesta în simplitatea și simplitatea sa. StandardJS poate fi o alegere excelentă, dacă nu doriți să vă petreceți timpul cu configurația, doresc doar un instrument eficient care să se termine din cutie.

StandardJS urmează o mână de reguli de formatare pre-scrise, iar valoarea sa principală este să vă păstrați distragerea fluxului de lucru fără codificare, astfel încât să nu puteți schimba regulile cu care nu sunteți de acord. Alegeți numai StandardJS dacă nu doriți să aveți o config personalizată și doriți doar să o faceți impuneți un stil de cod consistent în toate fișierele dvs. JavaScript.