Jshint e jQuery: '$' non è definito

Question

I seguenti js:

(function() {
  "use strict";

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

}());

Rendimenti:

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

Quando si è malato usando JSHINT 0.5.5. Qualche idea?

Answer 1

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

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

Ciò dichiara a Jshint che $ è una variabile globale e il falso indica che non dovrebbe essere ignorato.

Il file .jshintrc non è stato supportato in versioni davvero vecchie di JShint (come V0.5.5 come la domanda originale nel 2012). Se non è possibile o non si desidera utilizzare il file .jshintrc, è possibile aggiungerlo nella parte superiore del file di script:

/*globals $:false */

C'è anche un'opzione jshint "jQuery" shorthand come vista sul Pagina delle opzioni JShint..

Answer 2

Puoi anche aggiungere due righe al tuo .jshintrc

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

Questo dice a Jshint che ci sono due variabili globali.

Answer 3

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

Per Riferimento delle opzioni JShint:

jQuery

Questa opzione definisce i globali esposti dalla libreria jquery javascript.

Answer 4

Ecco una piccola lista felice da inserire nel tuo .jshintrc
Aggiungerò a questo elenco al momento.

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

Se stai usando un editor Intellij come WebStorm, Pycharm, Rubymine o Intellij Idea:

Nella sezione ambienti di file/impostazioni/javascript/strumenti di qualità del codice/jshint, fare clic sulla casella di controllo jQuery.

Answer 6

Invece di raccomandare il solito "spegnere i jshint globali", consiglio di usare il Modello del modulo Per risolvere questo problema. Mantiene il tuo codice "contenuto" e dà un aumento delle prestazioni (basato su Paul Irish "10 cose che ho imparato su jQuery").

Tendo a scrivere i miei schemi di moduli come questo:

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

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

Puoi ottenere questi altri vantaggi per le prestazioni (spiegati di più qui):

• Quando minerizza il codice, il passato window Anche la dichiarazione di oggetti viene minimizzata. per esempio window.alert() diventare m.alert().
• Il codice all'interno della funzione anonima auto-esecuzione utilizza solo 1 istanza del window oggetto.
• Si taglia all'inseguimento quando si chiama un window Proprietà o metodo, prevenendo un costoso attraversamento della catena di portata, ad es. window.alert() (più veloce) contro alert() Performance (più lenta).
• L'ambito locale delle funzioni attraverso "spaziatura dei nomi" e contenimento (i globale sono malvagi). Se è necessario interrompere questo codice in script separati, puoi fare un sottomodulo per ciascuno di questi script e farli importare in un modulo principale.

Answer 7

Se stai usando un editor di Intellij, sotto

• Preferenze/impostazioni
  • JavaScript
    • Strumenti di qualità del codice
      • Jshint
        • Predefinito (in basso), fare clic Impostare

Puoi digitare qualsiasi cosa, ad esempio console:false, e lo aggiungerà anche all'elenco (.jshintrc) - come globale.

Answer 8

Per correggere questo errore quando si utilizza L'implementazione online di Jshint:

• Fare clic su "Configura" (top della colonna centrale nella pagina)
• Abilita "jQuery" (sotto la sezione "Assumi" in fondo)

Answer 9

Probabilmente vuoi fare quanto segue,

const $ = window.$

Per evitare che si lancia un errore di rivestimento.