10 CSS a JavaScript Linting Tools pre optimalizáciu kódu

Linting nástroje môžu výrazne pomôcť vývojárom napísať dobrú kvalitu, optimalizovaný kód. Linting je proces kontroly kódu, ktorý hľadá chyby vo zdrojovom kóde a označuje možné chyby. Väčšina linterov používa techniku ​​statického kódu, čo znamená kód je skontrolovaný bez toho, aby bol skutočne vykonaný.

Počas ukladania súborov môžete pri rôznych príležitostiach, ako napríklad v reálnom čase pri písaní kódu, ukladať súbor, alebo predtým, než sa kód spustí do výroby. Bez ohľadu na to, aký je váš pracovný postup, je dôležité, aby ste pravidelne, ako to môže v budúcnosti ušetriť z mnohých bolesti hlavy.

Linter nie sú len nástroje na prevenciu chýb, ale môžu byť tiež efektívne použité počas ladenia nájsť chyby, ktoré sa ťažko zachytia inak. V tomto príspevku sa pozrieme na 10 výkonných nástrojov na lintovanie, ktoré môžete použiť na lustovanie súborov CSS a JavaScript s cieľom zlepšiť kvalitu vášho kódu.

1. CSSLint

CSSLint určite zamýšľa "ublížiť vaše pocity", ale výmenou za to "robí vám kód oveľa lepšie". CSSLint je v súčasnosti vedúcim trhom CSS linting. Je napísaný v jazyku JavaScript, je to open-source a dodáva sa s tonami konfigurovateľných možností.

CSSLint vám umožňuje Vyberte, aké chyby a varovania (kompatibilita, výkon, duplicita atď.), ktoré chcete otestovať, a validuje syntax CSS proti pravidlám, ktoré ste zvolili.

Nielenže funguje v prehliadači, ale má aj rozhranie príkazového riadku a môžete ho integrovať aj do vlastného systému.

2. SublimeLinter CSSLint

CSSLint je tak efektívna CSS linter, že je ťažké nájsť konkurenta, ktorý sa k nej prispieva. Pravdepodobne to bol dôvod, prečo rámcový systém SublimeLinter linting na svojom vrchole vytvoril doplnok CSS pre linting. SublimeLinter je plugin pre SublimeText (CSS, PHP, Python, Java, Ruby atď.) priamo v editore SublimeTextr.

Pred inštaláciou samotného pluginu SublimeLinter CSSLint musíte nainštalovať CSSLint ako modul Node.js. Skvelá vec o tomto šikovnom nástroji je, že vy stačí iba nakonfigurovať nastavenia, alebo ak ste spokojní s predvolenými hodnotami, ktoré to ani nemusíte robiť, potom môžete vždy dostať príslušné upozornenia a upozornenia vo vašom editore SublimeText bez ďalších ťažkostí.

3. StyleLint

StyleLint pomáha vývojárom predchádzať chybám v CSS, SCSS alebo iných syntaxiach, ktoré môže analyzovať PostCSS. ŠtýlLint testuje viac ako sto pravidiel a môžete vyberte tie, ktoré chcete zapnúť (pozri príklad config).

Ak nechcete vytvoriť vlastnú konfiguráciu, môžete si tiež vybrať predpísanú štandardnú konfiguráciu, ktorá obsahuje asi 60 pravidiel pre StyleLint. StyleLint je pomerne flexibilný nástroj, ktorý je možné rozšíriť o ďalšie doplnky a používa sa v troch rôznych formách: ako nástroj príkazového riadku ako modul Node.js alebo ako plugin PostCSS.

4. Validátor W3C CSS

Hoci W3C CSS Validator sa zvyčajne nepovažuje za nástroj na lustovanie, poskytuje vývojárom skvelú príležitosť skontrolovať ich zdrojový kód CSS proti oficiálnym štandardom W3C. Spoločnosť W3C vytvorila svoje validátory s úmyslom poskytnúť nástroj, ktorý je podobný nástroju kontroly Lint pre jazyk C.

Spočiatku vytvorili validátor HTML značiek, ktorý neskôr nasledoval validátor CSS. Validátor CSS W3C nemá toľko možností, ako CSSLint, ale to vráti podrobné, ľahko zrozumiteľné chybové hlásenia a upozornenia.

Ako ďalšiu funkciu môžete tiež skontrolovať svoj kód v porovnaní s najnovšími normami mobilných webových stránok W3C, čo nie je zlá vec mobilného webu.

5. Znečistené označenie

Dirty Markup čistí, formátuje a overuje kód HTML, CSS a JavaScript. Môže to byť skvelá voľba, ak máte radi čistý dizajn a chcete rýchlo vyriešiť problém. Dirty Markup háda chybové hlásenia a upozornenia v reálnom čase zatiaľ čo vy napísať alebo upraviť kód v rámci editora.

Keď narazíte “čistý” tlačidlo, to opravuje chyby syntaxe naraz, upravuje formát, ale ponecháva varovania neporušené necháte ich vyriešiť, ale chcete. Nemôžete si vybrať pravidlá, pre ktoré chcete testovať, ale všetky tri typy súborov máte niekoľko nastavení, ktoré vám umožnia rozhodnúť formát vyčisteného výstupu.

6. JSLint

JSLint bol prvýkrát vydaný v roku 2002 Douglasom Crockfordom a odvtedy sa nestretol, takže si môžete bezpečne predpokladať, že je to stabilný a spoľahlivý nástroj na písanie textu v jazyku JavaScript.

JSLint môže spracovávať zdrojový kód JavaScript a text JSON a je dodávaný s ready-made konfigurácia, ktorá sleduje osvedčené postupy JS Crockford napísal vo svojej knihe s názvom JavaScript: The Good Parts.

JSLint má niekoľko možností, z ktorých si môžete vybrať, ale vy nemôže pridať vlastné vlastné pravidlá alebo zakázať väčšinu funkcií. JSLint už začal obsahovať najnovšie štandardy ECMAScript 6, môžete si pozrieť aktuálnu fázu implementácie ES6 tu.

7. JSHint

JSHint je veľmi populárna vidlica JSLint a používa ju významné tech spoločnosti ako Facebook, Twitter a Medium

JSHint je komunitný projekt, ktorý začal s úsilím vytvoriť konfigurovateľnejšiu a menej zdvorilostnú verziu JSLint. JSHint umožňuje vývojárom konfigurovať ľubovoľné možnosti lustovania a umiestniť prispôsobenú konfiguráciu do samostatného súboru, čo je nástroj, ktorý umožňuje ľahko opätovne použiť nástroj a je vhodný pre väčšie projekty.

Môžete nielen používať JSHint na lakovanie vanilky JavaScript, ale tiež má mimo-box podporu pre mnoho populárnych JS knižnice, ako sú jQuery, Mootools, Mocha a Node.js.

8. ESLint

ESLint je posledná veľká vec na jazyku JavaScript. Jeho popularita vyplýva zo svojej vysoko flexibilnej povahy. Môžete nielen prispôsobiť tony jeho sofistikovaných pravidiel linting a integrovať ho so všetkými hlavnými editormi kódu, ale môžete tiež ľahko rozšíriť svoje funkcie pridaním rôznych pluginov.

Zadaním možností analyzátora môžete tiež vyberte, ktorý jazyk JS jazyka chcete podporovať počas procesu lustovania, čo znamená, že nie len skontrolovať svoje skripty proti štandardnej syntaxi ECMAScript 5, ale aj proti ECMAScript 6, ECMAScript 7 a JSX.

9. JSCS

JSCS alebo JavaScript Code Style je pluggable linka pre štýl kódu pre jazyk JavaScript, ktorá kontroluje pravidlá pre formátovanie kódu.

Cieľom JSCS je poskytnúť prostriedky programovo presadzovať dodržiavanie určitého sprievodcu štýlom kódovania. Aj keď JSCS nekontroluje chyby a chyby, stále ju používajú mnohí významní hráči v technickom priemysle, ako sú Google, AirBnB a AngularJS, pretože pomáhajú vývojárom udržiavať vysoko čitateľnú a konzistentnú kódovú základňu.

JSCS je reálny šetrič času, pretože automaticky opravuje vaše formátovacie chyby, takže nemusíte prechádzať jeden po druhom. Má mnoho rôznych predvolieb patriacich k väčším projektom, ako sú predvoľby štýlu Google, Grunt alebo Wikimedia, ktoré môžete jednoducho použiť vo svojich vlastných projektoch. môžete tiež vytvoriť vlastnú vlastnú konfiguráciu.

10. StandardJS

Štandardný štýl StandardJS alebo JavaScript je textový štýl linter rovnako ako JSCS, ale líši sa od neho v jeho jednoduchosti a priamočiarosti. StandardJS môže byť vynikajúcou voľbou, ak nechcete tráviť čas s konfiguráciou, stačí len efektívny nástroj, ktorý vyčerpá box.

StandardJS nasleduje niekoľko predpísaných pravidiel formátovania a jeho základnou hodnotou je udržať kódovací pracovný postup bez rozptýlenia, takže nemôžete zmeniť pravidlá, s ktorými nesúhlasíte. Zvoľte si iba StandardJS, ak nechcete mať vlastnú konfiguráciu a len chcete presadzujte konzistentný štýl kódu vo vašich súboroch JavaScriptu.