JSHint e jQuery: '$' non è definito

Il seguente JS:

(function() {
  "use strict";

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

}());

I rendimenti:

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

Se sfilacciato con JSHint 0.5.5. Qualche idea?

Se si utilizza una versione relativamente recente di JSHint, l'approccio generalmente preferito è quello di creare un file .jshintrc nella radice del progetto e inserirvi questa configurazione:

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

Questo dichiara a JSHint che $ è una variabile globale e il falso indica che non deve essere sovrascritto.

Il file .jshintrc non era supportato nelle versioni davvero vecchie di JSHint (come v0.5.5 come la domanda originale del 2012). Se non puoi o non vuoi usare il file .jshintrc, puoi aggiungerlo nella parte superiore del file di script:

/*globals $:false */

C'è anche un'opzione jshint "jquery" abbreviata come si vede nella pagina delle opzioni JSHint .

Puoi anche aggiungere due righe al tuo .jshintrc

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

Questo dice a jshint che ci sono due variabili globali.

Tutto quello che devi fare è impostare "jquery": truenel tuo .jshintrc.

Per il riferimento alle opzioni JSHint :

jquery

Questa opzione definisce i globi esposti dalla libreria JavaScript jQuery.

Ecco una piccola lista felice da mettere nel tuo .jshintrc
che aggiungerò a questa lista col passare del tempo.

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

Se si utilizza un editor IntelliJ come WebStorm, PyCharm, RubyMine o IntelliJ IDEA:

Nella sezione Ambienti di File / Impostazioni / JavaScript / Strumenti qualità codice / JSHint, fai clic sulla casella di controllo jQuery.

Invece di raccomandare il solito "spegni i globuli JSHint", ti consiglio di usare il modello del modulo per risolvere questo problema. Mantiene il tuo codice "contenuto" e migliora le prestazioni (basato sulle "10 cose che ho imparato su Jquery" di Paul Irish ).

Tendo a scrivere i miei pattern module in questo modo:

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

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

Puoi ottenere questi altri vantaggi in termini di prestazioni (spiegati di più qui ):

• Quando si minimizza il codice, windowviene minimizzata anche la dichiarazione dell'oggetto passato . es . window.alert()diventare m.alert().
• Il codice all'interno della funzione anonima autoeseguita utilizza solo 1 istanza windowdell'oggetto.
• Si passa all'inseguimento quando si chiama in una windowproprietà o un metodo, evitando costosi attraversamenti della catena dell'ambito, ad esempio prestazioni (più window.alert()veloci) rispetto a alert()(più lente).
• Portata locale di funzioni tramite "namespace" e contenimento (i globi sono cattivi). Se è necessario suddividere questo codice in script separati, è possibile creare un sottomodulo per ciascuno di essi e importarli in un modulo principale.

Se si utilizza un editor IntelliJ, in

• Preferenze / Impostazioni
  • Javascript
    • Strumenti per la qualità del codice
      • JSHint
        • Predefinito (in basso), fai clic su Imposta

Puoi digitare qualsiasi cosa, per esempio console:false, e lo aggiungerà anche alla lista (.jshintrc) - a livello globale.

Per correggere questo errore quando si utilizza l'implementazione JSHint online :

• Fai clic su "CONFIGURA" (parte superiore della colonna centrale sulla pagina)
• Abilita "jQuery" (nella sezione "ASSUME" in fondo)

Probabilmente vuoi fare quanto segue,

const $ = window.$

per evitarlo lanciando un errore di sfilacciatura.