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 peluches à l'aide de JSHint 0.5.5. Des idées?

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 mettre 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 versions très anciennes de JSHint (comme la v0.5.5 comme la question d'origine en 2012). Si vous ne pouvez pas ou ne voulez pas utiliser le fichier .jshintrc, vous pouvez l'ajouter en haut du fichier de script:

/*globals $:false */

Il y a aussi une option raccourcie "jquery" jshint comme vu sur la page d'options JSHint .

Vous pouvez également ajouter deux lignes à votre .jshintrc

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

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

Tout ce que vous devez faire est de mettre "jquery": truedans votre .jshintrc.

Selon la référence des options JSHint :

jquery

Cette option définit les globaux exposés par la bibliothèque JavaScript jQuery.

Voici une petite liste heureuse à mettre dans votre .jshintrc
que j'ajouterai à cette liste au fil du temps.

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

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.

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

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 de performance (expliqués plus ici ):

• Lors de la minification du code, la windowdéclaration d'objet passée est également minifiée. par exemple window.alert()devenir m.alert().
• Le code à l'intérieur de la fonction anonyme auto-exécutable utilise uniquement 1 instance de l' windowobjet.
• Vous passez à la chasse lorsque vous appelez une windowpropriété ou une méthode, empêchant une traversée coûteuse de la chaîne de portée, par exemple window.alert()(plus rapide) par rapport à alert()(plus lente) les performances.
• Portée locale des fonctions grâce à «l'espace de noms» et au confinement (les globaux sont mauvais). Si vous avez besoin de diviser ce code en scripts séparés, vous pouvez créer un sous-module pour chacun de ces scripts et les importer dans un module principal.

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 sur Définir

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

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

• Cliquez sur "CONFIGURER" (en haut de la colonne du milieu sur la page)
• Activez "jQuery" (sous la section "ASSUME" en bas)

Vous voulez probablement faire ce qui suit,

const $ = window.$

pour éviter de lancer une erreur de peluchage.