web-dev-qa-db-fra.com

JSHint et jQuery: '$' n'est pas défini

Le JS suivant:

(function() {
  "use strict";

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

}());

Rendements:

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

Lorsque linté avec JSHint 0.5.5. Des idées?

javascriptjqueryjshint
208
Allyl Isocyanate

Si vous utilisez une version relativement récente de JSHint, l’approche généralement préférée consiste à créer un fichier .jshintrc à la racine de votre projet et à y placer cette configuration:

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

Cela déclare à JSHint que $ est une variable globale et la valeur false indique qu’elle ne doit pas être remplacée.

Le fichier .jshintrc n'était pas pris en charge dans les très anciennes versions de JSHint (telles que la version 0.5.5 comme la question d'origine en 2012). Si vous ne pouvez pas ou ne souhaitez pas utiliser le fichier .jshintrc, vous pouvez ajouter ceci en haut du fichier de script:

/*globals $:false */

Il existe également une option abrégée "jquery" jshint, comme indiqué sur le page d'options JSHint ..

375
Stephen Booher

Vous pouvez également ajouter deux lignes à votre .jshintrc

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

Cela indique à jshint qu'il existe deux variables globales.

147
wmil

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

Selon le référence des options JSHint :

jquery

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

50
niren

Voici une petite liste joyeuse à mettre dans votre .jshintrc
J'ajouterai des points à cette liste.

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

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

Dans la section Environnements de Fichier/Paramètres/JavaScript/Outils de qualité du code/JSHint, cochez la case jQuery.

7
Joe Golton

Au lieu de recommander l’habituel "désactiver les globales JSHint", je vous recommande d’utiliser le modèle de module pour résoudre ce problème. Il garde votre code "contenu" et améliore les performances (d'après Paul Irish "10 choses que j'ai apprises sur Jquery" ).

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

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

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

Vous pouvez obtenir ces autres avantages en termes de performances (a expliqué plus ici ):

  • Lors de la réduction du code, la déclaration d'objet passée dans window est également réduite. par exemple. window.alert() devient m.alert().
  • Le code à l'intérieur de la fonction anonyme à exécution automatique utilise uniquement 1 instance de l'objet window.
  • Lorsque vous appelez une propriété ou une méthode window, vous évitez toute traversée coûteuse de la chaîne d'étendue, par exemple. window.alert() (plus rapide) versus alert() (plus lent).
  • Portée locale des fonctions par "espacement de noms" et confinement (les globales sont pervers). Si vous devez diviser ce code en scripts distincts, vous pouvez créer un sous-module pour chacun de ces scripts et les importer dans un module principal.
3
Alastair Paragas

Pour corriger cette erreur lors de l'utilisation de implémentation en ligne de JSHint :

  • Cliquez sur "CONFIGURER" (en haut de la colonne du milieu sur la page)
  • Activer "jQuery" (sous la section "ASSUME" en bas)
2
Tony L.

Si vous utilisez un éditeur IntelliJ, sous

  • Préférences/Paramètres
    • Javascript
      • Outils de qualité du code
        • JSHint
          • Prédéfini (en bas), cliquez Set

Vous pouvez taper n'importe quoi, par exemple console:false, et cela sera ajouté à la liste (.jshintrc) ainsi - en tant que global.

1
knowncitizen