JSHint e jQuery: '$' non è definito


215

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?


Hai aggiunto jquery.jsalla tua pagina?
Rory McCrossan,

4
Bene, se lo nutri da solo quel codice da solo, $ è indefinito.
Punta a punta

Ho questo problema in angolare. Basta cambiare $ in angular.element e jshint no warn
Raphael Vitor

Risposte:


381

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 .


47
Questa opzione, jquery, definisce semplicemente due variabili globali di sola lettura: $ e jQuery. È una versione più breve di /*global $:false, jQuery:false */.
Anton Kovalyov,

1
Con il mio JSHint per Visual Studio, l'opzione si chiama "assume jQuery"
Jowen

2
L'opzione flag è la strada da percorrere. Per i primi timer: aggiungi la riga 'jquery: true' nel tuo file .jshintrc.
genkilabs

3
Qual è il motivo di ": false" ?, Ho trovato / * global $ * / funziona bene. (Nel mio caso era / * global jQuery * / sebbene)
Michiel il

c'è un modo per impostarlo genericamente per tutte le funzioni all'interno di uno script, piuttosto che digitarne uno alla volta /* global ... */? In genere imposto uno script con tutte le mie funzioni nel mio, mainquindi è complicato definirne uno per uno ...
Tsando,

148

Puoi anche aggiungere due righe al tuo .jshintrc

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

Questo dice a jshint che ci sono due variabili globali.


3
questa dovrebbe essere la risposta accettata. inquinare OGNI SINGOLO FILE javascript nel tuo progetto con varie righe di codice per rendere felice un controllo della sintassi non è un'opzione. Grazie wmil
Cosmin,

51

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.


6
Questa probabilmente dovrebbe essere la risposta migliore ... peccato che sia sepolta qui
Zach Lysobey,

Dove trovare il file .jshintrc nel testo Sublime 3? Ho provato a mettere questa opzione nel file SublimeLinter.sublime-settings (Preferenze-> Impostazioni pacchetto-> SublimeLinter-> Impostazioni-Default) e ho anche provato a creare un nuovo file .jshintrc (my.jshintrc) nella directory principale del mio progetto, secondo jshint.com/docs . Non di questo mi ha aiutato.
Milos,

@Milos Installa JSHint Gutter in sublimetext 3. Vai su Strumenti> JSHint> Imposta preferenze Linting, Si aprirà .jshintrc.
niren,

1
Niente di nuovo, non è ancora possibile riconoscere il segno "$". Quando apro .jshintrc è sul percorso: \ AppData \ Roaming \ Sublime Text 3 \ Packages \ JSHint Gutter, inserisco "jquery": true e non succede nulla.
Milos,

Risposta molto migliore dell'aggiunta di variabili alla sezione globale! Risolvilo in questo modo!
Matthias Kleine,

16

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

1
Se si impostano le opzioni "browser" e "nodo" su "true", gli unici elementi rimanenti in questo elenco che sono necessari sono $, jquery e angolare. Per ulteriori informazioni, consultare la sezione Ambiente dei documenti: jshint.com/docs/options/#environments
user456584

Ho modificato la risposta per includere l'aggiornamento grazie @ user456584
James Harrington,

8

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.


1
Prestare attenzione anche a poter sovrascrivere tutte le configurazioni interne selezionando "usa il file di configurazione". Questo farà vedere a WS le modifiche al file di configurazione. Senza di essa lo ignora e basta.
Neoswf,

3

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.

2
Questo è un modello che uso anche io, ma non risolve il problema originale per me. JSHint si lamenta ancora che una variabile non sia definita sull'ultima riga ( "}(window))"nel tuo esempio - ho avuto problemi anche con jQuery e Highcharts). Non ho trovato un modo per disattivarlo oltre a definire un globale per il file, che poi sconfigge lo scopo.
mirosia,

@myrosia browser: truedice a JSHint che ti aspetti un ambiente browser (dove windowè già definito).
sam,

Mi piace questo approccio!
jethroo,

2

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.


2

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)

0

Probabilmente vuoi fare quanto segue,

const $ = window.$

per evitarlo lanciando un errore di sfilacciatura.

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.