JSHint y jQuery: '$' no está definido

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 usando JSHint 0.5.5. ¿Algunas ideas?

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 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 abreviada "jquery" jshint como se ve en la página de opciones de JSHint .

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

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

Esto le dice a jshint que hay dos variables globales.

Todo lo que necesitas hacer es configurarlo "jquery": trueen tu .jshintrc.

Según la referencia de opciones de JSHint :

jquery

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

Aquí hay una pequeña lista feliz para poner en su .jshintrc
que agregaré a esta lista cuando 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
  },
}

Si está utilizando un editor 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.

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

Tiendo a escribir los patrones de mi 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 (explicados más aquí ):

• Cuando se minimiza el código, la windowdeclaración de objeto pasada también se minimiza. por ejemplo, window.alert()convertirsem.alert() .
• El código dentro de la función anónima autoejecutable solo usa 1 instancia del window objeto.
• Se corta al grano cuando se llama a una windowpropiedad o método, evitando el costoso recorrido de la cadena de alcance, por ejemplo window.alert()(más rápido) versusalert() (más lento) rendimiento.
• Alcance local de funciones a través del "espacio de nombres" y la contención (los globales son malvados). Si necesita dividir este código en scripts separados, puede crear un submódulo para cada uno de esos scripts e importarlos en un módulo principal.

Si está utilizando un editor IntelliJ, en

• 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 lo agregará a la lista (.jshintrc), como global.

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

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

Probablemente quieras hacer lo siguiente,

const $ = window.$

para evitar que arroje error de linting.