JSHint und jQuery: '$' ist nicht definiert

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?

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 .

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

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

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

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.

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
  },
}

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.

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.

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.

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)

Sie möchten wahrscheinlich Folgendes tun:

const $ = window.$

um zu vermeiden, dass Flusenfehler auftreten.