10 CSS en JavaScript Linting Tools voor Code Optimalisatie

Lint-tools kunnen ontwikkelaars aanzienlijk helpen schrijf goede kwaliteit, geoptimaliseerde code. Linting is een codecontroleproces dat fouten in de broncode opzoekt en mogelijke bugs markeert. De meeste linters gebruiken de statische code-analysetechniek, wat betekent de code wordt gecontroleerd zonder daadwerkelijk te worden uitgevoerd.

U kunt verschillende soorten lint gebruiken, zoals in realtime terwijl u de code schrijft, wanneer u het bestand opslaat, wanneer u de wijzigingen vastlegt of voordat de code in productie gaat. Hoe uw workflow ook is, het belangrijkste is om lint op een regelmatige basis, omdat het je in de toekomst kan redden van veel hoofdpijn.

Linters zijn niet alleen bug-preventie-instrumenten, maar ze kunnen ook effectief worden gebruikt tijdens het debuggen om fouten te vinden die moeilijk te vangen zijn anders. In deze post zullen we 10 krachtige pluisgereedschappen bekijken die je kunt gebruiken om je CSS- en JavaScript-bestanden te pluisden om de kwaliteit van je code te verbeteren.

1. CSSLint

CSSLint is weliswaar van plan om "je gevoelens te kwetsen", maar in ruil daarvoor "maakt je code veel beter". CSSLint is momenteel marktleider op het gebied van CSS-linting. Het is geschreven in JavaScript, het is open-source en wordt geleverd met talloze configureerbare opties.

Met CSSLint kunt u dit doen kies wat voor soort fouten en waarschuwingen (compatibiliteit, prestaties, duplicatie, etc.) je wilt testen voor, en valideert uw CSS-syntaxis met de regels die u kiest.

Het werkt niet alleen in de browser, maar heeft ook een opdrachtregelinterface en je kunt het ook integreren in je eigen build-systeem.

2. SublimeLinter CSSLint

CSSLint is zo'n effectief CSS-linter dat het moeilijk is om een ​​concurrent te vinden die er naar toe werkt. Waarschijnlijk is dat de reden waarom het SublimeLinter-linting-framework zijn CSS-linting-plug-in er bovenop heeft gebouwd. SublimeLinter is een SublimeText-plug-in die biedt gebruikers een middel om hun code (CSS, PHP, Python, Java, Ruby, etc.) te pluis binnen de SublimeText editor.

Voordat u de SublimeLinter CSSLint-plug-in zelf installeert, moet u CSSLint als module Node.js installeren. Het mooie van deze handige tool is dat jij hoeft de instellingen maar één keer te configureren, of als u tevreden bent met de standaardinstellingen hoeft u dat niet eens te doen, dan kunt u altijd de relevante waarschuwingen en meldingen in uw SublimeText-editor krijgen zonder dat u zich nog meer zorgen hoeft te maken.

3. StyleLint

StyleLint helpt ontwikkelaars bij het vermijden van fouten in CSS, SCSS of andere syntaxis die PostCSS kan ontleden. StyleLint test voor meer dan honderd regels, en dat kan kies welke u wilt inschakelen (zie een voorbeeldconfiguratie).

Als u niet uw eigen configuratie wilt maken, kunt u ook kiezen voor een vooraf geschreven, standaardconfiguratie die ongeveer 60 StyleLint-regels bevat. StyleLint is een vrij flexibel hulpmiddel, het kan worden uitgebreid met extra plug-ins en worden gebruikt in 3 verschillende vormen: als een opdrachtregel, als een Node.js-module of als een PostCSS-plug-in.

4. W3C CSS Validator

Hoewel CSS Validator van W3C meestal niet wordt gezien als een hulpmiddel bij het plukken, biedt het ontwikkelaars een geweldige mogelijkheid om hun CSS-broncode te controleren aan de hand van de officiële normen van W3C. W3C heeft zijn validators gebouwd met de bedoeling om een ​​tool te bieden die vergelijkbaar is met de Lint-programmacontrole voor de C-taal.

Aanvankelijk maakten ze de HTML-markup-validator die later werd gevolgd door de CSS-validator. De CSS-validator van W3C heeft niet zoveel opties als CSSLint, maar wel retourneert gedetailleerde, gemakkelijk te begrijpen foutmeldingen en meldingen.

Als extra functie kunt u uw code ook controleren aan de hand van de recente mobiele webstandaarden van W3C, wat geen slechte zaak is in het tijdperk van het mobiele internet..

5. Dirty Markup

Dirty Markup reinigt, maakt en valideert uw HTML-, CSS- en JavaScript-code. Het kan een goede keuze zijn als u van een rechtlijnig ontwerp houdt en een snelle oplossing wilt. Dirty Markup werpt foutmeldingen en meldingen in realtime terwijl jij schrijf of wijzig uw code in de editor.

Wanneer je de “Schoon” knop, het herstelt syntaxisfouten in één keer, ruimt het formaat op, maar laat de waarschuwingen intact je kunt ze laten oplossen zoals je wilt. U kunt niet kiezen voor welke regels u wilt testen, maar voor alle drie de bestandstypen heb een paar instellingen die u in staat stellen om de indeling te bepalen van de gereinigde uitvoer.

6. JSLint

JSLint werd voor het eerst uitgebracht in 2002 door Douglas Crockford en is sindsdien niet meer verloren, dus je kunt er gerust van uitgaan dat het een stabiele en betrouwbare JavaScript-linting-tool is.

JSLint kan JavaScript-broncode en JSON-tekst verwerken en deze wordt geleverd met een kant-en-klare configuratie die de best practices van JS volgt Crockford schreef hierover in zijn boek JavaScript: The Good Parts.

JSLint heeft een paar opties waaruit je kunt kiezen, maar jij kan geen eigen regels toevoegen of de meeste functies uitschakelen. JSLint is al begonnen met de nieuwste ECMAScript 6-standaarden, u kunt hier de huidige fase van de ES6-implementatie bekijken.

7. JSHint

JSHint is een zeer populaire vork van JSLint en wordt gebruikt door grote technologiebedrijven zoals Facebook, Twitter en Medium

JSHint is een community-driven project dat begon met het streven om maak een meer configureerbare en minder eigenzinnige versie van JSLint. JSHint stelt ontwikkelaars in staat elk van de verwarrende opties ervan te configureren en de aangepaste configuratie in een apart bestand te plaatsen, een optie die ervoor zorgt dat de tool eenvoudig herbruikbaar is en geschikt voor grotere projecten.

Je kunt JSHint niet alleen gebruiken om vanille JavaScript te plukken, maar het heeft ook out-of-the-box-ondersteuning voor veel populaire JS-bibliotheken, zoals jQuery, Mootools, Mocha en Node.js.

8. ESLint

ESLint is het laatste nieuws over het JavaScript-linting-landschap. Zijn populariteit komt voort uit zijn zeer flexibele karakter. U kunt niet alleen tonnen van zijn verfijnde plukselregels aanpassen, en het integreren met alle belangrijke codebewerkers, maar u kunt ook gemakkelijk breid zijn functionaliteiten uit door er verschillende plug-ins aan toe te voegen.

Door de parser-opties op te geven, kunt u ook kies welke standaard van de JS-taal u wilt ondersteunen tijdens het pluisproces, wat betekent dat u niet alleen uw scripts kunt controleren tegen de standaard ECMAScript 5-syntaxis, maar ook tegen ECMAScript 6, ECMAScript 7 en JSX.

9. JSCS

JSCS of JavaScript-codestijl is een insteekbare codestijl voor JavaScript, die controleert op regels voor codering.

Het doel van JSCS is om een ​​middel te bieden voor Programmatisch afdwingen van naleving van een bepaalde coderingsstijlgids. Hoewel JSCS geen fouten en fouten controleert, wordt het nog steeds gebruikt door vele grote spelers in de technische industrie, zoals Google, AirBnB en AngularJS, omdat het ontwikkelaars helpt om een ​​zeer leesbare, consistente codebasis te behouden.

JSCS is een echte tijdbesparing, omdat het uw opmaakfouten automatisch oplost, zodat u ze niet één voor één hoeft te doorlopen. Het heeft veel verschillende presets die behoren tot grotere projecten, zoals Google, Grunt of Wikimedia coderingsstijl presets, die u gemakkelijk in uw eigen projecten kunt gebruiken, maar u kunt ook uw eigen aangepaste configuratie maken.

10. StandaardJS

StandardJS, of JavaScript Standard Style is een code-achtige linter net als JSCS, maar verschilt daarin in zijn eenvoud en rechtlijnigheid. StandardJS kan een uitstekende keuze zijn, als u geen tijd wilt doorbrengen met de configuratie, wil gewoon een effectieve tool die uit de doos is.

StandardJS volgt een handvol vooraf geschreven opmaakregels en zijn kernwaarde is om uw coderingswerkstroom afleidingsvrij te houden, dus u kunt de regels waarmee u het niet eens bent, niet veranderen. Kies alleen StandardJS als u geen aangepaste configuratie wilt, en gewoon wilt een consistente codestijl afdwingen in uw JavaScript-bestanden.