JSHint ve jQuery: '$' tanımlı değil

Aşağıdaki JS:

(function() {
  "use strict";

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

}());

Verim:

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

JSHint 0.5.5 kullanılarak astarlandığında. Herhangi bir fikir?

JSHint'in nispeten yeni bir sürümünü kullanıyorsanız, genel olarak tercih edilen yaklaşım, projenizin kök dizininde bir .jshintrc dosyası oluşturmak ve bu yapılandırmayı içine yerleştirmektir:

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

Bu JSHint'e $ 'ın global bir değişken olduğunu bildirir ve false değeri geçersiz kılınmaması gerektiğini belirtir.

.Jshintrc dosyası JSHint'in gerçekten eski sürümlerinde desteklenmemiştir (2012'deki orijinal soru gibi v0.5.5 gibi). .Jshintrc dosyasını kullanamıyorsanız veya kullanmak istemiyorsanız, bunu komut dosyasının üstüne ekleyebilirsiniz:

/*globals $:false */

JSHint seçenekleri sayfasında görüldüğü gibi steno "jquery" jshint seçeneği de vardır .

Ayrıca .jshintrc'nize iki satır ekleyebilirsiniz.

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

Bu, jshint'e iki global değişken olduğunu söyler.

Tek yapmanız gereken tek şey ayarlanır "jquery": trueGözlerinde farklı .jshintrc.

Başına JSHint seçenekleri referans :

jQuery

Bu seçenek, jQuery JavaScript kitaplığı tarafından maruz kalınan globalleri tanımlar.

İşte .jshintrc koymak için mutlu küçük bir liste
zaman geçerken bu listeye ekleyeceğim.

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

WebStorm, PyCharm, RubyMine veya IntelliJ IDEA gibi bir IntelliJ editörü kullanıyorsanız:

Dosya / Ayarlar / JavaScript / Kod Kalitesi Araçları / JSHint'in Ortamlar bölümünde jQuery onay kutusunu tıklayın.

Her zamanki "JSHint globals kapat" tavsiye etmek yerine, bu sorunu gidermek için modül kalıbı kullanmanızı öneririz . Kodunuzu "içermekte" tutar ve performans artışı sağlar (Paul Irish'ın "Jquery hakkında öğrendiğim 10 şeye dayanarak " ).

Modül kalıplarımı şöyle yazıyorum:

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

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

Bu diğer performans avantajlarından yararlanabilirsiniz (daha fazla bilgi burada açıklanmaktadır ):

• Kodu küçültürken, windownesne bildiriminde iletilen öğe de küçültülür. örneğin window.alert()olmak m.alert().
• Kendi kendine çalışan anonim işlev içindeki kod, windownesnenin yalnızca 1 örneğini kullanır .
• Bir windowözelliği veya yöntemi çağırırken kovalamacaya kestiğinizde , kapsam zincirinin pahalı bir şekilde geçmesini window.alert()( örneğin, daha hızlı) ve alert()(daha yavaş) performansı önlersiniz.
• "Ad alanı" ve çevreleme yoluyla işlevlerin yerel kapsamı (globaller kötülüktür). Bu kodu ayrı komut dosyalarına bölmeniz gerekirse, bu komut dosyalarının her biri için bir alt modül oluşturabilir ve bunların bir ana modüle alınmasını sağlayabilirsiniz.

IntelliJ editörü kullanıyorsanız, altında

• Tercihler / Ayarlar
  • JavaScript
    • Kod Kalitesi Araçları
      • JSHint
        • Önceden tanımlanmış (altta), Ayarla'yı tıklayın

Örneğin console:false, herhangi bir şey yazabilirsiniz ve bunu listeye (.jshintrc) ekler - global olarak.

Çevrimiçi JSHint uygulamasını kullanırken bu hatayı gidermek için :

• "YAPILANDIR" (sayfadaki orta sütunun üst kısmı) seçeneğini tıklayın
• "JQuery" yi etkinleştirin (alttaki "ASSUME" bölümünün altında)

Muhtemelen aşağıdakileri yapmak istersiniz,

const $ = window.$

linting hatası atmasını önlemek için.