Was ist mit Code Linting?

Vor einiger Zeit habe ich einem Junior-Entwickler geholfen, der ein offensichtliches Problem mit seinem Code hat, um herauszufinden, was daran falsch war. Er installierte einen Flusen und heruntergeladen (Gott weiß warum) ein benutzerdefiniertes Wörterbuch für sie. Ich bereitete eine kleine Testumgebung vor und zeigte ihm den Unterschied zwischen verschiedenen Tests an verschiedenen Punkten und einigen Einschränkungen (in dieser kleinen Umgebung).

Kürzlich habe ich mit einem Kollegen über das Testen gesprochen und ich erinnerte mich an diese Anekdote und sagte mir, ich solle einen Beitrag darüber schreiben, da es für viele interessant sein könnte.,

Was ist linting?

Linting ist die automatisierte Überprüfung Ihres Quellcodes auf programmatische und stilistische Fehler. Dies geschieht mit einem Fusselwerkzeug (alias Linter). Ein Lint-Tool ist ein grundlegender statischer Codeanalysator.

Der Begriff Linting stammt ursprünglich von einem Unix-Dienstprogramm für C. Es gibt heute viele Code-Linter für verschiedene Programmiersprachen.

Die Lint-Programmierung ist eine Art automatisierter Prüfung. Es kann früh in der Entwicklung passieren, vor Codeüberprüfungen und Tests. Das liegt daran, dass automatisierte Code-Checks die Code-Review – und Testprozesse effizienter machen., Und sie befreien Ihre Entwickler, sich auf die richtigen Dinge zu konzentrieren.

Viele automatisierte Testtools nutzen einen integrierten Linter, um Fehler auszulösen, eine Punktzahl in Bezug auf die Codequalität festzulegen und die Kompilierungs-oder Bereitstellungsphase zu blockieren, wenn diese Punktzahl unter dem gewünschten Wert liegt (automatisch oder Anhalten des Prozesses eine Benachrichtigung auslösen, um manuell zu überprüfen, ob diese „Fehler“ gepatcht werden sollen oder nicht).

Wofür ist gedacht?

Linting soll Fehler reduzieren und die Gesamtqualität des Devs-Codes verbessern, die Entwicklung beschleunigen und die Kosten senken, indem Fehler früher gefunden werden.,

Wann Lint-software?

Wenn dies neu für Sie sind, können Sie einige ein bisschen gehyped mit Fusseln an diesem Punkt aber sind Sie nicht ein programagically tool. Ein Lint ist einfach ein“Scrapper“ /File Reader-Skript mit einer Datei (normalerweise JSON oder XML) mit vordefinierten (oder benutzerdefinierten) Regeln darüber, wie der Code aussehen muss. Tatsächlich haben IDEs einen integrierten Lint, der einen Fehler auslöst (dh wenn Sie eine nicht vorhandene Methode aufrufen oder versuchen, einen Zeichenfolgenwert zu einer ganzzahligen Variablen hinzuzufügen) oder eine Warnung (dh, wenn Sie eine Variable innerhalb einer Bedingung deklarieren und diese Variable am Ende Ihrer Methode zurückgeben). Aber ich spreche nicht über den eingebauten Code Lint, da diese Linter „weich“ und freizügig sind, sonst werden viele Leute diese IDEs nicht verwenden, wir werden später sehen, warum.

Sie können einen bestimmten Fussel verwenden, wenn Sie in diese Anweisungen passen:

Wenn Sie interpretierte Programmiersprachen verwenden.

Einige Sprachen eignen sich besser für Code-Linting als andere. PHP, Python und JavaScript sind interpretierte Sprachen, das heißt, ihnen fehlt eine Kompilierungsphase*., Die Verwendung von Lint-Software ist daher effektiv, um in diesen Fällen einen konsistenten Codierungsstil sicherzustellen und grundlegende Codierungsfehler zu beheben.

Wenn es jedoch um kompilierte Sprachen wie C und C++ geht, reicht die Verwendung von Lint-Software möglicherweise nicht aus. C und C++ sind komplex und erfordern möglicherweise eine erweiterte Codeanalyse.

*Sie können schreien Ich kompiliere JavaScript! aber es ist in der Tat nicht wahr. Heutzutage verwenden wir im Frontend Tools wie Bundler und fügen einige Javascript-Tools hinzu, die unser js an einige Phasen wie minify, ugglify, ofuscate übergeben. Einige dieser Tools löschen auch nicht verwendeten Code in der Ausgabe., Aber nichts davon bedeutet, dass Sie Javascript kompilieren, da die Ausgabe a sein wird .js-Datei sowieso; kein Bytecode, kein Assembler.
Es ist wahr, dass Sie Javascript in Web Assembly konvertieren können, aber es ist kein direkter Pfad von einem zum anderen; Sie müssen Ihr js in etwas „Kompilierbares“ wie C-Code konvertieren und es dann in Web Assembly kompilieren.

Wenn Sie Standardregeln verwenden
Dies ist eine etwas knifflige Aussage., Auf einer Programmiersprache können Sie nichts verwenden, das nicht in Ihrer Programmiersprache integriert ist (das ist überhaupt nicht wahr, da Sie Bibliotheken hinzufügen oder Systembefehle aus Programmiersprachen werfen können, aber trotzdem haben Lint nichts damit zu tun)…)
Wofür stehen Standardregeln?
Mit einem Framework wird schön hier passen, müssen Sie Framework integrierten Methoden verwenden, um die gewünschte Ausgabe zu erreichen.
Manchmal Standardregeln bedeutet modisch Code., Diese Methoden und Problemumgehungen, die die Community wie ein Mantra wiederholt, bis sie einen anderen modischen Weg finden, um das Ziel einer bestimmten Aufgabe zu erreichen, oder bis jemand mit öffentlichen Auswirkungen der Community sagt: „Hey, ich habe diese Problemumgehungen analysiert und ich finde, dass es einen besseren Weg gibt, dies aus diesen Gründen zu erreichen“ und dann geht die Community weiter.

Wenn Ihre Bedürfnisse Sind Grundlegende
Lint werkzeuge sind ideal für grundlegende analyse. Wenn Sie jedoch eine ausgefeiltere Analyse benötigen, müssen Sie sich woanders umsehen (automatisierte Testtools und testgetriebene Entwicklung).

Wo soll ich einen Flusen sehen?

1., Bei automatisierten Tests (wir nennen sie automatisiert, weil sie automatisch ausgeführt werden, aber jemand den Test für jeden Anwendungsfall in einer App codieren muss) wie Cypress können Sie einen Flusen hinzufügen, um die Codequalität zu bewerten.

Dies kann während der Entwicklungszeit (wenn der Entwickler die Testschaltfläche drückt) oder wahrscheinlich in der Bereitstellungsphase ausgeführt werden. Wenn Sie beispielsweise etwas in den Master-Zweig schieben, kann dies ein Auslöser sein, um die Tests, einschließlich der Flusen, anzuheben und die Bereitstellung zu blockieren (und Ihnen die Schuld zu geben), wenn Sie etwas falsch gemacht haben, müssen Sie den Fehler reparieren oder finden (dies bedeutet nicht, dass es Ihre Schuld ist., Ich könnte eine API pushen, die Ihren Client zum Absturz bringt (unerwartete Werte, und dies ist meine Schuld, nicht Ihre).

Diese Tests sind nicht dazu gedacht, Ihnen die Schuld, aber in den Entwicklungsprozess zu helfen, ist es in der Regel besser, einen Fehler zu finden, bevor die Integration in die Pre-Production-Phase aufgrund eines Testausfalls als es überraschend in die Produktion zu finden.

2. Auf große Projekte, in der Regel auf große Unternehmen., Wenn Sie in einem sehr großen Unternehmen sind, sollte der Projektmanager möchten, dass der gesamte Code gleich aussieht (Formatierung), sodass er wahrscheinlich irgendwo einen Flusen dafür hat, der Sie darauf hinweist, wenn Sie 4 Leerzeichen hinzugefügt haben, um etwas einzurücken, das sie mit 2 möchten, und das wird Ihnen die Schuld geben, wenn Sie zum Beispiel keine Methode mit Kamelfall deklariert haben.,

Ich finde, dass viele Junior-Entwickler versuchen, dagegen anzukämpfen, weil sie eine bestimmte Formatierung mögen, aber ohne diese Tools werden diese großen Software-Apps wie ein Frankenstein-Monster in einer Zukunft aussehen, was die Schwierigkeit erhöht, alle Teile zu lesen oder einigen Methodenpfaden und Klassenüberschreibungen zu folgen. Denken Sie daran, wie ein Buch zu lesen, wo jeder Absatz eine andere Schriftgröße haben, Schriftfamilie und so.

Wo nicht zu benutzen?

Dieser Punkt ist so einfach: Verwenden Sie ihn nicht im dynamischen Kontext und in Nicht-Programmiersprachen.

1. Der erste ist leicht zu verstehen., Wenn Sie sich in einem dynamischen Kontext befinden, wird der Flusen (ein statischer Checker) niemals das Endergebnis kennen und Sie für Dinge verantwortlich machen, die in Ordnung sind.

2. Das sollte lächerlich klingen, redundant oder Sie können mir sagen, “ Wo Sie einen Flusen verwenden, wenn es nicht auf einer Programmiersprache ist?“

Mulder, es gibt HTML-und CSS-Linter da draußen.

Ja.. um… Aber wie?,

Nun, sie sind in Wahrheit keine Linter, sie sind nur Code-Checker, das gleiche können Sie mit dem w3c-Validator tun, aber anstatt Ihren Code in einen Validator zu kopieren, laufen sie normalerweise auf Entwicklungszeit beschuldigen Sie für verschiedene Dinge basierend auf jemandes Meinung, die ärgerlich, ungenau ist und wirklich nicht zur heutigen Verwendung dieser beiden Technologien passt (oder drei, wenn Sie SCSS hinzufügen), und am wichtigsten, sie haben normalerweise keinen Grund für jede Aussage, oder die Gründe widersprechen von einem Punkt zum anderen, oder der Grund ist veraltet, oder die Gründe gelten nicht für alle Projekte., Deshalb finden Sie Töne von“ Vergessen Sie CSSLint, es ist eigensinnig und passt nicht zu Ihrem Projekt “ Kommentare und viele ähnliche andere über das Internet.

Sie können einige Codeteile finden, die aus irgendeinem Grund Linter genannt werden, aber zumindest sagen sie Ihnen „Ich bin ein eigenwilliger Code-Formatierer“ wie dieser .,

HTML lint könnte manchmal nützlich sein, da es Sie zwingt, ein Alt-Attribut zu den Bildern und anderen Zugänglichkeits-und Good Practices hinzuzufügen (die meisten IDEs zeigen Ihnen auch eine Warnung dafür, ohne einen lint hinzuzufügen, was besser ist), aber dies hindert Sie nicht daran, einen <span als <p> oder andere schlechte HTML-Verwendung.

Es wird Sie auch ärgern, wenn Sie Vorlagenkomponenten mit dummen Anweisungen wie „Sie haben keine Doctype-Deklaration, Sie haben kein HTML, head, title oder Body-Tag., Und Sie könnten sagen „natürlich, da diese Datei in ein Dokument geladen wird, das diese Tags bereits enthält“, aber HTML Lint kann es nicht wissen; Lints sind statische Kontrolleure und Sie arbeiten an einer dynamischen Umgebung, also fahren Sie fort und löschen Sie HTML Lint überhaupt.

CSSLint ist ein bisschen anders, hier können Sie sowieso nichts flusen, Sie können gültiges oder ungültiges CSS schreiben, aber das ist alles.,

Es gibt gute Praktiken für CSS, die für Effizienz-und Geschwindigkeitszwecke stehen (es wird auch UX zugute kommen), andere für Wartbarkeit, Skalierbarkeit und Lesbarkeit (normalerweise basierend auf Entwicklungserfahrung), andere für Zugänglichkeit (basierend auf UI/UX-Studien und Browser-Renderings, Bildschirmkontrasttests usw.). Aber es hat keinen Sinn, alles zu einem Linter zu kombinieren und Entwicklern zu sagen, dass sie all diesen Praktiken entsprechen sollen, vor allem, weil es Widersprüche gibt, die ein Mensch braucht, um die Entscheidung zu treffen, das eine oder andere zu verwenden.,

Ein Anwendungsfall, in dem Sie auswählen können, könnte durch die Tatsache behandelt werden, dass das Hinzufügen des gesamten CSS-Codes für Barrierefreiheit die Größe, Ladezeit und interaktive Metriken zum ersten Mal beobachtbar erhöht, sodass Sie normalerweise nur die Eingabehilfen auswählen Regeln, die am besten zu Ihren Kunden passen und gleichzeitig eine gute Leistung gewährleisten.

Um ein dummes Beispiel für eine eigenwillige Regel im CSSLint zu geben, möchte ich einen linearen Verlauf als Hintergrund auf meinem Homepage-Hauptblock. CSSLint wird eine Warnung über die Leistung linearer Gradienten auslösen.,
An dieser Stelle möchte CSSLint, dass Sie den linearen Verlauf löschen, aber was sind die Alternativen?
Mit einem Bild wird einige Male weniger effizient für das Erreichen der Ziel-Design (und wird auch die visuelle Qualität des Verlaufs zu reduzieren, und wird es schwieriger machen, die Größe, um alle möglichen Größen des Blocks passen).
Also, was können wir tun? Ignorieren Sie einfach die CSSLint, da sie eigensinnig ist und dies aus keinem Grund unterstützt wird.
Es gibt einen Unterschied beim Hinzufügen eines linearen Gradienten gegenüber dem Hinzufügen von 42342 linearen Gradienten in derselben Ansicht., Übrigens, wenn Sie sie benötigen, ist es immer noch effizienter als die Verwendung von Bildern.

Sie können auch widersprüchliche Anweisungen darauf finden, wie:

„Verwenden Sie keine IDs zum Stylen“. Der Grund ist, dass es eine nicht wiederverwendbare Regel sein wird.
und
„Verwenden Sie keine angrenzenden Klassen“. Ich konnte den Grund nicht richtig herausfinden, ohne die Erklärung der CSS-Lint-Regeln zu lesen, und der Grund ist „Während technisch in CSS erlaubt, werden diese von Internet Explorer 6 und früher nicht richtig behandelt“.

Ich habe dir etwas zu sagen CSSLint., Niemand kümmert sich um IE 6 und früher, wir sind im Jahr 2020, 99% der Web-Software unterstützt IE 11 so viel, die auf 2013 übrigens veröffentlicht wurde und weniger als 3% Nutzung hat.

Andererseits, wo um Gottes willen ausgedrückt wird, dass alle CSS-Regeln in derselben Ansicht wiederverwendbar sein müssen?
Wenn Sie ein eindeutiges Element in Ihrer Web-App haben, dh Sie haben wahrscheinlich nur eine Navigationsleiste, nur ein Chat-Popup, wenn überhaupt, nur ein Navbar-Logo und nur eine Fußzeile, um einige zu benennen, warum müssen Sie es hinzufügen Styling global? Ist es nicht so eine schlechte Praxis, die allen anderen Sprachen auf der ganzen Welt widerspricht?,

Angenommen, Sie haben 5 Ansichten zu Ihrem Projekt. Wenn Sie eine <nav> , wird diese wahrscheinlich auf allen angezeigt, sodass das gleiche Styling wie unter #primary-navigation funktioniert 5 verschiedene Ansichten. Ist das nicht ein Weg der Re-Usability?

Um die Albernheit zu erhöhen, dass beide Regeln zusammen, sehen, wie es können Sie auf eine schwierige Situation.,

Wenn Sie keine ID für das Styling verwenden können <nav class="dark-theme">, und Sie können keine benachbarten Klassen hinzufügen<nav class="primary-navigation dark-theme">, wie schaffen Sie es, Ihr Styling zu erweitern und es wartbarer, lesbarer und wie verwalten Sie es, Java-Script-Ereignis-Listener hinzuzufügen, wenn es auf effiziente Weise benötigt wird?

Sie können einfach nicht.

Was könnten wir tun, semantisch korrekt und leicht zu pflegen?, Lassen Sie uns ein Beispiel geben:

Hier ist eine weitere Anweisung, die mich für eine Weile zum Lachen bringt:

Unqualifizierte Attributselektoren vermeiden „Unqualifizierte Attributselektoren stimmen zuerst mit allen Elementen überein und überprüfen dann ihre Attribute. Dies bedeutet, dass nicht qualifizierte Attributselektoren die gleichen Leistungsmerkmale haben wie der universelle Selektor (*) “

Mein Liebling, dies unterscheidet sich nicht von dem, was bei Verwendung von Klassen -, ID-oder Tag-Selektoren passiert.

Die Stufen des Browser-CSS-Renderings sind:

1. Erstellen des Doms., Das DOM ist eine baumartige Datenstruktur, die alle HTML-Knoten auf der Seite enthält. Jeder Knoten enthält die Daten zu diesem HTML-Element (z. B. Attribute, IDs und Klassen) Wenn der Knoten HTML-Elemente als untergeordnete Elemente enthält, zeigt er auch auf diese untergeordneten Knoten.
2. Erstellen der CSSOM. Wenn der Browser auf ein CSS-Stylesheet stößt (entweder eingebettet oder extern), muss er den Text in etwas analysieren, das er für Stillayouts und-farben verwenden kann. Die Datenstruktur, in die der Browser CSS umwandelt, wird kreativ als CSSOM bezeichnet.
3. Erzeugen eines Renderbaums., Kurz gesagt, der Renderbaum enthält alle Informationen, die der Browser zum Erstellen von Pixeln auf der Seite benötigt. Der Browser nimmt im Grunde die DOM-und CSSOM und zerquetscht sie zusammen, um alles zu entfernen, was sich nicht auf die gerenderte Ausgabe auswirkt.
4. Layout und Malerei.

In der Layoutphase ermittelt der Browser die Größe und Position der Elemente (noch nichts gerendert) und generiert dann im Malschritt Pixel, die wir visualisieren werden.,

Wie Sie sehen können, können Sie beim wahllosen Verschachteln Ihrer Selektoren eine kleine Leistungsverzerrung erzielen, z. B. body>#main-content>.first-block .products-card p da Sie unnötige untergeordnete Knoten in der CSSOM generieren, die mit dem DOM übereinstimmen müssen, und dies etwas mehr Zeit in Anspruch nimmt, als nur a
.products-card p, aber da wir diesen Code beibehalten und wahrscheinlich skalieren müssen, müssen wir die Regeln ändern, also sagen wir #main-content .products-card p.

Es ist eine gute Praxis, aber ich habe noch nie eine Web-App gesehen, in der spezifischere Selektoren einen Engpass bei der Ladegeschwindigkeit verursachen., Dies wird normalerweise dadurch verursacht, dass der Browser immer wieder Töne von nicht verwendetem Code iteriert, die er zu CSSOM hinzufügt, und mit DOM vergleichen muss, um herauszufinden, ob es in Ordnung ist, ihn in den Renderbaum einzufügen oder nicht.

Aus diesem und anderen vielen Gründen finden Sie Artikel, die jeden falschen Punkt auf CSSLint wie diesen erklären, der die Dinge ausführlicher erklärt als ich hier.

Zusammenfassung

Linter sind gut für einige Dinge und schlecht für andere.,
Sie können auch bearbeitet werden, um einige Projektanforderungen oder einige Unternehmen oder Personen Vorlieben für die Vermeidung dieser Regeln, die eigensinnig sind und das Hinzufügen anderer wertvoller Regeln, die das Projekt passen Sie in.

Es gibt viele Gründe für die Verwendung von Lintern in interpretierten Sprachen (bei kompilierten Sprachen kümmern sich die IDE und der Compiler darum, aber Sie können auch einen Lint hinzufügen, um nur die Codeformatierung zu überprüfen, oder um Warnungen vor dem Kompilieren zu erhalten, um zu vermeiden, dass der Compiler einen Fehler findet oder endet, um zu wissen, ob alles in Ordnung ist).,

Es gibt wenige Gründe, Linter in HTML hinzuzufügen (nur Zugänglichkeitszwecke können meiner Meinung nach nützlich sein), und es gibt weniger Gründe, Linter in CSS hinzuzufügen (dies kann auf einen Code reduziert werden, der eine Formatierungsprüfung enthält).

Haben Sie einen Flusen verwendet? Wenn ja, sagen Sie uns, in welcher Sprache und in welchem Kontext und was Ihre Erfahrung war.

Ich persönlich mochte es nach ein paar Optimierungen bei der Verwendung von TypeScript.

Wie immer, hoffe, Ihnen gefällt dieser Beitrag und mit freundlichen Grüßen,

Joel