10 CSS en JavaScript Linting Tools voor Code Optimalisatie

Linting-tools kunnen ontwikkelaars aanzienlijk helpen bij het schrijven van geoptimaliseerde code van goede kwaliteit . Linting is een codecontroleproces dat fouten in de broncode opzoekt en mogelijke bugs markeert. De meeste linters maken gebruik van de statische code-analysetechniek, wat betekent dat 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 dat u regelmatig lonkt, omdat dit u in de toekomst kan redden van veel hoofdpijn.

Linters zijn niet alleen bugpreventiehulpmiddelen, maar ze kunnen ook effectief worden gebruikt tijdens foutopsporing om fouten te vinden die anders moeilijk te vangen zijn. In deze post zullen we 10 krachtige pluizentools 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 kiezen welke soort fouten en waarschuwingen (compatibiliteit, prestaties, duplicatie, etc.) u wilt testen en valideert u uw CSS-syntaxis aan 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-pluisrek kader zijn CSS pluis-plug-in er bovenop heeft gebouwd. SublimeLinter is een SublimeText-plug-in die gebruikers de mogelijkheid biedt om hun code (CSS, PHP, Python, Java, Ruby, enzovoort) binnen de SublimeText-editor in orde te maken .

Voordat u de SublimeLinter CSSLint-plug-in zelf installeert, moet u CSSLint als module Node.js installeren. Het leuke aan deze handige tool is dat je de instellingen maar één keer hoeft te configureren, of dat je, als je blij bent met de standaardinstellingen, dat niet eens hoeft te doen, dan kun je altijd de relevante waarschuwingen en meldingen in je SublimeText krijgen editor zonder verder gedoe.

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 u kunt kiezen welke u wilt inschakelen (zie een voorbeeldconfiguratie).

Als u uw eigen configuratie niet wilt bouwen, 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 beschouwd 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.

In eerste instantie creëerden 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 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 gooit foutmeldingen en meldingen in realtime terwijl u uw code in de editor schrijft of wijzigt .

Wanneer u op de knop "Opschonen" klikt, worden syntaxisfouten in één keer hersteld, wordt het formaat opgeruimd, maar blijven de waarschuwingen intact, zodat u ze kunt oplossen zoals u maar wilt. U kunt niet kiezen voor welke regels u wilt testen, maar de drie bestandstypen hebben een paar instellingen waarmee u de indeling van de gereinigde uitvoer kunt bepalen.

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-pluishulpmiddel is.

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

JSLint heeft een paar opties waaruit u kunt kiezen, maar u kunt niet uw eigen aangepaste 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 naar 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 goed past bij grotere projecten.

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

8. ESLint

ESLint is de laatste nieuwtjes in het JavaScript-lintlandschap. Zijn populariteit komt voort uit zijn zeer flexibele karakter. U kunt niet alleen tonnen van zijn verfijnde lintregels aanpassen, en deze integreren met alle belangrijke code-editors, maar u kunt ook eenvoudig zijn functies uitbreiden door er verschillende plug-ins aan toe te voegen.

Door de parseropties op te geven, kunt u ook kiezen welke standaard van de JS-taal u tijdens het lintproces wilt ondersteunen, 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 het programmatisch afdwingen van de 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 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 besteden aan de configuratie, wilt u gewoon een effectieve tool die uit de doos kan worden gehaald.

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