JSHint e jQuery: '$' não está definido

O seguinte JS:

(function() {
  "use strict";

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

}());

Rendimentos:

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

Quando pintado usando JSHint 0.5.5. Alguma ideia?

Se você estiver usando uma versão relativamente recente do JSHint, a abordagem geralmente preferida é criar um arquivo .jshintrc na raiz do seu projeto e colocar esta configuração nele:

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

Isso declara para JSHint que $ é uma variável global e false indica que ele não deve ser substituído.

O arquivo .jshintrc não era suportado em versões realmente antigas do JSHint (como a v0.5.5, como a pergunta original em 2012). Se você não pode ou não deseja usar o arquivo .jshintrc, pode adicioná-lo na parte superior do arquivo de script:

/*globals $:false */

Também existe uma opção abreviada de "jquery" jshint, como visto na página de opções JSHint .

Você também pode adicionar duas linhas ao seu .jshintrc

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

Isso informa ao jshint que existem duas variáveis ​​globais.

Tudo que você precisa fazer é definir o "jquery": trueseu .jshintrc.

De acordo com a referência de opções JSHint :

jquery

Esta opção define globais expostos pela biblioteca JavaScript do jQuery.

Aqui está uma pequena lista feliz para colocar no seu .jshintrc
que adicionarei a essa lista com o passar do 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
  },
}

Se você estiver usando um editor IntelliJ, como WebStorm, PyCharm, RubyMine ou IntelliJ IDEA:

Na seção Ambientes de Arquivo / Configurações / JavaScript / Ferramentas de qualidade de código / JSHint, clique na caixa de seleção jQuery.

Em vez de recomendar o habitual "desligar os globais JSHint", recomendo usar o padrão do módulo para corrigir esse problema. Ele mantém seu código "contido" e aumenta o desempenho (com base nas "10 coisas que aprendi sobre Jquery" de Paul Irish ).

Eu costumo escrever meus padrões de módulo assim:

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

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

Você pode obter esses outros benefícios de desempenho (explicados mais aqui ):

• Ao minificar código, a windowdeclaração de objeto passada também é minificada. por exemplo, window.alert()tornar-se m.alert().
• O código dentro da função anônima de execução automática usa apenas 1 instância do windowobjeto.
• Você é direto ao chamar uma windowpropriedade ou método, impedindo a travessia cara da cadeia de escopo, por exemplo, desempenho (mais window.alert()rápido) versus alert()(mais lento).
• Escopo local de funções através de "namespacing" e contenção (os globais são maus). Se você precisar dividir esse código em scripts separados, poderá criar um submódulo para cada um desses scripts e importá-los para um módulo principal.

Se você estiver usando um editor IntelliJ, em

• Preferências / Configurações
  • Javascript
    • Ferramentas de qualidade de código
      • JSHint
        • Predefinido (na parte inferior), clique em Definir

Você pode digitar qualquer coisa, por exemplo console:false, e isso também será adicionado à lista (.jshintrc) - como global.

Para corrigir este erro ao usar a implementação JSHint online :

• Clique em "CONFIGURAR" (parte superior da coluna do meio na página)
• Ative "jQuery" (na seção "ASSUME" na parte inferior)

Você provavelmente quer fazer o seguinte,

const $ = window.$

para evitar que isso aconteça.