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

215

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?

Isocianato de Alilo
fonte
Você adicionou jquery.jsà sua página?
Rory McCrossan
4
Bem, se você alimentá-lo apenas esse código por si só, $ é indefinido.
Pointy
Eu tenho esse problema em angular. Apenas altere $ para angular.element e jshint no warn #
Raphael Vitor

Respostas:

381

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 .

Stephen Booher
fonte
47
Essa opção, jquery, simplesmente define duas variáveis ​​globais somente leitura: $ e jQuery. É uma versão mais curta do /*global $:false, jQuery:false */.
Anton Kovalyov
1
Com a minha JSHint para o Visual Studio, a opção é chamado de "assumir jQuery"
Jowen
2
O sinalizador de opção é o caminho a seguir. Para iniciantes: adicione a linha 'jquery: true' no seu arquivo .jshintrc.
precisa saber é o seguinte
3
Qual é o motivo de ": false"?, Achei / * global $ * / funciona muito bem. (No meu caso na era / * jQuery mundial * / embora)
Michiel
existe uma maneira de definir isso genericamente para todas as funções em um script, em vez de digitar uma a uma /* global ... */? Eu normalmente importar um script com todas as minhas funções em minha mainpor isso é complicado para definir um por um ...
tsando
148

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

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

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

wmil
fonte
3
essa deve ser a resposta aceita. poluir TODO O ÚNICO ARQUIVO javascript no seu projeto com várias linhas de código para tornar um verificador de sintaxe feliz não é uma opção. Obrigado wmil
Cosmin
51

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.

niren
fonte
6
Isso provavelmente deve ser a principal resposta ... vergonha é enterrado aqui
Zach Lysobey
Onde encontrar o arquivo .jshintrc no texto sublime 3? Tentei colocar essa opção no arquivo SublimeLinter.sublime-settings (Preferências-> Configurações do pacote-> SublimeLinter-> Configurações-Padrão) e também tentei criar um novo arquivo .jshintrc (my.jshintrc) no diretório raiz do meu projeto, de acordo com jshint.com/docs . Nada disso me ajudou.
Milos
@Milos Instale o JSHint Gutter no sublimetext 3. Vá para Ferramentas> JSHint> Definir preferências de limpeza, ele abrirá .jshintrc.
Niren
1
Nada de novo, ele ainda não pode reconhecer o sinal "$". Quando abro .jshintrc, ele está no caminho: \ AppData \ Roaming \ Sublime Text 3 \ Packages \ JSHint Gutter, coloquei "jquery": true e nada acontece.
Milos
Resposta muito melhor do que adicionar variáveis ​​à seção global! Resolva assim!
Matthias Kleine
16

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
  },
}
James Harrington
fonte
1
Se você definir as opções "browser" e "node" como "true", os únicos itens restantes nesta lista necessários serão $, jquery e angular. Para obter mais informações, consulte a seção Ambiente dos documentos: jshint.com/docs/options/#environments
user456584
Eu editei a resposta para incluir o seu update obrigado @ user456584
James Harrington
8

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.

Joe Golton
fonte
1
Preste atenção também para que você possa substituir todas as configurações internas marcando "usar arquivo de configuração". Isso fará com que o WS veja as modificações no arquivo de configuração. Sem ele, ele simplesmente ignora.
Neoswf
3

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.
Alastair Paragas
fonte
2
Esse é um padrão que eu também uso, mas não resolve o problema original para mim. O JSHint ainda reclama que uma variável não está definida na última linha ( "}(window))"no seu exemplo - eu também tive problemas com o jQuery e o Highcharts). Não encontrei uma maneira de desativá-lo além de definir um global para o arquivo, que, em seguida, derrota o propósito.
myrosia
@myrosia browser: truediz ao JSHint que você espera um ambiente de navegador (onde windowjá está definido).
sam
Eu gosto dessa abordagem!
Jethroo 15/09/16
2

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.

conhecido
fonte
2

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)
Tony L.
fonte
0

Você provavelmente quer fazer o seguinte,

const $ = window.$

para evitar que isso aconteça.

nilakantha singh deo
fonte