Jshint y jQuery: '$' no está definido

Question

Los siguientes JS:

(function() {
  "use strict";

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

}());

Rendimientos:

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

Cuando se pelea usando Jshint 0.5.5. ¿Algunas ideas?

Answer 1

Si está utilizando una versión relativamente reciente de JSHINT, el enfoque generalmente preferido es crear un archivo .jshintrc en la raíz de su proyecto y poner esta configuración en él:

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

Esto declara a Jshint que $ es una variable global, y el falso indica que no debe anularse.

El archivo .jshintrc no fue compatible con versiones realmente antiguas de Jshint (como V0.5.5 como la pregunta original en 2012). Si no puede o no desea usar el archivo .jshintrc, puede agregar esto en la parte superior del archivo de script:

/*globals $:false */

También hay una opción a taquigrafía "JQuery" Jshint como se ve en el Página de opciones de jshint..

Answer 2

También puede agregar dos líneas a su .jshintrc

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

Esto le dice a Jshint que hay dos variables globales.

Answer 3

Todo lo que necesitas hacer es establecer "jquery": true en tus .jshintrc.

Por el Referencia de opciones de jshint:

jQuery

Esta opción define globales expuestos por la biblioteca JQuery JavaScript.

Answer 4

Aquí hay una pequeña lista feliz para poner en tu .jshintrc
Agregaré a esta lista en el tiempo.

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

Si está utilizando un editor de IntelliJ como Webstorm, Pycharm, Rubymine o IntelliJ Idea:

En la sección de entornos de Archivo/Configuración/JavaScript/Code Quality Tools/Jshint, haga clic en la casilla de verificación jQuery.

Answer 6

En lugar de recomendar el habitual "Apague los Jshint Globals", recomiendo usar el patrón de módulo Para solucionar este problema. Mantiene su código "contenido" y ofrece un impulso de rendimiento (basado en Paul Irish's "10 cosas que aprendí sobre jQuery").

Tiendo a escribir mis patrones de módulos como este:

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

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

Puede obtener estos otros beneficios de rendimiento (explicado más aquí):

• Al minificar el código, el pasado en window La declaración de objetos también se minifica. p.ej window.alert() convertirse en m.alert().
• El código dentro de la función anónima de auto-ejecutación solo usa 1 instancia de la window objeto.
• Cortas a la persecución al llamar a un window Propiedad o método, evitando un recorrido costoso de la cadena de alcance, por ejemplo, window.alert() (más rápido) versus alert() Rendimiento (más lento).
• Alcance local de las funciones a través de la "composición de nombres" y la contención (los globales son malvados). Si necesita dividir este código en scripts separados, puede hacer un submódulo para cada uno de esos scripts y importarlos en un módulo principal.

Answer 7

Si estás usando un editor de IntelliJ, debajo

• Preferencias/Configuración
  • Javascript
    • Herramientas de calidad del código
      • Trago
        • Predefinido (en la parte inferior), haga clic Establecer

Puedes escribir cualquier cosa, por ejemplo console:false, y lo agregará a la lista (.jshintrc) también, como global.

Answer 8

Para corregir este error al usar la implementación de jshint en línea:

• Haga clic en "Configurar" (superior de la columna central en la página)
• Habilitar "jQuery" (debajo de la sección "Asumir" en la parte inferior)

Answer 9

Probablemente quieras hacer lo siguiente,

const $ = window.$

Para evitar el error de pelusa.