10 CSS in JavaScript Linting orodja za optimizacijo kode

Orodja za lintiranje lahko bistveno pomagajo razvijalcem napišite kakovostno, optimizirano kodo. Linting je postopek preverjanja kode, ki išče napake v izvorni kodi in označuje potencialne napake. Večina linterjev uporablja tehniko statične analize, kar pomeni koda se preveri, ne da bi bila dejansko izvedena.

Lahko pišete na različne priložnosti, na primer v realnem času, ko pišete kodo, ko shranjujete datoteko, ko objavljate spremembe, ali preden koda pride v proizvodnjo. Ne glede na to, kakšen je vaš potek dela, je pomembno, da redno, ker vas lahko v prihodnosti reši veliko glavobolov.

Linters niso le orodja za preprečevanje hroščev, ampak jih je mogoče učinkovito uporabiti tudi pri razhroščevanju najti napake, ki jih je težko ujeti drugače. V tem prispevku bomo preverili 10 močnih orodij, ki jih lahko uporabite za vstavljanje datotek CSS in JavaScript, da bi izboljšali kakovost kode.

1. CSSLint

CSSLint namerava "prizadeti vaša čustva", v zameno pa vam "naredi veliko boljšo kodo". CSSLint je trenutno vodilni na trgu CSS linting. Napisano je v JavaScriptu, odprtokodni in ima na voljo veliko možnosti, ki jih je mogoče konfigurirati.

CSSLint vam omogoča izberite, katere vrste napak in opozoril (združljivost, zmogljivost, podvajanje itd.) želite preizkusiti, in preveri vašo sintakso CSS glede na pravila, ki jih izberete.

Ne deluje samo v brskalniku, ampak ima tudi vmesnik ukazne vrstice in ga lahko vključite tudi v svoj sistem za gradnjo.

2. SublimeLinter CSSLint

CSSLint je tako učinkovit CSS linter, da je težko najti konkurenta, ki ga meri. Verjetno je to razlog, zakaj je SublimeLinter linting okvir zgradil svoj CSS linting plugin na vrhu. SublimeLinter je SublimeText plugin, ki uporabnikom zagotavlja sredstva za vstavljanje kode (CSS, PHP, Python, Java, Ruby itd.) v izdajalniku SublimeTextr.

Preden namestite vmesnik SublimeLinter CSSLint, morate namestiti CSSLint kot modul Node.js. Velika stvar pri tem priročnem orodju je, da ste nastavitve morate nastaviti samo enkrat, ali če ste zadovoljni s privzetimi nastavitvami, ki jih sploh ne potrebujete, lahko vedno dobite ustrezna opozorila in obvestila v urejevalniku SublimeText brez dodatnih težav.

3. StyleLint

StyleLint pomaga razvijalcem, da se izognejo napakam v CSS, SCSS ali kakšni drugi sintaksi, ki jih PostCSS lahko razčleni. StyleLint testira več kot sto pravil in lahko izberite tiste, ki jih želite vklopiti (glej primer konfiguracije).

Če ne želite zgraditi lastne konfiguracije, lahko izberete tudi vnaprej pripravljeno standardno konfiguracijo, ki vsebuje približno 60 pravil StyleLint. StyleLint je precej prilagodljivo orodje, lahko ga razširite z dodatnimi vtičniki in uporabite v 3 različnih oblikah: kot orodje ukazne vrstice, kot modul Node.js ali kot vtičnik PostCSS..

4. Validator W3C CSS

Čeprav WSC-jev CSS Validator običajno ni zamišljen kot orodje za lintanje, daje razvijalcem veliko priložnost, da preverijo svojo izvorno kodo CSS glede na uradne standarde W3C. W3C je izdelal validatorje z namenom, da zagotovi orodje, ki je podobno programu za preverjanje programa Lint za jezik C.

Sprva so ustvarili validator HTML oznak, ki mu je kasneje sledil validator CSS. W3C-jev validator CSS nima toliko možnosti kot CSSLint, ampak vrne podrobna, razumljiva sporočila o napakah in obvestila.

Kot dodatno funkcijo lahko tudi preverite kodo glede na nedavne mobilne spletne standarde W3C, kar ni slabo v obdobju mobilnega spleta..

5. Umazana oznaka

Dirty Markup čisti, formatira in potrjuje vašo kodo HTML, CSS in JavaScript. Lahko je odlična izbira, če vam je všeč enostavna zasnova in želite hitro rešitev. Dirty Markup v realnem času vrže sporočila o napakah in obvestila med vami napišite ali spremenite kodo v urejevalniku.

Ko udariš “Čisto” gumb popravi skladenjske napake hkrati, uredi obliko, vendar opozori ostane nedotaknjena dovolite, da jih rešite, kakor želite. Ne morete izbrati, katera pravila želite preskusiti, ampak vse tri vrste datotek imate nekaj nastavitev, ki vam omogočajo, da določite obliko očiščenega izhoda.

6. JSLint

JSLint je prvič izdal Douglas Crockford leta 2002 in od takrat še ni izgubil zagona, tako da lahko varno domnevamo, da je to stabilno in zanesljivo orodje za JavaScript..

JSLint lahko obdeluje izvorno kodo JavaScript in besedilo JSON, prihaja pa z a pripravljena konfiguracija, ki sledi najboljšim praksam JS Crockford je o tem pisal v svoji knjigi z naslovom JavaScript: Dobri deli.

JSLint ima nekaj možnosti, med katerimi lahko izbirate, vendar vi ne morete dodati lastnih pravil po meri ali onemogočiti večino funkcij. JSLint je že začel z vključevanjem najnovejših standardov ECMAScript 6, lahko preverite trenutno stopnjo izvajanja ES6 tukaj.

7. JSHint

JSHint je zelo priljubljena vilica JSLinta in jo uporabljajo velika tehnološka podjetja, kot so Facebook, Twitter in Medium

JSHint je projekt, ki ga vodi skupnost in se je začel s prizadevanji ustvarite bolj konfigurirano in manj domišljeno različico JSLinta. JSHint omogoča razvijalcem, da konfigurirajo katerokoli od svojih možnosti polaganja, in prilagodijo prilagojeno konfiguracijo v ločeno datoteko, kar omogoča preprosto ponovno uporabo orodja in dobro prileganje za večje projekte..

Ne samo, da lahko uporabljate JSHint, da vnašate JavaScript vanilijo, temveč ima tudi zunanjo podporo za številne priljubljene knjižnice JS, kot so jQuery, Mootools, Mocha in Node.js.

8. ESLint

ESLint je najnovejša velika stvar na krajini JavaScripta. Njegova priljubljenost izhaja iz njene zelo prilagodljive narave. Ne samo, da lahko prilagodite tone svojih prefinjenih pravil za vstavljanje lisic in jih vključite v vse večje urejevalnike kod, lahko pa tudi zlahka njegove funkcionalnosti z dodajanjem različnih vtičnikov.

Z določitvijo možnosti razčlenjevalnika lahko tudi izberite, kateri standard jezika JS želite podpirati med postopkom lintinga, kar pomeni, da ne morete le preveriti skriptov pred privzeto skladnjo ECMAScript 5, ampak tudi proti ECMAScript 6, ECMAScript 7 in JSX.

9. JSCS

JSCS ali JavaScript Code Style je priklopni linter za slog kode za JavaScript, ki preveri pravila oblikovanja kode.

Cilj JSCS je zagotoviti sredstva za to programsko uveljaviti spoštovanje določenega vodnika za stil kodiranja. Čeprav JSCS ne preverja hroščev in napak, jih še vedno uporabljajo mnogi pomembni akterji v tehnološki industriji, kot so Google, AirBnB in AngularJS, saj razvijalcem pomaga ohraniti visoko berljivo, skladno kodno osnovo..

JSCS je real-time-saver, saj samodejno popravi vaše napake pri oblikovanju, tako da vam ni treba iti skozi njih enega po enega. Ima veliko različnih prednastavitev, ki pripadajo večjim projektom, kot so prednastavitve slog Google, Grunt ali Wikimedia, ki jih lahko preprosto uporabite v svojih projektih, vendar ustvarite lahko tudi lastno konfiguracijo po meri.

10. StandardJS

StandardJS ali JavaScript Standard Style je linter za slog kode, tako kot JSCS, vendar se od njega razlikuje po svoji preprostosti in enostavnosti. StandardJS je lahko odlična izbira, če ne želite preživeti časa s konfiguracijo, samo želite učinkovito orodje, ki se izteče iz škatle.

StandardJS sledi peščici vnaprej zapisanih pravil za oblikovanje, njegova osnovna vrednost pa je, da vaš potek kodiranja ne moti, zato ne morete spremeniti pravil, s katerimi se ne strinjate. Izberete lahko samo StandardJS, če ne želite imeti konfiguriranja po meri in ga želite uveljavite skladen slog kode med svojimi datotekami JavaScript.