10 CSS og JavaScript Linting værktøjer til kodeoptimering
Linting værktøjer kan betydeligt hjælpe udviklere til skriv god kvalitet, optimeret kode. Linting er en kodekontrolproces, der søger fejl i kildekoden og flagger potentielle fejl. De fleste linters bruger den statiske kode analyse teknik, hvilket betyder koden er tjekket uden at blive rent faktisk udført.
Du kan lomme i forskellige lejligheder, som i realtid, mens du skriver koden, når du gemmer filen, når du forpligter ændringerne, eller før koden går i produktion. Uanset hvad din arbejdsgang er, er det vigtigt at lint med jævne mellemrum, da det kan spare dig for mange hovedpine i fremtiden.
Liners er ikke kun bug forebyggelsesværktøjer, men de kan også bruges effektivt under debugging at finde fejl, der er svære at fange Ellers. I dette indlæg vil vi tjekke 10 kraftfulde linting-værktøjer, du kan bruge til at lint dine CSS- og JavaScript-filer for at forbedre kvaliteten af din kode.
1. CSSLint
CSSLint har til hensigt at "skade dine følelser", men i bytte gør det "din kode meget bedre". CSSLint fører for tiden markedet for CSS-linting. Det er skrevet i JavaScript, det er open source, og leveres med mange konfigurerbare muligheder.
CSSLint giver dig mulighed for vælg hvilke slags fejl og advarsler (kompatibilitet, ydeevne, duplikering osv.) du vil teste for, og Validerer din CSS-syntaks mod de regler, du vælger.
Det virker ikke kun i browseren, men har også en kommandolinje grænseflade, og du kan også integrere det i dit eget build system.
2. SublimeLinter CSSLint
CSSLint er en så effektiv CSS-linter, at det er svært at finde en konkurrent, der måler op til det. Sandsynligvis det er grunden til, at SublimeLinter lintingrammen bygget sin CSS linting plugin oven på den. SublimeLinter er et SublimeText plugin der giver brugerne mulighed for at lint deres kode (CSS, PHP, Python, Java, Ruby, etc.) lige indenfor SublimeText editor.
Inden du installerer selve SublimeLinter CSSLint-plugin'et, skal du installere CSSLint som et Node.js-modul. Det store ved dette handy værktøj er det dig skal kun konfigurere indstillingerne en gang, eller hvis du er tilfreds med standardværdierne, behøver du ikke engang at gøre det, så kan du altid få de relevante advarsler og anmeldelser i din SublimeText editor uden yderligere besvær.
3. StyleLint
StyleLint hjælper udviklere med at undgå fejl i CSS, SCSS eller andre syntaxer, som PostCSS kan analysere. StyleLint tester for over hundrede regler, og du kan Vælg hvilke som du vil tænde for (se et eksempel config).
Hvis du ikke ønsker at opbygge din egen konfiguration, kan du også vælge en forudskrevet, standardkonfiguration, der indeholder omkring 60 StyleLint-regler. StyleLint er et ret fleksibelt værktøj, det kan udvides med ekstra plugins og bruges i 3 forskellige former: som et kommandolinjeværktøj, som et Node.js-modul eller som et PostCSS-plugin.
4. W3C CSS Validator
Selvom W3Cs CSS Validator normalt ikke tænkes som et linting-værktøj, giver det udviklere en fantastisk mulighed for at kontrollere deres CSS-kildekode mod W3C's officielle standarder. W3C byggede sine validatorer med det formål at levere et værktøj, der ligner Lint program checker for C sprog.
Først oprettede de HTML-markup-validatoren, som senere blev fulgt af CSS-validatoren. W3Cs CSS-validator har ikke så mange muligheder som CSSLint, men det returnerer detaljerede, letforståelige fejlmeddelelser og meddelelser.
Som en ekstra funktion kan du også tjekke din kode mod W3Cs seneste mobile webstandarder, hvilket ikke er en dårlig ting i mobilwebens æra.
5. Dirty Markup
Dirty Markup renser, formaterer og validerer din HTML, CSS og JavaScript-kode. Det kan være et godt valg, hvis du kan lide ligefrem design og ønsker en hurtig løsning. Dirty Markup kaster fejlmeddelelser og meddelelser i realtid mens du skriv eller rediger din kode inde i editoren.
Når du rammer “Ren” knappen, den retter syntaksfejl på en gang og rydder op på formatet, men efterlader advarslerne intakte så du kan løse dem, men du vil. Du kan ikke vælge hvilke regler du vil teste for, men alle tre filtyper Få nogle indstillinger, der gør det muligt at bestemme formatet af det rensede output.
6. JSLint
JSLint blev først udgivet i 2002 af Douglas Crockford og har ikke mistet momentum siden da, så du kan sikkert gå ud fra, at det er et stabilt og pålideligt JavaScript linting værktøj.
JSLint kan behandle JavaScript-kildekoden og JSON-teksten, og den kommer med a færdig konfiguration, der følger JS bedste praksis Crockford skrev om i sin bog med titlen JavaScript: The Good Parts.
JSLint har nogle få muligheder, du kan vælge imellem, men du kan ikke tilføje dine egne regler, eller deaktivere de fleste funktioner. JSLint er allerede begyndt at inkludere de seneste ECMAScript 6 standarder, du kan tjekke den nuværende fase af ES6 implementeringen her.
7. JSHint
JSHint er en meget populær gaffel af JSLint, og den bruges af store tech virksomheder som Facebook, Twitter og Medium
JSHint er et fællesskabsdrevet projekt, der startede med bestræbelserne på at Opret en mere konfigurerbar og mindre opfattet version af JSLint. JSHint giver udviklere mulighed for at konfigurere nogle af sine linting-muligheder og placere den tilpassede konfiguration i en separat fil, en mulighed, der gør det nemt at genbruge værktøjet og passer godt til større projekter.
Du kan ikke kun bruge JSHint til lint vanilla JavaScript, det har også out-of-the-box support til mange populære JS biblioteker, som jQuery, Mootools, Mocha og Node.js.
8. ESLint
ESLint er den seneste store ting på JavaScript-linting-landskabet. Dens popularitet stammer fra dens meget fleksible karakter. Du kan ikke kun tilpasse tonsvis af sine sofistikerede lintingregler og integrere det med alle større kode redaktører, men du kan også nemt udvide dens funktionaliteter ved at tilføje forskellige plugins til den.
Ved at angive parserindstillingerne kan du også Vælg hvilken standard af det JS-sprog, du vil støtte under linting processen, hvilket betyder at du ikke kun kan kontrollere dine scripts mod standard ECMAScript 5 syntaksen, men også mod ECMAScript 6, ECMAScript 7 og JSX.
9. JSCS
JSCS eller JavaScript Code Style er en pluggbar kode stil linter til JavaScript, der kontrollerer kodeformatering regler.
Målet med JSCS er at give et middel til programmatisk håndhæve overholdelse af en bestemt kodestilguide. Selvom JSCS ikke kontrollerer fejl og fejl, bruges den stadig af mange store aktører inden for teknologisk industri, som Google, AirBnB og AngularJS, da det hjælper udviklere med at holde en meget læsbar, konsekvent kodebase.
JSCS er en real-time-saver, da det automatisk retter dine formateringsfejl, så du behøver ikke at gennemgå dem en efter én. Den har mange forskellige forudindstillinger, der tilhører større projekter, som f.eks. Google, Grunt eller Wikimedia-kodningstilstandsindstillinger, som du nemt kan bruge i dine egne projekter, men Du kan også oprette din egen brugerdefinerede konfiguration.
10. StandardJS
StandardJS eller JavaScript Standard Style er en kode stil linter ligesom JSCS, men adskiller sig fra det i sin enkelhed og ligefremhed. StandardJS kan være et glimrende valg, hvis du ikke vil bruge tid med konfiguration, vil bare have et effektivt værktøj, der løber tør for kassen.
StandardJS følger en håndfuld forhåndsskrevne formateringsregler, og dens kerneværdi er at holde din kodende workflow distraktionsfri, så du kan ikke ændre de regler, du er uenig i. Vælg kun StandardJS, hvis du ikke vil have en brugerdefineret config, og vil bare håndhæve en konsekvent kode stil på tværs af dine JavaScript-filer.
