10 CSS och JavaScript Linting Verktyg för kodoptimering

Lintingverktyg kan betydligt hjälpa utvecklare att skriv en bra kvalitet, optimerad kod. Linting är en kodkontrollprocess som letar efter fel i källkoden och flaggar potentiella buggar. De flesta linters använder den statiska kodanalysstekniken, vilket betyder koden kontrolleras utan att den faktiskt exekveras.

Du kan ludd i olika tillfällen, som i realtid medan du skriver koden, när du sparar filen, när du gör för ändringar eller innan koden går i produktion. Vad din arbetsflöde är, är det viktigt att ludd på regelbunden basis, som det kan rädda dig från många huvudvärk i framtiden.

Liners är inte bara verktyg för att förebygga fel, men de kan också användas effektivt vid felsökning att hitta fel som är svåra att fånga annat. I det här inlägget kommer vi att kolla in 10 kraftfulla linsverktyg som du kan använda för att lina dina CSS- och JavaScript-filer för att förbättra kvaliteten på din kod.

1. CSSLint

CSSLint har visserligen för avsikt att "skada dina känslor", men i utbyte gör det dig "mycket bättre". CSSLint leder för närvarande marknaden för CSS-linting. Den är skriven i JavaScript, den är öppen källkod och levereras med många konfigurerbara alternativ.

CSSLint låter dig göra det välj vilken typ av fel och varningar (kompatibilitet, prestanda, dubbelarbete etc.) du vill testa för, och Validerar ditt CSS-syntax mot de regler du väljer.

Det fungerar inte bara i webbläsaren, men har också ett kommandoradsgränssnitt, och du kan också integrera det i ditt eget byggsystem också.

2. SublimeLinter CSSLint

CSSLint är en så effektiv CSS-linter att det är svårt att hitta en konkurrent som mäter sig. Förmodligen det var anledningen till att den SublimeLinter linting ramen byggde sin CSS linting plugin ovanpå den. SublimeLinter är en SublimeText plugin som ger användarna ett sätt att lina sin kod (CSS, PHP, Python, Java, Ruby, etc.) direkt inuti SublimeText editor.

Innan du installerar det självklara CSSLint-pluginet SublimeLinter måste du installera CSSLint som en Node.js-modul. Det stora med det här praktiska verktyget är det du behöver bara konfigurera inställningarna en gång, eller om du är nöjd med standardinställningarna behöver du inte ens göra det, då kan du alltid få relevanta varningar och meddelanden i din SublimeText-editor utan ytterligare problem.

3. StyleLint

StyleLint hjälper utvecklare att undvika fel i CSS, SCSS eller andra syntaxer som PostCSS kan analysera. StyleLint tester för över hundra regler, och du kan välj vilka som du vill slå på (se ett exempel config).

Om du inte vill bygga din egen konfiguration kan du också välja en förskriven standardkonfiguration som innehåller cirka 60 StyleLint-regler. StyleLint är ett ganska flexibelt verktyg, det kan utökas med extra plugins och används i 3 olika former: som ett kommandoradsverktyg, som en Node.js-modul eller som en PostCSS-plugin.

4. W3C CSS Validator

Även om W3Cs CSS Validator vanligtvis inte anses vara ett lintingverktyg, ger det utvecklare en bra möjlighet att kontrollera sin CSS-källkod mot W3Cs officiella standarder. W3C byggde sina validatorer med avsikt att tillhandahålla ett verktyg som liknar Lint-programkontrollen för C-språket.

Först skapade de HTML-markupvalideraren som senare följdes av CSS-valideraren. W3C: s CSS-validator har inte så många alternativ som CSSLint, men det returnerar detaljerade, lättförståliga felmeddelanden och meddelanden.

Som en extra funktion kan du också kontrollera din kod mot W3Cs senaste mobila webbstandarder, vilket inte är en dålig sak i mobilbanans era..

5. Dirty Markup

Dirty Markup rensar, formaterar och validerar HTML, CSS och JavaScript-koden. Det kan vara ett bra val om du gillar enkel design och vill ha en snabb lösning. Dirty Markup kastar felmeddelanden och meddelanden i realtid medan du skriv eller ändra din kod inne i redigeraren.

När du slår på “Rena” knapp, den åtgärdar syntaxfel på en gång, städar upp formatet, men lämnar varningarna intakta låter dig lösa dem men du vill. Du kan inte välja vilka regler du vill testa för, men alla tre filtyper har några inställningar som gör att du kan bestämma formatet av den rengjorda utmatningen.

6. JSLint

JSLint släpptes första gången 2002 av Douglas Crockford och har inte förlorat fart sedan dess, så du kan säkert anta att det är ett stabilt och pålitligt JavaScript-lintverktyg.

JSLint kan behandla JavaScript-källkod och JSON-text, och den kommer med a färdig konfiguration som följer JS bästa praxis Crockford skrev om i sin bok med titeln JavaScript: The Good Parts.

JSLint har några alternativ du kan välja mellan, men du kan inte lägga till egna regler, eller inaktivera de flesta funktionerna. JSLint har redan börjat inkludera de senaste ECMAScript 6-standarderna, du kan kolla in det aktuella steget i ES6-implementeringen här.

7. JSHint

JSHint är en mycket populär gaffel av JSLint, och den används av stora teknikföretag som Facebook, Twitter och Medium

JSHint är ett community-driven projekt som startade med strävan att skapa en mer konfigurerbar och mindre uppfattad version av JSLint. JSHint tillåter utvecklare att konfigurera några av sina lintingalternativ och placera den anpassade konfigurationen i en separat fil, ett alternativ som gör att verktyget enkelt kan återanvändas och passar bra för större projekt.

Du kan inte bara använda JSHint till lint vanilla JavaScript, det har också out-of-the-box support för många populära JS-bibliotek, som jQuery, Mootools, Mocha och Node.js.

8. ESLint

ESLint är den senaste stora grejen på JavaScript-linting landskapet. Dess popularitet härrör från dess mycket flexibla natur. Du kan inte bara anpassa tonar av sina sofistikerade lintingregler och integrera den med alla större kodredaktörer, men du kan också enkelt förlänga dess funktioner genom att lägga till olika plugins till den.

Genom att ange parseralternativen kan du också välj vilken standard av det JS-språk du vill stödja under linting-processen, vilket innebär att du inte bara kan kontrollera dina skript mot den vanliga ECMAScript 5-syntaxen utan också mot ECMAScript 6, ECMAScript 7 och JSX.

9. JSCS

JSCS eller JavaScript Code Style är en pluggbar kodstilsignal för JavaScript, som kontrollerar regler för kodformatering.

Målet med JSCS är att ge ett medel att programmässigt genomdriva efterlevnad av en viss kodningsstilguide. Även om JSCS inte kontrollerar fel och fel används den fortfarande av många stora aktörer inom teknikindustrin, till exempel Google, AirBnB och AngularJS, eftersom det hjälper utvecklare att hålla en läsbar och konsekvent kodbas.

JSCS är en realtidssparare, eftersom det automatiskt fixar dina formateringsfel, så du behöver inte gå igenom dem en efter en. Det har många olika förinställningar som hör till större projekt, till exempel Google, Grunt eller Wikimedia kodningsstil, som du enkelt kan använda i dina egna projekt, men Du kan också skapa din egen anpassade konfiguration.

10. StandardJS

StandardJS eller JavaScript Standard Style är en kodstilslinter som JSCS, men skiljer sig från det i sin enkelhet och enkelhet. StandardJS kan vara ett utmärkt val, om du inte vill spendera tid med konfiguration, vill bara ha ett effektivt verktyg som löper ut ur lådan.

StandardJS följer en handfull förskrivna formateringsregler och dess kärnvärde är att hålla din kodande arbetsflödesdistraktionfri, så du kan inte ändra reglerna du inte håller med. Välj bara StandardJS om du inte vill ha en anpassad konfiguration och bara vill genomdriva en konsekvent kodstil över dina JavaScript-filer.