Sollte ich die JSLint- oder JSHint-JavaScript-Validierung verwenden? [geschlossen]

454

Ich validiere derzeit mein JavaScript gegen JSLint und mache Fortschritte. Es hilft mir, besseres JavaScript zu schreiben - insbesondere bei der Arbeit mit der Jquery-Bibliothek.

Ich bin jetzt auf JSHint gestoßen , eine Gabelung von JSLint .
Daher frage ich mich, ob Webanwendungen, bei denen es sich um JavaScript handelt, das bessere oder am besten geeignete Validierungswerkzeug sind, gegen das man arbeiten kann:

  • JSLint oder JSHint?

Ich möchte mich jetzt für einen Validierungsmechanismus entscheiden und diesen für die clientseitige Validierung verwenden.

Und Unterschied zwischen jshint und jslint? Bitte erläutern Sie dies anhand eines einzelnen Javascript-Beispiels.

Links:

  1. jshint - http://www.jshint.com/

  2. jslint - http://jslint.com/

Amateur
quelle
4
Wie wäre es mit ESLint ? Obwohl es unvollkommen ist: Combine this with the previous 'var' statement-> Do not mix 'require' and other declarations, paradox.
Nyuszika7h
Siehe auch
Pacerier
Kein JS-Entwickler. Aber ich fand JSHint während unseres Codeüberprüfungsprozesses sehr nützlich. Ich empfehle es.
Chetan Vashistth

Antworten:

156

[BEARBEITEN]
Diese Antwort wurde bearbeitet. Ich lasse die ursprüngliche Antwort unten für den Kontext (sonst würden die Kommentare keinen Sinn ergeben).

Als diese Frage ursprünglich gestellt wurde, war JSLint das Hauptwerkzeug für JavaScript. JSHint war eine neue Gabel von JSLint, hatte aber noch nicht viel vom Original abgewichen.

Seitdem ist JSLint ziemlich statisch geblieben, während sich JSHint stark verändert hat - es hat viele der antagonistischeren Regeln von JSLint weggeworfen, eine ganze Reihe neuer Regeln hinzugefügt und ist im Allgemeinen flexibler geworden. Außerdem ist jetzt ein weiteres Tool ESLint verfügbar, das noch flexibler ist und über mehr Regeloptionen verfügt.

In meiner ursprünglichen Antwort sagte ich, dass Sie sich nicht zwingen sollten, sich an die Regeln von JSLint zu halten. Solange Sie verstanden haben, warum eine Warnung ausgegeben wurde, können Sie selbst beurteilen, ob Sie den Code ändern müssen, um die Warnung zu beheben, oder nicht.

Mit dem extrem strengen Regelsatz von JSLint aus dem Jahr 2011 war dies ein vernünftiger Rat - ich habe nur sehr wenige JavaScript-Codesätze gesehen, die einen JSLint-Test bestehen konnten. Angesichts der pragmatischeren Regeln, die in den heutigen JSHint- und ESLint-Tools verfügbar sind, ist es jedoch viel realistischer, zu versuchen, Ihren Code ohne Warnungen durch sie zu leiten.

Es kann immer noch gelegentlich Fälle geben, in denen sich ein Linter über etwas beschwert, das Sie absichtlich getan haben - zum Beispiel wissen Sie, dass Sie es immer verwenden sollten, ===aber nur dieses eine Mal haben Sie einen guten Grund, es zu verwenden ==. Aber selbst dann haben Sie mit ESLint die Möglichkeit, eslint-disableum die betreffende Linie herum anzugeben , sodass Sie immer noch einen Flusentest ohne Warnungen bestehen können, wobei der Rest Ihres Codes der Regel entspricht. (Mach so etwas einfach nicht zu oft!)


[ORIGINAL ANTWORT FOLGT]

Verwenden Sie auf jeden Fall JSLint. Aber lassen Sie sich nicht auf die Ergebnisse und das Reparieren von allem ein, worüber es warnt. Es wird Ihnen helfen, Ihren Code zu verbessern, und es wird Ihnen helfen, potenzielle Fehler zu finden, aber nicht alles, worüber sich JSLint beschwert, stellt sich als echtes Problem heraus. Sie müssen den Vorgang also nicht ohne Warnungen abschließen.

Nahezu jeder Javascript-Code mit einer signifikanten Länge oder Komplexität erzeugt Warnungen in JSLint, egal wie gut er geschrieben ist. Wenn Sie mir nicht glauben, versuchen Sie, einige beliebte Bibliotheken wie JQuery darin zu betreiben.

Einige JSLint-Warnungen sind wertvoller als andere: Erfahren Sie, auf welche Sie achten müssen und welche weniger wichtig sind. Jede Warnung sollte berücksichtigt werden, aber fühlen Sie sich nicht verpflichtet, Ihren Code zu korrigieren, um eine bestimmte Warnung zu löschen. Es ist vollkommen in Ordnung, sich den Code anzusehen und zu entscheiden, dass Sie damit zufrieden sind. Es gibt Zeiten, in denen Dinge, die JSlint nicht mag, tatsächlich das Richtige sind.

Spudley
quelle
3
Das Beste an jsHint ist, dass es Flags zum Akzeptieren von jQuery hat und nicht nervig / streng wie jslint ist. ZB: for (i = 0; i < dontEnumsLength; i++)wirft Unexpected '++'wo es ok ist. usw.
RaphaelDDL
2
Bitte ignorieren Sie keine Regeln, dies ist das Schlimmste, was Sie mit Linter machen können. Richten Sie es einfach ein oder ändern Sie es, wenn Sie es nicht können. JSHint und JSCS Kombination ist fantastisch
AuthorProxy
JSHint sagt: "Ich habe eine Zuweisung oder einen Funktionsaufruf erwartet und stattdessen einen Ausdruck gesehen." zu einem Ternär, das nur für Operationen verwendet wird. Mozilla-Dokumentation: "Sie können auch ternäre Auswertungen im freien Speicherplatz verwenden, um verschiedene Vorgänge auszuführen." developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… @AuthorProxy Ich gehe zu Mozilla und ignoriere JSHint. Es tut uns leid.
Tau
1
Inzwischen sieht es so aus, als ob ESLint die Richtung ist, in die sich die Branche insgesamt bewegt, zusammen mit beliebten Konfigurationen wie Airbnb.
Jinglesthula
369

tl; dr takeaway :

Wenn Sie einen sehr hohen Standard für sich oder Ihr Team suchen, ist JSLint genau das Richtige für Sie. Aber es ist nicht unbedingt DER Standard, sondern nur ein Standard, von dem einige dogmatisch von einem Javascript-Gott namens Doug Crockford zu uns kommen. Wenn Sie ein bisschen flexibler sein möchten oder alte Profis in Ihrem Team haben möchten, die sich nicht mit den Meinungen von JSLint einverstanden erklären oder regelmäßig zwischen JS und anderen Sprachen der C-Familie hin und her wechseln, versuchen Sie es mit JSHint.

lange Version :

Die Argumentation hinter der Gabel erklärt ziemlich gut, warum JSHint existiert:

http://badassjs.com/post/3364925033/jshint-an-community-driven-fork-of-jslint http://anton.kovalyov.net/2011/02/20/why-i-forked-jslint-to -jshint /

Ich denke also, die Idee ist, dass es eher "Community-gesteuert" als Crockford-gesteuert ist. In der Praxis ist JSHint im Allgemeinen etwas milder (oder zumindest konfigurierbar oder agnostisch) in Bezug auf einige stilistische und geringfügige syntaktische "Meinungen", auf die sich JSLint bezieht.

Wenn Sie beispielsweise der Meinung sind, dass sowohl A als auch B in Ordnung sind oder wenn Sie Code mit einem oder mehreren Aspekten von A schreiben möchten, die in B nicht verfügbar sind, ist JSHint genau das Richtige für Sie. Wenn Sie denken, dass B die einzig richtige Option ist ... JSLint. Ich bin sicher, dass es noch andere Unterschiede gibt, aber dies hebt einige hervor.

A) Übergibt JSHint sofort - JSLint schlägt fehl

(function() {
  "use strict";
  var x=0, y=2;
  function add(val1, val2){
    return val1 + val2;
  }
  var z;
  for (var i=0; i<2; i++){
    z = add(y, x+i);
  }
})();

B) Besteht sowohl JSHint als auch JSLint

(function () {
    "use strict";
    var x = 0, y = 2, i, z;
    function add(val1, val2) {
       return val1 + val2;
    }
    for (i = 0; i < 2; i += 1) {
        z = add(y, x + i);
    }
}());

Persönlich finde ich JSLint-Code sehr schön anzusehen, und die einzigen schwierigen Merkmale, mit denen ich nicht einverstanden bin, sind der Hass auf mehr als eine var-Deklaration in einer Funktion und auf for-loop- var i = 0Deklarationen sowie einige der Whitespace-Durchsetzungen für Funktionsdeklarationen .

Einige der Whitespace-Dinge, die JSLint erzwingt, sind meiner Meinung nach nicht unbedingt schlecht, aber nicht synchron mit einigen ziemlich üblichen Whitespace-Konventionen für andere Sprachen in der Familie (C, Java, Python usw.), die häufig vorkommen folgte als Konventionen auch in Javascript. Da ich den ganzen Tag über in verschiedenen dieser Sprachen schreibe und mit Teammitgliedern zusammenarbeite, die keine Leerzeichen im Lint-Stil in unserem Code mögen, finde ich JSHint eine gute Balance. Es fängt Dinge auf, die ein legitimer Fehler oder eine wirklich schlechte Form sind, aber bellt mich nicht so an wie JSLint (manchmal auf eine Weise, die ich nicht deaktivieren kann) für die stilistischen Meinungen oder syntaktischen Nitpicks, die mir egal sind.

Viele gute Bibliotheken sind nicht Lint'able, was für mich zeigt, dass die Idee, dass es bei JSLint einfach nur darum geht, eine Version von "gutem Code" (was in der Tat guter Code ist) zu pushen, wahr ist. Aber andererseits sind die gleichen Bibliotheken (oder andere gute) wahrscheinlich auch nicht hint'able, also touché.

Ben Roberts
quelle
11
... Ich muss zugeben, ich war enttäuscht von der unprofessionellen Qualität der Ratschläge, die ich kürzlich in Bezug auf Codierungsstile für JS (und übrigens auch für CSS) gesehen habe. Es ist, als hätte die Verliebtheit in eine bestimmte Sprache die Bedürfnisse von Nichtfachleuten (dh der Zielgruppe) außer Kraft gesetzt. Dies ist eine Schande, wenn man bedenkt, dass sie gute Ratschläge benötigen und blindlings folgen und alles fortsetzen, was als bewährte Methode angepriesen wird, ohne es besser zu wissen. Oft ist es nicht kompatibel mit anderen Standards, die von etablierteren Benutzergemeinschaften für andere Sprachen übernommen wurden. :(
Lee Kowalkowski
67
@LeeKowalkowski Der Grund , dass JSLint entmutigt for (var i = 0; ...; i++)ist , weil es nicht funktioniert die Schleife in sich geschlossene machen. Der Umfang von iist die Funktion. Die Syntax sieht so aus, als würde ein Blockbereich erstellt, dies ist jedoch nicht der Fall. Dies führt dazu, dass weniger erfahrene JavaScript-Programmierer und Benutzer, die in mehreren Sprachen schreiben, den Bereich einer Variablen falsch verstehen und dies zu subtilen Fehlern führen kann. Vielen von uns (einschließlich mir) gefällt es vielleicht nicht, wie es aussieht, wenn alle Deklarationen oben platziert werden, aber es ist eine gute Erinnerung daran, dass JavaScript keinen Blockbereich hat.
Mark Evans
25
@MarkEvans Aus der Sicht ist es eigenständig, dass, wenn Sie nur die Schleife in eine andere Funktion verschoben haben, idiese nicht versehentlich global wird. Die Tatsache, dass der iFunktionsbereich nicht der Blockbereich ist, ist kein guter Grund, Variablen oben zu deklarieren. Variablen sollten immer so nahe wie möglich an dem Ort deklariert werden, an dem sie verwendet werden ( programmers.stackexchange.com/questions/56585/… ).
Lee Kowalkowski
17
@ MarkEvans Ich denke, Sie konzentrieren sich zu sehr auf Details der Sprachimplementierung. Programmierstandards sollten für Menschen gelten, nicht für Compiler. Das Vertrauen in ein statisches Code-Analyse-Tool, um häufige Fallstricke zu erkennen, ist kein Ersatz für die Übernahme guter Gewohnheiten, die diese überhaupt vermeiden. Ich kann mir keinen Grund vorstellen, warum eine Iteratorvariable für eine einfache Schleife in einer Entfernung von der Schleife deklariert werden sollte, die dies erfordert. Viele Codierungsstandards für andere Sprachen geben an, dass Variablen aus Gründen der Lesbarkeit so nah wie möglich an dem Ort deklariert werden, an dem sie verwendet werden. Ich habe keinen guten Grund gesehen, dies in JS nicht zu tun.
Lee Kowalkowski
11
Die Verwendung einer Iteratorvariablen außerhalb einer Schleife ist das, worauf ein Linter prüfen sollte.
Lee Kowalkowski
61

Es gibt einen anderen reifen und aktiv entwickelten "Spieler" auf dem Gebiet der Javascript-Flusen - ESLint:

ESLint ist ein Tool zum Identifizieren und Berichten von Mustern in ECMAScript / JavaScript-Code. In vielerlei Hinsicht ähnelt es JSLint und JSHint mit wenigen Ausnahmen:

  • ESLint verwendet Esprima zum Parsen von JavaScript.
  • ESLint verwendet einen AST, um Muster im Code auszuwerten.
  • ESLint ist vollständig steckbar, jede einzelne Regel ist ein Plugin und Sie können zur Laufzeit weitere hinzufügen.

Was hier wirklich wichtig ist, ist, dass es über benutzerdefinierte Plugins / Regeln erweiterbar ist . Es sind bereits mehrere Plugins für unterschiedliche Zwecke geschrieben. Unter anderem gibt es:

Und natürlich können Sie das Build-Tool Ihrer Wahl verwenden, um Folgendes auszuführen ESLint:

Alecxe
quelle
1
Der Wert eines Linter, der während der Eingabe in Ihrem Editor ausgeführt wird, kann nicht unterschätzt werden. ESLint wird auf diese Weise häufig verwendet. Ich habe noch nie von der Unterstützung von JSLint- oder JSHint-Editoren gehört (1 anekdotischer Datenpunkt).
Jinglesthula
17

Ich hatte vor ein paar Wochen die gleiche Frage und evaluierte sowohl JSLint als auch JSHint.

Im Gegensatz zu den Antworten in dieser Frage war meine Schlussfolgerung nicht:

Verwenden Sie auf jeden Fall JSLint.

Oder:

Wenn Sie einen sehr hohen Standard für sich oder Ihr Team suchen, ist JSLint genau das Richtige für Sie.

Da Sie in JSHint fast die gleichen Regeln konfigurieren können wie in JSLint. Ich würde also argumentieren, dass es keinen großen Unterschied in den Regeln gibt, die Sie erreichen könnten.

Die Gründe, sich für einen anderen zu entscheiden, sind eher politischer als technischer Natur.

Wir haben uns aus folgenden Gründen endgültig für JSHint entschieden:

  • Scheint konfigurierbarer zu sein als JSLint.
  • Sieht definitiv eher nach Community aus als nach Ein-Mann-Shows (egal wie cool The Man ist).
  • JSHint passte besser zu unserem OOTB-Codestil als JSLint.
Lexicore
quelle
1
Vielen Dank für eine kurze und prägnante Antwort. Dies löste meine Lücken in Bezug auf das Problem.
Akauppi
13

Ich würde einen dritten Vorschlag machen, Google Closure Compiler (und auch den Closure Linter ). Sie können es versuchen , Online - out hier .

Der Closure Compiler ist ein Tool, mit dem JavaScript schneller heruntergeladen und ausgeführt werden kann. Es ist ein echter Compiler für JavaScript. Anstatt von einer Ausgangssprache zu Maschinencode zu kompilieren, wird von JavaScript zu besserem JavaScript kompiliert. Es analysiert Ihr JavaScript, analysiert es, entfernt toten Code und schreibt neu und minimiert, was übrig bleibt. Außerdem werden Syntax, Variablenreferenzen und Typen überprüft und vor häufigen JavaScript-Fallstricken gewarnt.

Jeff Foster
quelle
4
Was nimmt der Closure Compiler auf, was der Linter nicht tut?
James McMahon
4
Ich sehe keine einzige Warnung, die von diesem Tool generiert wird, wenn dies sicherlich der Fall sein sollte. JSLint und JSHint erzeugen so viele Warnungen für dieselbe Eingabe, dass beide "zu viele Fehler" ausgeben.
Wallyk
6
Wir haben die Schließung eines kürzlich durchgeführten Projekts verwendet und würden es nicht noch einmal tun. Der Linter kann nicht so konfiguriert werden, dass bestimmte Prüfungen deaktiviert werden (von denen viele Dinge nicht wichtig sind), und der Compiler zahlt sich nur aus, wenn Sie ausschließlich mit schließungsfreundlichen Bibliotheken arbeiten (von denen es wirklich keine gibt) außerhalb von Google).
Robert Levy
4
Dies bezieht sich nicht auf Google Closure Comepiler an sich, aber die Tools von Google sollten immer mit einem Körnchen Salz betrachtet werden. Sie dienen zur Lösung bestimmter Google-Ziele und stimmen möglicherweise nicht mit Ihren Zielen überein.
Pacerier
@RobertLevy, danke, dass du deine Erfahrungen kommentiert hast ... Ich habe den Google Style Guide für Javascript gelesen und er hat den Closure-Compiler als Flusenprogramm empfohlen. aber jetzt sehe ich, dass es andere wie jslint und jshint gibt
Trevor Boyd Smith
13

Vorwort: Nun, das eskalierte schnell. Aber beschlossen, es durchzuziehen. Möge diese Antwort für Sie und andere Leser hilfreich sein.

Ich wurde hier ein bisschen mitgerissen

Code-Hinweis

Während JSLint und JSHint gute Werkzeuge sind, habe ich im Laufe der Jahre gelernt, was mein Freund @ugly_syntax nennt:

kleinerer Gestaltungsraum .

Dies ist ein allgemeines Prinzip, ähnlich wie bei einem "Zen-Mönch", das die Entscheidungen einschränkt, die man treffen muss. Man kann produktiver und kreativer sein.

Daher mein aktueller Lieblings-JS-Codestil ohne Konfiguration:

StandardJS .

UPDATE :

Der Durchfluss hat sich stark verbessert. Damit können Sie Ihrem JS Typen hinzufügen, mit denen Sie viele Fehler vermeiden können. Es kann Ihnen aber auch aus dem Weg gehen, beispielsweise bei der Anbindung von untypisiertem JS. Versuche es!

Schnellstart / TL; DR

Fügen Sie standardals Abhängigkeit Sie projizieren

npm install --save standard

Dann package.jsonfügen Sie den folgenden Testskript:

"scripts": {
    "test": "node_modules/.bin/standard && echo put further tests here"
},

Für eine schickere Ausgabe während der Entwicklung npm install --global snazzyund führen Sie sie stattdessen aus npm test.

Hinweis: Typprüfung versus Heuristik

Mein Freund, der Designraum erwähnte, bezog sich auf Elm und ich ermutige Sie, diese Sprache auszuprobieren.

Warum? JS ist in der Tat von LISP inspiriert, einer speziellen Sprachklasse, die zufällig untypisiert ist . Sprachen wie Elm oder Purescript sind typisierte funktionale Programmiersprachen.

Geben Sie Ihre Freiheit ein, damit der Compiler Sie überprüfen und anleiten kann, wenn Sie gegen die Sprache oder die Regeln Ihres eigenen Programms verstoßen. unabhängig von der Größe (LOC) Ihres Programms.

Wir haben kürzlich einen Nachwuchskollegen zweimal eine reaktive Schnittstelle implementieren lassen: einmal in Elm, einmal in React; Schauen Sie sich an, um eine Vorstellung davon zu bekommen, wovon ich spreche.

Vergleiche Main.elm(getippt) ⇔ index.js(untypisiert, keine Tests)

(ps. beachten Sie, dass der Reaktionscode nicht idiomatisch ist und verbessert werden könnte)

Eine letzte Bemerkung:

die Realität ist , dass JS ist nicht typisiert. Wem soll ich die getippte Programmierung vorschlagen ?

Sehen Sie, mit JS befinden wir uns in einem anderen Bereich: Befreit von Typen können wir leicht Dinge ausdrücken, die schwer oder unmöglich sind, einen richtigen Typ zu geben (was sicherlich ein Vorteil sein kann).

Aber ohne Typen gibt es wenig, um unsere Programme in Schach zu halten, so dass wir gezwungen sind, Tests und (in geringerem Umfang) Codestile einzuführen.

Ich empfehle Ihnen, sich bei LISP (z. B. ClojureScript ) inspirieren zu lassen und in das Testen Ihrer Codes zu investieren. Lesen Sie den Weg des Teilstapels , um sich ein Bild zu machen.

Frieden.

Drähte
quelle
Warum das Downvote? Ich habe sicherlich nichts dagegen, aber da OP schrieb "es hilft mir, besseres JavaScript zu schreiben", denke ich, dass dies eine nützliche Antwort ist? Was denken Sie?
Drähte
1
unabhängig von den Abstimmungen, aber sowohl Ihre Main.elm- als auch Ihre index.js-Links sind 404s
cs01
1
Die Frage war eindeutig jslint oder jshint und fragte nicht nach Alternativen.
Jzacharuk
1
Das GIF verdient eine Gegenstimme.
sr9yar
8

Anstatt manuelle Fluseneinstellungen vorzunehmen, können wir alle Fluseneinstellungen oben in unsere JS-Datei selbst einfügen, z

Deklarieren Sie alle globalen Variablen in dieser Datei wie folgt:

/*global require,dojo,dojoConfig,alert */

Deklarieren Sie alle Fluseneinstellungen wie folgt:

/*jslint browser:true,sloppy:true,nomen:true,unparam:true,plusplus:true,indent:4 */

Hoffe das wird dir helfen :)

Vikash Pandey
quelle
1

Es gibt auch eine andere aktiv entwickelte Alternative - JSCS - JavaScript Code Style :

JSCS ist ein Codestil-Linter zum programmgesteuerten Durchsetzen Ihres Styleguides. Sie können JSCS für Ihr Projekt detailliert konfigurieren, indem Sie über 150 Validierungsregeln verwenden, einschließlich Voreinstellungen aus gängigen Styleguides wie jQuery, Airbnb, Google und anderen.

Es enthält mehrere Voreinstellungen , aus denen Sie auswählen können, indem Sie einfach die presetin der .jscsrcKonfigurationsdatei angeben und anpassen - Regeln überschreiben, aktivieren oder deaktivieren:

{
    "preset": "jquery",
    "requireCurlyBraces": null
}

Es gibt auch Plugins und Erweiterungen für beliebte Editoren.

Siehe auch:

Alecxe
quelle