javascript - react - JSHint y jQuery: ''$'' no está definido

npm jshint

Question

El siguiente JS:

(function() {
  "use strict";

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

}());

Rendimientos:

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

Cuando se alinea utilizando JSHint 0.5.5. ¿Algunas ideas?

Answer 1

Aquí hay una pequeña lista feliz para poner en tu .jshintrc
Añadiré a esta lista a medida que pase 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 2

En lugar de recomendar el habitual "apagar los JSHint globales", recomiendo usar el patrón del módulo para solucionar este problema. Mantiene su código "contenido" y le da un aumento de rendimiento (basado en "10 cosas que aprendí sobre Jquery de Paul Irish " ).

Tiendo a escribir mis patrones de módulo de esta manera:

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

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

Puede obtener estos otros beneficios de rendimiento (se explican más here ):

• Al reducir el código, la declaración de objeto de window pasada también se reduce. por ejemplo, window.alert() convierte en m.alert() .
• El código dentro de la función anónima autoejecutable solo usa 1 instancia del objeto de window .
• Se reduce al chase cuando se invoca una propiedad o método de window , lo que evita un recorrido costoso de la cadena de alcance, por ejemplo, window.alert() (más rápido) frente al rendimiento de alert() (más lento).
• Ámbito local de funciones a través del "espacio de nombres" y la contención (los globales son malos). Si necesita dividir este código en scripts separados, puede hacer un submódulo para cada uno de esos scripts y hacer que se importen en un módulo principal.

Answer 3

Para corregir este error al utilizar la implementación JSHint en línea :

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

Answer 4

Si está utilizando un editor IntelliJ, bajo

• Preferencias / Configuraciones
  • Javascript
    • Herramientas de calidad de código
      • JSHint
        • Predefinido (en la parte inferior), haga clic en Establecer

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

Answer 5

Si está utilizando un editor de IntelliJ como WebStorm, PyCharm, RubyMine o IntelliJ IDEA:

En la sección Entornos de Archivo / Configuración / JavaScript / Herramientas de calidad de código / JSHint, haga clic en la casilla de verificación jQuery.

Answer 6

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 colocar esta configuración en él:

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

Esto le declara a JSHint que $ es una variable global, y el falso indica que no se debe anular.

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

/*globals $:false */

También hay una opción jshint abreviada "jquery" como se ve en la página de opciones de JSHint ...

Answer 7

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 8

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

Por la referencia de las opciones de JSHint :

jquery

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