10 CSS- und JavaScript-Linting-Tools zur Code-Optimierung
Linting-Tools können Entwicklern dabei helfen Schreiben Sie gute Qualität, optimierten Code. Linting ist ein Code-Überprüfungsprozess, der nach Fehlern im Quellcode sucht und potenzielle Fehler kennzeichnet. Die meisten Linters verwenden statische Codeanalyse Der Code wird geprüft, ohne tatsächlich ausgeführt zu werden.
Sie können bei verschiedenen Gelegenheiten fusseln, z. B. in Echtzeit, während Sie den Code schreiben, wenn Sie die Datei speichern, wenn Sie die Änderungen festschreiben oder bevor der Code in Produktion geht. Was auch immer Ihr Workflow ist, ist das Wichtigste regelmäßig fussel, denn es kann Sie in Zukunft vor vielen Kopfschmerzen bewahren.
Linters sind nicht nur Fehlervermeidungswerkzeuge, sie können auch effektiv beim Debuggen verwendet werden Fehler zu finden, die schwer zu fassen sind Andernfalls. In diesem Beitrag werden wir 10 leistungsstarke Linting-Tools kennenlernen, mit denen Sie Ihre CSS- und JavaScript-Dateien ablegen können, um die Qualität Ihres Codes zu verbessern.
1. CSSLint
CSSLint beabsichtigt zwar, "Ihre Gefühle zu verletzen", aber dafür "macht Sie Code viel besser". CSSLint ist derzeit der Markt für CSS-Linting. Es ist in JavaScript geschrieben, es ist Open Source und bietet eine Vielzahl konfigurierbarer Optionen.
CSSLint ermöglicht es Ihnen Wählen Sie die Art der Fehler und Warnungen (Kompatibilität, Leistung, Vervielfältigung usw.) Sie möchten testen, und validiert Ihre CSS-Syntax anhand der Regeln, für die Sie sich entscheiden.
Es funktioniert nicht nur im Browser, sondern verfügt auch über eine Befehlszeilenschnittstelle, die Sie auch in Ihr eigenes Build-System integrieren können.
2. SublimeLinter CSSLint
CSSLint ist ein derart effektiver CSS-Interpreter, dass es schwer ist, einen Konkurrenten zu finden, der dies ermöglicht. Dies ist wahrscheinlich der Grund, warum das SublimeLinter-Linting-Framework sein CSS-Linting-Plugin darauf aufbaute. SublimeLinter ist ein SublimeText Plugin das bietet Benutzern die Möglichkeit, ihren Code (CSS, PHP, Python, Java, Ruby usw.) direkt im SublimeText-Editor zu fassenr.
Bevor Sie das SublimeLinter-CSSLint-Plugin selbst installieren, müssen Sie CSSLint als Node.js-Modul installieren. Das Tolle an diesem praktischen Tool ist, dass Sie müssen die Einstellungen nur einmal konfigurieren, oder wenn Sie mit den Standardeinstellungen zufrieden sind, müssen Sie dies nicht einmal tun, dann können Sie die relevanten Warnungen und Benachrichtigungen jederzeit in Ihrem SublimeText-Editor erhalten, ohne dass weitere Probleme entstehen.
3. StyleLint
Mit StyleLint können Entwickler Fehler in CSS, SCSS oder anderen Syntaxen vermeiden, die PostCSS parsen kann. StyleLint testet für über hundert Regeln, und Sie können Wählen Sie aus, welche Sie einschalten möchten (siehe Beispiel config).
Wenn Sie keine eigene Konfiguration erstellen möchten, können Sie sich auch für eine vordefinierte Standardkonfiguration entscheiden, die etwa 60 StyleLint-Regeln enthält. StyleLint ist ein recht flexibles Werkzeug. Es kann durch zusätzliche Plugins erweitert und in drei verschiedenen Formen verwendet werden: als Befehlszeilenwerkzeug, als Node.js-Modul oder als PostCSS-Plugin.
4. W3C CSS Validator
Obwohl der CSS-Validator von W3C normalerweise nicht als Linting-Tool gedacht ist, bietet er Entwicklern die Möglichkeit, ihren CSS-Quellcode anhand der offiziellen Standards von W3C zu überprüfen. W3C hat seine Validatoren mit der Absicht entwickelt, ein Tool bereitzustellen, das dem Lint-Programmprüfer für die Programmiersprache C ähnelt.
Zunächst erstellten sie den HTML-Markup-Validator, dem später der CSS-Validator folgte. Der CSS-Validator von W3C hat nicht so viele Optionen wie CSSLint, aber es ist möglich gibt detaillierte, leicht verständliche Fehlermeldungen und Benachrichtigungen zurück.
Als zusätzliche Funktion können Sie Ihren Code auch mit den aktuellen W3C-Standards für mobiles Web vergleichen, was in Zeiten des mobilen Webs keine schlechte Sache ist.
5. Dirty Markup
Dirty Markup reinigt, formatiert und validiert Ihren HTML-, CSS- und JavaScript-Code. Es ist eine gute Wahl, wenn Sie ein einfaches Design wünschen und eine schnelle Lösung wünschen. Dirty Markup wirft Fehlermeldungen und Benachrichtigungen in Echtzeit während du Schreiben oder ändern Sie Ihren Code im Editor.
Wenn Sie auf die “Sauber” Taste, es behebt Syntaxfehler auf einmal, räumt das Format auf, lässt aber die Warnungen unverändert Lassen Sie sie lösen, wie Sie möchten. Sie können nicht auswählen, welche Regeln Sie testen möchten, sondern alle drei Dateitypen haben einige Einstellungen, mit denen Sie das Format festlegen können der gereinigten Ausgabe.
6. JSLint
JSLint wurde erstmals 2002 von Douglas Crockford veröffentlicht und hat seitdem nicht an Schwung verloren. Sie können also davon ausgehen, dass es ein stabiles und zuverlässiges JavaScript-Linting-Tool ist.
JSLint kann JavaScript-Quellcode und JSON-Text verarbeiten und wird mit einem fertige Konfiguration, die den Best Practices von JS entspricht Crockford schrieb in seinem Buch mit dem Titel JavaScript: The Good Parts.
JSLint hat ein paar Optionen, aus denen Sie wählen können, aber Sie Sie können keine eigenen benutzerdefinierten Regeln hinzufügen oder die meisten Funktionen deaktivieren. JSLint enthält bereits die neuesten ECMAScript 6-Standards. Hier können Sie den aktuellen Stand der ES6-Implementierung überprüfen.
7. JSHint
JSHint ist eine sehr beliebte Gabel von JSLint und wird von großen Tech-Unternehmen wie Facebook, Twitter und Medium verwendet
JSHint ist ein gemeinschaftliches Projekt, das mit dem Bestreben zu beginnen begann Erstellen Sie eine konfigurierbarere und weniger meinungsfähige Version von JSLint. Mit JSHint können Entwickler alle Linting-Optionen konfigurieren und die angepasste Konfiguration in einer separaten Datei ablegen. Dies ist eine Option, die das Tool leicht wiederverwendbar macht und sich für größere Projekte eignet.
Sie können JSHint nicht nur für JavaScript verwenden, sondern auch für die gängigen JS-Bibliotheken wie jQuery, Mootools, Mocha und Node.js.
8. ESLint
ESLint ist die neueste große Sache in der JavaScript-Linting-Landschaft. Seine Beliebtheit beruht auf seiner äußerst flexiblen Natur. Sie können nicht nur jede Menge ihrer ausgeklügelten Linting-Regeln anpassen und in alle gängigen Code-Editoren integrieren, sondern auch ganz einfach erweitern Sie seine Funktionalitäten indem Sie verschiedene Plugins hinzufügen.
Durch Angabe der Parser-Optionen können Sie auch Wählen Sie den Standard der JS-Sprache aus, den Sie unterstützen möchten Während des Flusens können Sie Ihre Skripts nicht nur mit der Standardsyntax von ECMAScript 5 überprüfen, sondern auch mit ECMAScript 6, ECMAScript 7 und JSX.
9. JSCS
JSCS oder JavaScript Code Style ist ein Plugin-fähiger Code-Stilintervall für JavaScript, das nach Code-Formatierungsregeln sucht.
Das Ziel von JSCS ist es, Mittel zur Verfügung zu stellen die programmatische Einhaltung eines bestimmten Kodierungsstil-Leitfadens erzwingen. Obwohl JSCS keine Fehler und Fehler prüft, wird es dennoch von vielen wichtigen Akteuren der Tech-Branche wie Google, AirBnB und AngularJS verwendet, da es Entwicklern dabei hilft, eine gut lesbare, konsistente Codebasis zu erhalten.
JSCS ist eine echte Zeitersparnis, da es Ihre Formatierungsfehler automatisch behebt, so dass Sie diese nicht einzeln durchgehen müssen. Es gibt viele verschiedene Voreinstellungen, die zu größeren Projekten gehören, wie Google, Grunt oder Wikimedia-Voreinstellungen, die Sie jedoch problemlos in Ihren eigenen Projekten verwenden können Sie können auch Ihre eigene benutzerdefinierte Konfiguration erstellen.
10. StandardJS
StandardJS oder JavaScript Standard Style ist wie JSCS ein Code-Style-Linter, der sich jedoch durch seine Einfachheit und Unkompliziertheit unterscheidet. StandardJS kann eine ausgezeichnete Wahl sein, wenn Sie keine Zeit mit der Konfiguration verbringen möchten, Ich möchte nur ein effektives Werkzeug, das aus der Box läuft.
StandardJS befolgt eine Handvoll vordefinierter Formatierungsregeln, und es ist wichtig, dass der Kodierungs-Workflow ablenkungsfrei bleibt, sodass Sie die Regeln, mit denen Sie nicht einverstanden sind, nicht ändern können. Wählen Sie nur StandardJS, wenn Sie keine benutzerdefinierte Konfiguration haben möchten und nur wollen Erzwingen Sie einen konsistenten Code-Stil für Ihre JavaScript-Dateien.
