JSHint et jQuery: « $ » est pas défini

Question

La JS suivant:

(function() {
  "use strict";

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

}());

Rendements:

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

Lors de l'utilisation linted JSHint 0.5.5. Toutes les idées?

Answer 1

Si vous utilisez une version relativement récente de JSHint, l'approche généralement préférée est de créer un fichier .jshintrc dans la racine de votre projet, et de mettre cette config en elle:

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

déclare que JSHint $ est une variable globale, et le faux indique qu'il ne doit pas être surchargée.

Le fichier .jshintrc n'a pas été pris en charge dans les versions vraiment vieux de JSHint (tels que v0.5.5 comme la question initiale en 2012). Si vous ne pouvez pas ou ne voulez pas utiliser le fichier .jshintrc, vous pouvez ajouter ceci au début du fichier script:

/*globals $:false */

Il y a aussi un raccourci "jquery" option jshint vu sur le les options JSHint ..

Answer 2

Vous pouvez également ajouter deux lignes à votre .jshintrc

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

Ceci indique jshint qu'il ya deux variables globales.

Answer 3

Tout ce que vous devez faire est de définir "jquery": true dans votre .jshintrc.

Par les Options JSHint référence:

jquery

Cette option définit GLOBALS exposées par la bibliothèque JavaScript jQuery.

Answer 4

Voici une liste de peu heureux de mettre dans votre .jshintrc
Je vais ajouter à cette liste le temps passe.

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

Answer 5

Si vous utilisez un éditeur IntelliJ, comme WebStorm, PyCharm, RubyMine, ou IntelliJ IDEA:

Dans la section des environnements de fichiers / Paramètres / JavaScript / Code Outils Qualité / JSHint, cliquez sur la case à cocher jQuery.

Answer 6

Au lieu de recommander l'habituel « désactiver globals JSHint », je recommande d'utiliser le modèle le module pour résoudre ce problème. Il maintient votre code « contenu » et donne un coup de pouce de performance (basé sur Paul irlandais "10 choses que j'ai appris jquery ").

J'ai tendance à écrire mes modèles de modules comme ceci:

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

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

Vous pouvez obtenir ces avantages de performance (expliqué plus ):

• Lorsque le code minifying, le passé dans la déclaration d'objet window se minifiés aussi bien. par exemple. window.alert() se m.alert().
• Code de l'intérieur de la fonction anonyme auto-exécution utilise seulement 1 instance de l'objet window.
• Vous couper à la chasse lors de l'appel dans une propriété ou une méthode window, ce qui empêche traversal coûteuse de la chaîne portée par exemple window.alert() (plus rapide) par rapport à la performance de alert() (plus lent).
• portée locale des fonctions par « espaces de noms » et le confinement (globals sont mauvais). Si vous avez besoin de briser ce code dans les scripts séparés, vous pouvez faire une sous-module pour chacun de ces scripts, et les ont importés dans un module principal.

Answer 7

If you're using an IntelliJ editor, under

• Preferences/Settings
  • Javascript
    • Code Quality Tools
      • JSHint
        • Predefined (at bottom), click Set

You can type in anything, for instance console:false, and it will add that to the list (.jshintrc) as well - as a global.

Answer 8

To fix this error when using the online JSHint implementation:

• Click "CONFIGURE" (top of the middle column on the page)
• Enable "jQuery" (under the "ASSUME" section at the bottom)

Answer 9

You probably want to do the following,

const $ = window.$

to avoid it throwing linting error.