JSHint und jQuery: '$' ist nicht definiert

215

Die folgende JS:

(function() {
  "use strict";

  $("#target").click(function(){
    console.log("clicked");
  });

}());

Ausbeuten:

test.js: line 5, col 3, '$' is not defined.

Bei Flusen mit JSHint 0.5.5. Irgendwelche Ideen?

Allylisocyanat
quelle
Haben Sie jquery.jsIhrer Seite hinzugefügt ?
Rory McCrossan
4
Nun, wenn Sie es nur diesen Code von selbst füttern, $ ist undefiniert.
Pointy
Ich habe dieses Problem im Winkel. Ändern Sie einfach $ in angle.element und jshint no warn
Raphael Vitor

Antworten:

381

Wenn Sie eine relativ aktuelle Version von JSHint verwenden, besteht der allgemein bevorzugte Ansatz darin, eine .jshintrc-Datei im Stammverzeichnis Ihres Projekts zu erstellen und diese Konfiguration darin abzulegen:

{
    "globals": {
        "$": false
    }
}

Dies erklärt JSHint, dass $ eine globale Variable ist, und false gibt an, dass sie nicht überschrieben werden soll.

Die .jshintrc-Datei wurde in wirklich alten Versionen von JSHint nicht unterstützt (z. B. v0.5.5 wie die ursprüngliche Frage von 2012). Wenn Sie die .jshintrc-Datei nicht verwenden können oder möchten, können Sie diese oben in der Skriptdatei hinzufügen:

/*globals $:false */

Es gibt auch eine Kurzform "jquery" jshint-Option, wie auf der Seite mit den JSHint-Optionen angezeigt .

Stephen Booher
quelle
47
Diese Option, jquery, definiert einfach zwei schreibgeschützte globale Variablen: $ und jQuery. Es ist eine kürzere Version von /*global $:false, jQuery:false */.
Anton Kovalyov
1
Mit meinem JSHint für Visual Studio heißt die Option "jQuery annehmen"
Jowen
2
Das Optionsflag ist der richtige Weg. Für Erstbesucher: Fügen Sie die Zeile 'jquery: true' in Ihre .jshintrc-Datei ein.
Genkilabs
3
Was ist der Grund für ": false"? Ich fand / * global $ * / funktioniert einwandfrei. (In meinem Fall war / * global jQuery * / obwohl)
Michiel
Gibt es eine Möglichkeit, dies generisch für alle Funktionen innerhalb eines Skripts festzulegen, anstatt es einzeln einzugeben /* global ... */? Normalerweise importiere ich ein Skript mit all meinen Funktionen in mein Skript, maindaher ist es umständlich, eins nach dem anderen zu definieren ...
Tsando
148

Sie können Ihrer .jshintrc auch zwei Zeilen hinzufügen

  "globals": {
    "$": false,
    "jQuery": false
  }

Dies teilt jshint mit, dass es zwei globale Variablen gibt.

wmil
quelle
3
Dies sollte die akzeptierte Antwort sein. JEDE EINZELNE Javascript-DATEI in Ihrem Projekt mit verschiedenen Codezeilen zu verschmutzen, um den Syntaxprüfer glücklich zu machen, ist keine Option. Danke wmil
Cosmin
51

Alles was Sie tun müssen, ist "jquery": truein Ihrem eingestellt .jshintrc.

Gemäß der JSHint-Optionsreferenz :

jquery

Diese Option definiert Globals, die von der jQuery-JavaScript-Bibliothek verfügbar gemacht werden.

niren
quelle
6
Dies sollte wahrscheinlich die beste Antwort sein ... schade, dass es hier unten begraben ist
Zach Lysobey
Wo finde ich die .jshintrc-Datei in Sublime Text 3? Ich habe versucht, diese Option in die Datei SublimeLinter.sublime-settings (Einstellungen-> Paketeinstellungen-> SublimeLinter-> Einstellungen-Standard) einzufügen und habe auch versucht, eine neue .jshintrc-Datei (my.jshintrc) in meinem Projektstammverzeichnis zu erstellen jshint.com/docs . Nichts davon hat mir geholfen.
Milos
@Milos JSHint Gutter im Sublimetext installieren 3. Gehen Sie zu Extras> JSHint> Linting-Einstellungen festlegen. Daraufhin wird .jshintrc geöffnet.
Niren
1
Nichts mehr, es kann immer noch kein "$" - Zeichen erkennen. Wenn ich .jshintrc öffne, befindet es sich im Pfad: \ AppData \ Roaming \ Sublime Text 3 \ Packages \ JSHint Gutter. Ich setze "jquery": true und nichts passiert.
Milos
Viel bessere Antwort als das Hinzufügen von Variablen zum globalen Bereich! Löse es so!
Matthias Kleine
16

Hier ist eine fröhliche kleine Liste, die Sie in Ihre .jshintrc einfügen können.
Ich werde sie im Laufe der Zeit zu dieser Liste hinzufügen.

{
  // other settings...
  // ENVIRONMENTS
  // "browser": true, // Is in most configs by default
  "node": true,
  // others (e.g. yui, mootools, rhino, worker, etc.)
  "globals": {
    "$":false,
    "jquery":false,
    "angular":false
    // other explicit global names to exclude
  },
}
James Harrington
quelle
1
Wenn Sie die Optionen "Browser" und "Knoten" auf "true" setzen, sind in dieser Liste nur noch $, jquery und angle erforderlich. Weitere Informationen finden Sie im Abschnitt Umgebung der Dokumentation: jshint.com/docs/options/#environments
user456584
Ich habe die Antwort so bearbeitet, dass sie Ihr Update enthält. Danke @ user456584
James Harrington
8

Wenn Sie einen IntelliJ-Editor wie WebStorm, PyCharm, RubyMine oder IntelliJ IDEA verwenden:

Aktivieren Sie im Abschnitt Umgebungen von Datei / Einstellungen / JavaScript / Tools für die Codequalität / JSHint das Kontrollkästchen jQuery.

Joe Golton
quelle
1
Beachten Sie auch, dass Sie alle inneren Konfigurationen überschreiben können, indem Sie "Konfigurationsdatei verwenden" aktivieren. Dadurch sieht WS die Änderungen an der Konfigurationsdatei. Ohne es ignoriert er es einfach.
Neoswf
3

Statt der üblichen „Schalten Sie den JSHint Globals“ empfehlen, empfehle ich mit dem Modul Muster dieses Problem zu beheben. Es hält Ihren Code "enthalten" und steigert die Leistung (basierend auf Paul Irishs "10 Dingen, die ich über Jquery gelernt habe" ).

Ich neige dazu, meine Modulmuster so zu schreiben:

(function (window) {
    // Handle dependencies
    var angular = window.angular,
        $ = window.$,
        document = window.document;

    // Your application's code
}(window))

Sie können diese anderen Leistungsvorteile erhalten ( hier mehr erklärt ):

  • Beim Minimieren von Code wird auch die übergebene windowObjektdeklaration minimiert. zB window.alert()werden m.alert().
  • Code in der selbstausführenden anonymen Funktion verwendet nur eine Instanz des windowObjekts.
  • Sie kommen auf den Punkt, wenn Sie eine windowEigenschaft oder Methode aufrufen , und verhindern so das teure Durchlaufen der Scope-Kette, z. B. window.alert()(schneller) gegenüber alert()(langsamer) Leistung.
  • Lokaler Funktionsumfang durch "Namespace" und Containment (Globals sind böse). Wenn Sie diesen Code in separate Skripte aufteilen müssen, können Sie für jedes dieser Skripte ein Untermodul erstellen und diese in ein Hauptmodul importieren lassen.
Alastair Paragas
quelle
2
Dies ist ein Muster, das ich ebenfalls verwende, aber es löst nicht das ursprüngliche Problem für mich. JSHint beschwert sich immer noch, dass eine Variable nicht in der letzten Zeile definiert ist ( "}(window))"in Ihrem Beispiel - ich hatte auch Probleme mit jQuery und Highcharts). Ich habe keine andere Möglichkeit gefunden, sie zu deaktivieren, als eine globale Variable für die Datei zu definieren. was dann den Zweck besiegt.
Myrosia
@myrosia browser: trueteilt JSHint mit, dass Sie eine Browserumgebung erwarten (wo windowbereits definiert).
Sam
Ich mag diesen Ansatz!
Jethroo
2

Wenn Sie einen IntelliJ-Editor verwenden, klicken Sie unter

  • Einstellungen / Einstellungen
    • Javascript
      • Tools für die Codequalität
        • JSHint
          • Vordefiniert (unten), klicken Sie auf Festlegen

Sie können beispielsweise alles console:falseeingeben, und das wird auch der Liste (.jshintrc) hinzugefügt - als global.

bekannter Bürger
quelle
2

So beheben Sie diesen Fehler bei Verwendung der Online-JSHint-Implementierung :

  • Klicken Sie auf "KONFIGURIEREN" (oben in der mittleren Spalte der Seite).
  • Aktivieren Sie "jQuery" (im Abschnitt "ASSUME" unten)
Tony L.
quelle
0

Sie möchten wahrscheinlich Folgendes tun:

const $ = window.$

um zu vermeiden, dass Flusenfehler auftreten.

Nilakantha Singh Deo
quelle