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

215

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?

Isocyanate d'allyle
la source
Avez-vous ajouté jquery.jsà votre page?
Rory McCrossan
4
Eh bien, si vous le nourrissez uniquement, ce code $ n'est pas défini.
Pointy
J'ai ce problème en angulaire. Changez simplement $ en angular.element et jshint no warn
Raphael Vitor

Réponses:

381

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 .

Stephen Booher
la source
47
Cette option, jquery, définit simplement deux variables globales en lecture seule: $ et jQuery. Il s'agit d'une version plus courte de /*global $:false, jQuery:false */.
Anton Kovalyov
1
Avec mon JSHint pour Visual Studio, l'option est appelée "assume jQuery"
Jowen
2
Le drapeau d'option est la voie à suivre. Pour les débutants: ajoutez la ligne 'jquery: true' dans votre fichier .jshintrc.
genkilabs
3
Quelle est la raison de ": false"?, J'ai trouvé que / * global $ * / fonctionne très bien. (Dans mon cas, était / * global jQuery * / cependant)
Michiel
existe-t-il un moyen de définir cela de manière générique pour toutes les fonctions d'un script, plutôt que de taper un par un /* global ... */? J'importe généralement un script avec toutes mes fonctions dans mon maindonc c'est lourd de définir un par un ...
tsando
148

Vous pouvez également ajouter deux lignes à votre .jshintrc

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

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

wmil
la source
3
ce devrait être la réponse acceptée. polluer CHAQUE SIMPLE FICHIER javascript dans votre projet avec différentes lignes de code pour rendre le vérificateur de syntaxe heureux n'est pas une option. Merci wmil
Cosmin
51

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.

niren
la source
6
Cela devrait probablement être la meilleure réponse ... dommage qu'il soit enterré ici
Zach Lysobey
Où trouver le fichier .jshintrc dans Sublime text 3? J'ai essayé de mettre cette option dans le fichier SublimeLinter.sublime-settings (Préférences-> Paramètres du package-> SublimeLinter-> Settings-Default) et j'ai également essayé de créer un nouveau fichier .jshintrc (my.jshintrc) dans le répertoire racine de mon projet, selon jshint.com/docs . Rien de tout cela ne m'a aidé.
Milos
@Milos Installer JSHint Gutter en sous-texte 3. Allez dans Outils> JSHint> Définir les préférences de linting, cela ouvrira .jshintrc.
niren
1
Rien de nouveau, il ne reconnaît toujours pas le signe "$". Lorsque j'ouvre .jshintrc, il se trouve sur le chemin: \ AppData \ Roaming \ Sublime Text 3 \ Packages \ JSHint Gutter, je mets "jquery": true et rien ne se passe.
Milos
Meilleure réponse que d'ajouter des variables à la section des globaux! Résolvez-le de cette façon!
Matthias Kleine
16

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
  },
}
James Harrington
la source
1
Si vous définissez les options "navigateur" et "noeud" sur "true", les seuls éléments restants de cette liste qui sont nécessaires sont $, jquery et angular. Pour plus d'informations, consultez la section Environnement des documents: jshint.com/docs/options/#environments
user456584
J'ai édité la réponse pour inclure votre mise à jour merci @ user456584
James Harrington
8

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.

Joe Golton
la source
1
Faites également attention à ce que vous puissiez remplacer toutes les configurations internes en cochant "Utiliser le fichier de configuration". Cela fera voir à WS les modifications du fichier de configuration. Sans cela, il l'ignore.
neoswf
3

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.
Alastair Paragas
la source
2
C'est un modèle que j'utilise également, mais cela ne résout pas le problème d'origine pour moi. JSHint se plaint toujours qu'une variable n'est pas définie sur la dernière ligne ( "}(window))"dans votre exemple - j'ai également eu des problèmes avec jQuery et Highcharts). Je n'ai pas trouvé d'autre moyen de la désactiver que de définir un global pour le fichier, qui défait alors le but.
myrosia
@myrosia browser: trueindique à JSHint que vous attendez un environnement de navigateur (où windowest déjà défini).
sam
J'aime cette approche!
jethroo
2

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.

citoyen connu
la source
2

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)
Tony L.
la source
0

Vous voulez probablement faire ce qui suit,

const $ = window.$

pour éviter de lancer une erreur de peluchage.

nilakantha singh deo
la source