10 CSS- ja JavaScript-viittaustyökaluja koodin optimointiin

Huohotustyökalut voivat auttaa kehittäjiä merkittävästi kirjoita hyvä laatu, optimoitu koodi. Linting on koodin tarkistusprosessi, joka etsii lähdekoodin virheitä ja merkitsee mahdollisia virheitä. Useimmat linters käyttävät staattisen koodin analyysitekniikkaa, mikä tarkoittaa koodi tarkistetaan ilman tosiasiallista toteutusta.

Voit viettää erilaisia ​​tapahtumia, kuten reaaliajassa, kun kirjoitat koodin, kun tallennat tiedoston, kun teet muutoksia tai ennen kuin koodi menee tuotantoon. Mikä tahansa työnkulku on, on tärkeää nukkaa säännöllisesti, koska se voi säästää monilta päänsärkyiltä tulevaisuudessa.

Linters ei ole pelkästään vian ehkäisytyökaluja, mutta niitä voidaan käyttää myös virheenkorjauksen aikana löytää virheitä, joita on vaikea saada kiinni muuten. Tässä viestissä tarkastamme 10 tehokasta nukkaustyökalua, joita voit käyttää CSS- ja JavaScript-tiedostojen nukkaamiseen, jotta voit parantaa koodin laatua.

1. CSSLint

CSSLint aikoo "vahingoittaa tunteitasi", mutta vaihdettaessa se "tekee sinulle paljon paremman koodin". CSSLint johtaa tällä hetkellä CSS-nukkauksen markkinoita. Se on kirjoitettu JavaScriptissä, se on avoimen lähdekoodin, ja siinä on tonnia konfiguroitavia vaihtoehtoja.

CSSLintin avulla voit valitse millaisia ​​virheitä ja varoituksia (yhteensopivuus, suorituskyky, päällekkäisyys jne.) haluat testata, ja validoi CSS-syntaksinne valitsemaasi sääntöön.

Se ei toimi vain selaimessa, vaan sillä on myös komentorivikäyttöliittymä, ja voit myös integroida sen omaan rakennusjärjestelmään.

2. SublimeLinter CSSLint

CSSLint on niin tehokas CSS-selain, että on vaikea löytää kilpailijaa, joka mittaa sitä. Todennäköisesti se on syy siihen, miksi SublimeLinter-nukkauskehys rakensi CSS-nukkaussovittimen sen päälle. SublimeLinter on SublimeText-laajennus tarjoaa käyttäjille keinon tuoda koodinsa (CSS, PHP, Python, Java, Ruby jne.) suoraan SublimeText-editoinnin sisäänR.

Ennen kuin asennat itse SublimeLinterin CSSLint-laajennuksen, CSSLint on asennettava Node.js-moduuliksi. Tämä kätevä työkalu on se, että sinä asetukset on määritettävä vain kerran, tai jos olet tyytyväinen oletusarvoihin, sinun ei tarvitse edes tehdä sitä, niin voit aina saada asiaankuuluvat varoitukset ja ilmoitukset SublimeText-editorisi sisällä ilman muuta vaivaa.

3. StyleLint

StyleLint auttaa kehittäjiä välttämään virheitä CSS-, SCSS- tai muissa syntakseissa, joita PostCSS voi jäsentää. StyleLint testaa yli sata sääntöä, ja voit valitse, mitkä haluat kytkeä päälle (katso esimerkki konfiguraatiosta).

Jos et halua rakentaa omaa kokoonpanoa, voit myös valita valmiiksi kirjoitetun, vakioasetuksen, joka sisältää noin 60 StyleLint-sääntöä. StyleLint on varsin joustava työkalu, sitä voidaan laajentaa ylimääräisillä laajennuksilla ja käyttää kolmessa eri muodossa: komentorivityökaluna, Node.js-moduulina tai PostCSS-laajennuksena.

4. W3C CSS -validator

Vaikka W3C: n CSS Validatoria ei yleensä pidetä nukkaustyökaluna, se antaa kehittäjille erinomaisen mahdollisuuden tarkistaa CSS-lähdekoodinsa W3C: n virallisia standardeja vastaan. W3C rakensi validointitarkoituksiinsa tarkoituksenaan tarjota työkalu, joka on samanlainen kuin C-kielen Lint-ohjelman tarkistusohjelma.

Aluksi he loivat HTML-merkintäselvityksen, jota myöhemmin seurasi CSS-validointi. W3C: n CSS-validoijalla ei ole niin monta vaihtoehtoa kuin CSSLint, mutta se on palauttaa yksityiskohtaiset, helposti ymmärrettävät virheilmoitukset ja ilmoitukset.

Lisäominaisuutena voit myös tarkistaa koodisi W3C: n äskettäisissä mobiilisovellusstandardeissa, mikä ei ole huono asia mobiiliverkon aikakaudella.

5. Likainen merkintä

Dirty Markup puhdistaa, alustaa ja vahvistaa HTML-, CSS- ja JavaScript-koodisi. Se voi olla loistava valinta, jos haluat yksinkertaisen suunnittelun ja haluat nopean ratkaisun. Likainen merkintä heittää virheilmoituksia ja ilmoituksia reaaliajassa kun olet kirjoita tai muokkaa koodia editorissa.

Kun painat “Puhdas” -painiketta korjaa syntaksivirheet kerralla, siivittää muodon, mutta jättää varoitukset ehjiksi voit ratkaista ne kuitenkin haluamallasi tavalla. Et voi valita, mitkä säännöt haluat testata, mutta kaikki kolme tiedostotyyppiä sinulla on muutamia asetuksia, joiden avulla voit päättää muodon puhdistetusta tuotoksesta.

6. JSLint

Douglas Crockford julkaisi ensimmäisen kerran vuonna 2002 JSLintin, eikä se ole menettänyt vauhtia sen jälkeen, joten voit varmasti olettaa, että se on vakaa ja luotettava JavaScript-nukkaustyökalu.

JSLint voi käsitellä JavaScript-lähdekoodia ja JSON-tekstiä valmis kokoonpano, joka noudattaa JS: n parhaita käytäntöjä Crockford kirjoitti kirjassaan JavaScript: Hyvät osat.

JSLintissä on muutamia vaihtoehtoja, joista voit valita ei voi lisätä omia mukautettuja sääntöjäsi tai poista useimpia ominaisuuksia käytöstä. JSLint on jo alkanut sisällyttää uusimmat ECMAScript 6 -standardit, voit tarkistaa ES6: n nykyisen toteutuksen tässä vaiheessa.

7. JSHint

JSHint on JSLintin suosittu haarukka, jota käyttävät suuret teknologiayritykset, kuten Facebook, Twitter ja Medium

JSHint on yhteisöpohjainen hanke, joka aloitettiin pyrkimyksellä luo muokattavampi ja vähemmän lausuntoinen versio JSLintistä. JSHintin avulla kehittäjät voivat määrittää minkä tahansa nukkausvaihtoehdonsa ja sijoittaa mukautetun kokoonpanon erilliseen tiedostoon, joka tekee työkalusta helposti uudelleenkäytettävän ja sopii hyvin isompiin projekteihin.

Et vain voi käyttää JSHintia nukkaamaan vanilja-JavaScript-versiota, sillä on myös monia muita suosittuja JS-kirjastoja, kuten jQuery, Mootools, Mocha ja Node.js..

8. ESLint

ESLint on uusin iso juttu JavaScript-nukkauskuvassa. Sen suosio johtuu sen erittäin joustavasta luonteesta. Et voi vain mukauttaa tonnia hienostuneita nukkaussääntöjään ja integroida sen kaikkiin tärkeimpiin koodieditoreihin, mutta voit myös helposti laajentaa sen toimintoja lisäämällä siihen erilaisia ​​laajennuksia.

Määrittelemällä jäsentimen asetukset voit myös valitse JS-kielen standardi, jota haluat tukea linting-prosessin aikana, mikä tarkoittaa sitä, että et voi tarkistaa komentosarjojasi vain ECMAScript 5: n oletustapahtuman, mutta myös ECMAScript 6: n, ECMAScript 7: n ja JSX: n suhteen.

9. JSCS

JSCS tai JavaScript-koodityyli on plug-in-koodi, joka on JavaScript-koodi, joka tarkistaa koodin muotoilusäännöt.

JSCS: n tavoitteena on tarjota keinot ohjelmallisesti valvoa tiettyjen koodaustyylien noudattamista. Vaikka JSCS ei tarkista vikoja ja virheitä, sitä käyttävät yhä monet suuret teknologia-alan toimijat, kuten Google, AirBnB ja AngularJS, koska se auttaa kehittäjiä pitämään hyvin luettavissa olevat ja johdonmukaiset koodikannat.

JSCS on reaaliaikainen säästö, koska se korjaa automaattisesti muotoiluvirheet, joten sinun ei tarvitse mennä läpi niitä yksitellen. Siinä on useita erilaisia ​​esiasetuksia, jotka kuuluvat suurempiin projekteihin, kuten Google, Grunt tai Wikimedia-koodaustyylien esiasetuksiin, joita voit helposti käyttää omissa projekteissasi, mutta Voit myös luoda oman mukautetun kokoonpanon.

10. StandardJS

StandardJS tai JavaScript Standard Style on koodityylinen linter aivan kuten JSCS, mutta eroaa siitä yksinkertaisuudessaan ja suoraviivaisuudessaan. StandardJS voi olla erinomainen valinta, jos et halua viettää aikaa kokoonpanolla, haluat vain tehokkaan työkalun, joka loppuu laatikosta.

StandardJS noudattaa kourallista ennalta kirjoitettuja muotoilusääntöjä, ja sen perusarvo on pitää koodauksen työnkulku häiriöttömänä, joten et voi muuttaa sääntöjä, joista et ole eri mieltä. Valitse vain StandardJS, jos et halua mukautettua asetusta ja haluat vain valvoa JavaScript-tiedostojen yhtenäistä koodityyppiä.