10 CSS a JavaScript Linting Tools pro optimalizaci kódu
Nástroje na obkládání mohou významným způsobem pomoci vývojářům psát kvalitní, optimalizovaný kód. Linting je proces kontroly kódu, který hledá chyby ve zdrojovém kódu a označí potenciální chyby. Většina linters používá techniku analýzy statického kódu, což znamená kód je zkontrolován, aniž by byl skutečně proveden.
Můžete zapisovat při různých příležitostech, například v reálném čase, když zapisujete kód, když soubor ukládáte, když provádíte změny nebo před tím, než kód přejde do výroby. Bez ohledu na to, jaký je váš pracovní postup, důležitou věcí je pravidelně, může vás zachránit před mnoha bolestmi hlavy v budoucnosti.
Linters nejsou pouze nástroje pro prevenci chyb, ale mohou být také efektivně využity při ladění najít chyby, které je těžké zachytit v opačném případě. V tomto příspěvku se podíváme na 10 výkonných nástrojů pro vytváření linuxů, které můžete použít ke svázání souborů CSS a JavaScript, aby se zlepšila kvalita kódu..
1. CSSLint
CSSLint má samozřejmě v úmyslu "ublížit vašim pocitům", ale výměnou za to "dělá z vás kód mnohem lepší". CSSLint v současné době vede na trhu CSS linting. Je napsán v JavaScriptu, je to open-source a přichází s množstvím konfigurovatelných možností.
CSSLint vám umožní zvolit, jaký druh chyb a varování (kompatibilita, výkon, duplikace atd.) chcete otestovat, a validuje vaši syntaxi CSS proti pravidlům, která zvolíte.
Nepracuje pouze v prohlížeči, ale má také rozhraní příkazového řádku a můžete jej také integrovat do vlastního systému sestavení.
2. SublimeLinter CSSLint
CSSLint je tak efektivní CSS linter, že je těžké najít konkurenta, který měří až k němu. Pravděpodobně to je důvod, proč SublimeLinter linting framework vybudoval svůj CSS liningový plugin. SublimeLinter je plugin SublimeText, který poskytuje uživatelům prostředky k tomu, aby jejich kód (CSS, PHP, Python, Java, Ruby, atd.) zalisovali přímo v editu SublimeTextr.
Před instalací samotného pluginu SublimeLinter CSSLint musíte nainstalovat CSSLint jako modul Node.js. Skvělá věc na tomto šikovném nástroji je, že vy pouze jednou, nebo pokud jste spokojeni s výchozími hodnotami, které ani nemusíte dělat, pak můžete vždy získat příslušná varování a upozornění v editoru SublimeText bez dalších potíží.
3. StyleLint
StyleLint pomáhá vývojářům vyhnout se chybám v CSS, SCSS nebo jakékoli jiné syntaxi, kterou může PostCSS analyzovat. StyleLint testy na více než sto pravidel, a můžete vyberte, které z nich chcete zapnout (viz příklad konfigurace).
Pokud nechcete vytvořit vlastní konfiguraci, můžete se také rozhodnout pro pre-písemný, standardní konfigurační program, který obsahuje asi 60 pravidel StyleLint. StyleLint je poměrně flexibilní nástroj, lze jej rozšířit o další pluginy a používat ve 3 různých formách: jako nástroj příkazového řádku, jako modul Node.js nebo jako plugin PostCSS.
4. W3C CSS Validator
Ačkoli W3C CSS Validator není obvykle považován za nástroj pro obložení, dává vývojářům velkou příležitost zkontrolovat zdrojový kód CSS proti oficiálním standardům W3C. W3C postavil své validátory se záměrem poskytnout nástroj, který je podobný programu Lint programu pro jazyk C.
Nejprve vytvořili validátor HTML značek, po kterém následoval validátor CSS. W3C CSS validator nemá tolik možností jako CSSLint, ale to vrátí podrobné, snadno srozumitelné chybové zprávy a upozornění.
Jako dodatečnou funkci můžete také zkontrolovat kód podle nejnovějších standardů mobilních webových stránek W3C, což není v době mobilního webu špatná věc..
5. Dirty Markup
Dirty Markup čistí, formátuje a ověřuje váš HTML, CSS a JavaScript kód. To může být skvělá volba, pokud máte rádi přímočarý design a chcete rychlé řešení. Dirty Markup hází chybové zprávy a oznámení v reálném čase zatímco ty zapište nebo upravte kód v editoru.
Když narazíte “Čistý” tlačítko, to opraví chyby syntaxe najednou, upraví formát, ale ponechá varování nedotčená nechat je vyřešit, jak chcete. Nelze vybrat, která pravidla chcete testovat, ale všechny tři typy souborů máte několik nastavení, která vám umožní rozhodnout o formátu čištěného výstupu.
6. JSLint
JSLint byl poprvé vydán v roce 2002 Douglasem Crockfordem a od té doby neztratil hybnou sílu, takže můžete bezpečně předpokládat, že je to stabilní a spolehlivý nástroj na vycpávání JavaScriptu..
JSLint dokáže zpracovat zdrojový kód JavaScriptu a text JSON a přichází s hotová konfigurace, která následuje po osvědčených postupech JS Crockford psal o v jeho knize opravňoval JavaScript: Dobré části.
JSLint má několik možností, ze kterých si můžete vybrat, ale vy nelze přidat vlastní pravidla nebo zakázat většinu funkcí. JSLint již začal používat nejnovější standardy ECMAScript 6, můžete si zde prohlédnout aktuální fázi implementace ES6 zde.
7. JSHint
JSHint je velmi populární vidlice JSLint, a je používán velkých technologických společností, jako je Facebook, Twitter a Medium
JSHint je projekt řízený komunitou, který začínal snahou vytvořit více konfigurovatelnou a méně názornou verzi JSLintu. JSHint umožňuje vývojářům konfigurovat některou z možností lemování a umístit přizpůsobenou konfiguraci do samostatného souboru, což je nástroj, který usnadňuje opakované použití nástroje a je vhodný pro větší projekty..
Můžete nejen používat JSHint k lint vanilla JavaScript, ale také má out-of-the-box podporu pro mnoho populárních JS knihoven, jako jQuery, Mootools, Mocha a Node.js.
8. ESLint
ESLint je poslední velká věc na JavaScript linting krajiny. Jeho popularita pramení z vysoce flexibilní povahy. Můžete nejen přizpůsobit tuny svých sofistikovaných pravidel pro vkládání a integrovat je se všemi hlavními editory kódu, ale můžete také snadno rozšířit své funkce přidáním různých pluginů.
Zadáním voleb analyzátoru můžete také vyberte, který standard jazyka JS chcete podporovat během procesu lintingu, což znamená, že můžete nejen kontrolovat skripty proti výchozí syntaxi ECMAScript 5, ale také proti ECMAScript 6, ECMAScript 7 a JSX.
9. JSCS
JSCS nebo JavaScript Code Style je zásuvný kódovací kód pro JavaScript, který kontroluje pravidla pro formátování kódu.
Cílem JSCS je poskytnout prostředky programově vynucovat dodržování určitého průvodce stylem kódování. Ačkoli JSCS nekontroluje chyby a chyby, stále je používán mnoha významnými hráči v technice, jako je Google, AirBnB a AngularJS, protože pomáhá vývojářům udržet vysoce čitelnou, konzistentní kódovou základnu..
JSCS je spořič reálného času, protože automaticky opravuje chyby formátování, takže je nemusíte procházet jeden po druhém. Má mnoho různých přednastavení patřících k větším projektům, například předvolbám kódování Google, Grunt nebo Wikimedia, které můžete snadno použít ve vlastních projektech, ale můžete také vytvořit vlastní konfiguraci.
10. StandardJS
StandardJS, nebo JavaScript Standard Style je linter kódového stylu stejně jako JSCS, ale liší se od něj ve své jednoduchosti a jednoduchosti. StandardJS může být vynikající volbou, pokud nechcete trávit čas s konfigurací, Chci jen efektivní nástroj, který se vyčerpá.
StandardJS následuje několik předběžně psaných formátovacích pravidel a jeho základní hodnotou je udržet vaše kódování workflow distrakční-free, takže nemůžete změnit pravidla, s nimiž nesouhlasíte. StandardJS zvolte pouze v případě, že nechcete mít vlastní konfiguraci, a chcete jen vynutit konzistentní styl kódu v souborech JavaScriptu.
