10 CSS- ja JavaScript-lintimisvahendeid koodide optimeerimiseks

Linting tööriistad võivad oluliselt aidata arendajatel kirjutage kvaliteetne, optimeeritud kood. Linting on koodikontrolli protsess, mis otsib lähtekoodis vigu ja tähistab võimalikke vigu. Enamik linti kasutab staatilise koodi analüüsi tehnikat, mis tähendab koodi kontrollitakse ilma tegeliku teostamiseta.

Faili salvestamisel, muudatuste tegemisel või enne tootmise alustamist saate koodi lintida erinevatel aegadel, näiteks reaalajas. Mis iganes teie töövoog on, on oluline lint regulaarselt, kuna see võib teid tulevikus paljude peavalude eest päästa.

Linters ei ole ainult vigade ennetamise vahendid, vaid neid saab ka silumise ajal tõhusalt kasutada leida vigu, mida on raske püüda vastasel korral. Selles postituses vaatame välja 10 võimsat lintimisvahendit, mida saate kasutada oma CSS- ja JavaScript-failide lintimiseks, et parandada oma koodi kvaliteeti.

1. CSSLint

CSSLint kavatseb tõesti "haiget oma tundeid", kuid vahetades seda "muudab teid palju paremaks". CSSLint juhib praegu CSS-i lintimise turgu. See on kirjutatud JavaScriptis, see on avatud lähtekoodiga ja sisaldab tonni konfigureeritavaid võimalusi.

CSSLint võimaldab teil valida, milliseid vigu ja hoiatusi (ühilduvus, jõudlus, dubleerimine jne) mida soovite testida, ja kinnitab teie CSS-i süntaksit reeglitega, mille olete valinud.

See ei tööta ainult brauseris, vaid omab ka käsurealiidest ja saate selle ka oma ehitamissüsteemi integreerida.

2. SublimeLinter CSSLint

CSSLint on nii tõhus CSS-linter, et on raske leida võistlejat, kes mõõdab seda. Tõenäoliselt on see põhjus, miks SublimeLinteri lintimisraamistik ehitas selle peale oma CSS-i lintimise plugina. SublimeLinter on SublimeText plugin pakub kasutajatele võimalust kodeerida oma koodi (CSS, PHP, Python, Java, Ruby jne) otse SublimeText editooni seesr.

Enne SublimeLinter CSSLint'i plugina ise installimist peate installima CSSLinti kui Node.js moodulit. See mugav vahend on see, et sina seadistused tuleb ainult üks kord konfigureerida, või kui olete vaikimisi täitnud, ei pea te seda isegi tegema, siis saate alati SublimeText'i redaktoris asjakohaseid hoiatusi ja teateid ilma täiendava probleemideta.

3. StyleLint

StyleLint aitab arendajatel vältida vigu CSS, SCSS või mõnes muus süntaksis, mida PostCSS võib analüüsida. StyleLint testib üle saja reegli ja saate vali need, mida soovite sisse lülitada (vt näite konfigureerimist).

Kui te ei soovi oma konfiguratsiooni luua, saate valida ka eelnevalt kirjutatud standardse konfiguratsiooni, mis sisaldab umbes 60 StyleLinti reeglit. StyleLint on üsna paindlik tööriist, seda saab täiendavate lisandmoodulitega laiendada ja kasutada 3 erinevas vormis: käsurea tööriistana, Node.js moodulina või PostCSS pluginana.

4. W3C CSS valideerija

Kuigi W3C CSS Validatorit tavaliselt ei peeta lintimisvahendiks, annab see arendajatele suurepärase võimaluse kontrollida oma CSS lähtekoodi W3C ametlike standardite vastu. W3C ehitas oma valideerijad selleks, et pakkuda tööriista, mis sarnaneb C-keele Lint-programmi kontrolleriga.

Alguses lõid nad HTML-märgistuse valideerija, mida hiljem järgnes CSS-valideerija. W3C CSS-i valideerijal ei ole nii palju võimalusi kui CSSLint, kuid seda tagastab üksikasjalikud, kergesti mõistetavad veateated ja teated.

Lisafunktsioonina saate oma koodi W3C viimaste mobiilse veebi standardite vastu kontrollida, mis ei ole mobiilse veebi ajastul halb..

5. Määrdunud märgistus

Dirty Markup puhastab, vormindab ja kinnitab teie HTML-, CSS- ja JavaScript-koodi. See võib olla suurepärane valik, kui soovid lihtsat disaini ja soovite kiiret lahendust. Dirty Markup viskab veateateid ja teatisi reaalajas sinu ajal kirjutage või muutke oma koodi redaktori sees.

Kui vajutad “Puhasta” nupp, see parandab süntaksivead korraga, korrastab vormingu, kuid jätab hoiatused puutumata lubades teil neid siiski lahendada. Te ei saa valida, milliseid reegleid soovite testida, kuid kõik kolm failitüüpi teil on mõned seaded, mis võimaldavad teil vormingu otsustada puhastatud väljundist.

6. JSLint

JSLint ilmus esimest korda 2002. aastal Douglas Crockfordi poolt ja ei ole sellest ajast alates hoogu kaotanud, nii et saate kindlalt eeldada, et see on stabiilne ja usaldusväärne JavaScript-ihtimisvahend.

JSLint saab töödelda JavaScripti lähtekoodi ja JSON teksti ning see on varustatud a valmis konfiguratsioon, mis järgib JS parimaid tavasid Crockford kirjutas oma raamatus pealkirjaga "JavaScript: The Good Parts".

JSLintil on mõned valikud, mida saate valida, kuid teie ei saa oma kohandatud reegleid lisada või enamikku funktsioone keelata. JSLint on juba alustanud viimaste ECMAScript 6 standardite lisamist, saate vaadata ES6 rakendamise praegust etappi siin.

7. JSHint

JSHint on JSLinti väga populaarne haarats ning seda kasutavad suured tehnoloogilised ettevõtted nagu Facebook, Twitter ja Medium

JSHint on kogukonnapõhine projekt, mis alustas püüdlustega luua JSLinti seadistatavam ja vähem arvamuslik versioon. JSHint võimaldab arendajatel konfigureerida ükskõik milliseid oma kihtimisvõimalusi ja paigutada kohandatud konfiguratsiooni eraldi failiks, mis muudab tööriista kergesti taaskasutatavaks ja sobib suurematele projektidele..

Sa ei saa mitte ainult kasutada JSHinti vanilje JavaScript-i lintimiseks, vaid ka paljude populaarsete JS-raamatukogude jaoks, nagu näiteks jQuery, Mootools, Mocha ja Node.js..

8. ESLint

ESLint on uusim suur asi JavaScripti lintingmaastikul. Selle populaarsus tuleneb selle väga paindlikust iseloomust. Te ei saa mitte ainult kohandada tonni oma keerukaid linting reegleid ja integreerida see kõigi peamiste koodiredaktoritega, kuid saate ka kergesti laiendada selle funktsioone lisades sellele erinevaid pluginaid.

Parseri valikute täpsustamisega saate ka valige, millist standardit JS-keeles soovite toetada lintimisprotsessi ajal, mis tähendab, et sa ei saa mitte ainult kontrollida oma skripte vaikimisi ECMAScript 5 süntaksi vastu, vaid ka ECMAScript 6, ECMAScript 7 ja JSX vastu.

9. JSCS

JSCS või JavaScripti koodi stiil on pluginatav koodistiil JavaScript jaoks, mis kontrollib koodivormingu reegleid.

JSCSi eesmärk on pakkuda vahendeid programmeerib teatud kodeerimisstiili juhendi järgimist. Kuigi JSCS ei kontrolli vigu ja vigu, kasutavad seda paljud tehnoloogiatööstuse suured mängijad, näiteks Google, AirBnB ja AngularJS, kuna see aitab arendajatel hoida hästi loetavat ja järjepidevat koodibaasi.

JSCS on reaalajasäästja, kuna see parandab automaatselt teie vormindamisvead, nii et sa ei pea neid üksteise järel läbi minema. Sellel on palju erinevaid eelseadeid, mis kuuluvad suurematesse projektidesse, nagu Google, Grunt või Wikimedia kodeerimise stiili eelseadistused, mida saate oma projektides hõlpsasti kasutada, kuid saate luua ka oma kohandatud konfiguratsiooni.

10. StandardJS

StandardJS või JavaScript Standard Style on nagu JSCS-i sarnane koodistiilis, kuid erineb lihtsusest ja lihtsusest. StandardJS võib olla suurepärane valik, kui te ei soovi aega koos konfiguratsiooniga veeta, tahan lihtsalt tõhusat vahendit, mis karbist välja läheb.

StandardJS järgib käputäis eelnevalt kirjutatud vormindamise reegleid ja selle põhiväärtus on hoida teie kodeeriv tööprotsess häireteta, nii et sa ei saa muuta reegleid, millega te ei nõustu. Valige ainult StandardJS, kui te ei soovi kohandatud konfigureerimist ja tahad järgige oma JavaScript-failides ühtset koodi.