10 CSS és JavaScript Linting Tools a Kódoptimalizáláshoz
A foszló eszközök jelentősen segíthetnek a fejlesztőknek írjon jó minőségű, optimalizált kódot. A fóliázás olyan kódellenőrzési folyamat, amely hibákat keres a forráskódban, és jelzi a lehetséges hibákat. A legtöbb szálak statikus kódelemzési technikát használnak, ami azt jelenti a kódot a tényleges végrehajtás nélkül ellenőrzik.
Különböző alkalmakkor, például a valós idejű időnként, amikor a kódot írja le, a fájl mentésekor, a módosítások végrehajtásakor, vagy a kód gyártása előtt menthet. Bármi is legyen a munkafolyamata, a fontos dolog lint rendszeresen, mivel a jövőben sok fejfájástól menthet meg.
A szálak nem csak hibakeresési eszközök, de hatékonyan használhatók a hibakeresés során is hogy nehezen elkaphatók a hibák másképp. Ebben a hozzászólásban megnézzük a 10 hatékony szerszámszerszámot, amellyel a CSS és a JavaScript fájlokat lintálhatja a kód minőségének javítása érdekében.
1. CSSLint
A CSSLint nyilvánvalóan szándékában áll, hogy "fájdalmasan érzi magát", de cserébe "sokkal jobban kódolja". A CSSLint jelenleg vezeti a CSS-féle tapadás piacát. Ez JavaScript-ben íródott, nyílt forráskódú, és sok konfigurálható opcióval rendelkezik.
A CSSLint lehetővé teszi válassza ki, hogy milyen hibák és figyelmeztetések (kompatibilitás, teljesítmény, másolás stb.) tesztelni akar, és érvényesíti a CSS szintaxist az általad választott szabályokkal szemben.
Ez nem csak a böngészőben működik, hanem egy parancssori felülettel is rendelkezik, és a saját építési rendszerébe is integrálható.
2. SublimeLinter CSSLint
A CSSLint olyan hatékony CSS linter, hogy nehéz megtalálni egy versenytársat, amelyik mérte fel. Valószínűleg ez az oka annak, hogy a SublimeLinter fóliázási keretrendszer felépítette CSS szöszcsatlakozóját. A SublimeLinter egy SublimeText bővítmény biztosítja a felhasználók számára a kódot (CSS, PHP, Python, Java, Ruby, stb.) a SublimeText edito belsejébenr.
Mielőtt maga telepíti a SublimeLinter CSSLint bővítményt, telepítenie kell a CSSLint-et Node.js modulnak. A praktikus eszköz nagyszerű dolog az, hogy te csak egyszer kell beállítania a beállításokat, vagy ha elégedett az alapértelmezett értékekkel, akkor ezt még nem kell tennie, akkor a SublimeText szerkesztőn belül bármikor megkaphatja a megfelelő figyelmeztetéseket és értesítéseket további gond nélkül.
3. StyleLint
A StyleLint segít a fejlesztőknek a CSS, az SCSS vagy a PostCSS által értelmezett más szintaxisok hibáinak elkerülésére. A StyleLint több mint száz szabályt tesztel, és lehet válassza ki, hogy melyiket szeretné bekapcsolni (lásd egy példa konfigurációt).
Ha nem szeretné létrehozni saját konfigurációját, akkor is választhat egy előre beírt szabványos konfigurációt, amely körülbelül 60 StyleLint szabályt tartalmaz. A StyleLint egy igen rugalmas eszköz, extra bővítményekkel bővíthető, és három különböző formában használható: parancssoros eszközként, Node.js modulként vagy PostCSS bővítményként.
4. W3C CSS érvényesítő
Bár a W3C CSS Validator-ját általában nem szöszeszközként tartják számon, a fejlesztőknek nagyszerű alkalmat biztosít a CSS-forráskód ellenőrzésére a W3C hivatalos szabványaival szemben. A W3C a validátorokat azzal a szándékkal építette, hogy olyan eszközt biztosítson, amely hasonlít a C nyelvre vonatkozó Lint programellenőrzéshez.
Először létrehozták a HTML jelölő validátort, amelyet később a CSS validátor követett. A W3C CSS validátorának nincs olyan sok lehetősége, mint a CSSLint részletes, könnyen érthető hibaüzeneteket és értesítéseket küld.
További szolgáltatásként a kódot a W3C legújabb mobil webes szabványai ellen is ellenőrizheti, ami nem rossz a mobil web korában.
5. Piszkos jelölés
A Dirty Markup tisztítja, formázza és validálja a HTML, CSS és JavaScript kódját. Nagyszerű választás lehet, ha egyszerű tervezést szeretne, és gyors megoldást szeretne. Piszkos jelölés hibaüzeneteket és értesítéseket dob valós időben amíg te írja be vagy módosítsa a kódot a szerkesztőben.
Amikor megérkezik a “Tiszta” gomb javítja a szintaxishibákat egyszerre, rendezi a formátumot, de a figyelmeztetéseket sértetlenül hagyja hagyja, hogy megoldja őket, de szeretné. Nem választhatja ki, hogy mely szabályokat szeretné tesztelni, de mindhárom fájltípus van néhány beállítás, amely lehetővé teszi a formátum kiválasztását a megtisztított kimenet.
6. JSLint
A JSLintet 2002-ben először a Douglas Crockford kiadta, és azóta nem vesztette el lendületét, így biztonságosan feltételezheti, hogy ez egy stabil és megbízható JavaScript-szöszkészítő eszköz..
A JSLint képes feldolgozni a JavaScript forráskódját és a JSON szöveget, és a a JS legjobb gyakorlatait követő kész konfiguráció Crockford írt a JavaScript: The Good Parts című könyvében.
A JSLintnek van néhány lehetősége, amelyek közül választhat, de te nem tudja hozzáadni a saját egyéni szabályait, vagy nem tudja letiltani a legtöbb funkciót. A JSLint már megkezdte a legújabb ECMAScript 6 szabványok beillesztését, itt megtekintheti az ES6 végrehajtásának jelenlegi szakaszát.
7. JSHint
A JSHint a JSLint rendkívül népszerű villája, és a főbb technológiai vállalatok, mint a Facebook, a Twitter és a Medium használják
A JSHint egy olyan közösség által vezérelt projekt, amely a törekvéssel kezdődött hozzon létre egy konfigurálhatóbb és kevésbé véleményezett változatot a JSLint. A JSHint lehetővé teszi a fejlesztők számára, hogy beállíthassák a szálkapcsolási lehetőségeket, és a testreszabott konfigurációt külön fájlba helyezzék, amely lehetővé teszi a szerszám újrahasznosítását, és alkalmas a nagyobb projektekhez..
Nemcsak a JSHint-t használhatja a vanília JavaScript-nek, hanem a népszerű JS-könyvtáraknak is, mint például a jQuery, a Mootools, a Mocha és a Node.js..
8. ESLint
Az ESLint a legfrissebb nagy dolog a JavaScript-foltok táján. Népszerűsége rendkívül rugalmas jellegéből adódik. Nem csak testre szabhatja a kifinomult szöszkötési szabályait, és integrálhatja azt minden nagyobb kódszerkesztővel, de könnyedén is kiterjeszti funkcióit különböző bővítmények hozzáadásával.
Az értelmező beállításainak megadásával is válassza ki a támogatni kívánt JS nyelv szabványát a linting folyamat során, ami azt jelenti, hogy nem csak az alapértelmezett ECMAScript 5 szintaxisával, hanem az ECMAScript 6, az ECMAScript 7 és a JSX ellen is ellenőrizheti a szkriptet..
9. JSCS
A JSCS, vagy a JavaScript kódstílus a plug-inable JavaScript stílust jelenti a JavaScript számára, amely ellenőrzi a kódformázási szabályokat.
A JSCS célja, hogy eszköze legyen programozottan érvényesíteni kell egy bizonyos kódolási stílus útmutatót. Bár a JSCS nem ellenőrzi a hibákat és a hibákat, a tech iparág számos jelentős szereplője, mint például a Google, az AirBnB és az AngularJS, továbbra is használja, mivel segít a fejlesztők számára, hogy jól olvasható, következetes kódbázist tartsanak.
A JSCS egy valós időmegtakarító, mivel automatikusan javítja a formázási hibákat, így nem kell egyenként átmennie őket. Számos különböző előbeállítással rendelkezik, amelyek nagyobb projektekhez tartoznak, mint például a Google, a Grunt vagy a Wikimedia kódolási stílusa, amelyeket könnyen használhat saját projektjeiben, de létrehozhat saját egyéni konfigurációt is.
10. StandardJS
A StandardJS, vagy a JavaScript Standard Style a JSCS-hez hasonló kódstílusú, de az egyszerűség és az egyszerűség szempontjából eltér attól. A StandardJS kiváló választás lehet, ha nem szeretne időt tölteni a konfigurációval, csak egy hatékony eszközt akarsz, ami elfogy a dobozból.
A StandardJS egy maroknyi előre megírt formázási szabályt követ, és annak alapértéke, hogy a kódolási munkafolyamatot figyelmen kívül hagyja, így nem tudja megváltoztatni azokat a szabályokat, amelyekkel nem ért egyet. Csak akkor válassza a StandardJS-t, ha nem kíván egyéni konfigurációt, és csak szeretné következetes kódstílus érvényesítése a JavaScript-fájlokban.
