JSHint dan jQuery: '$' tidak ditentukan

JS berikut:

(function() {
  "use strict";

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

}());

Hasil:

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

Ketika dilapisi menggunakan JSHint 0,5.5. Ada ide?

Jika Anda menggunakan versi JSHint yang relatif baru, pendekatan yang umumnya disukai adalah membuat file .jshintrc di root proyek Anda, dan masukkan konfigurasi ini di dalamnya:

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

Ini menyatakan kepada JSHint bahwa $ adalah variabel global, dan false menunjukkan bahwa ia tidak boleh diganti.

File .jshintrc tidak didukung di versi JSHint yang benar-benar lama (seperti v0.5.5 seperti pertanyaan asli pada 2012). Jika Anda tidak dapat atau tidak ingin menggunakan file .jshintrc, Anda dapat menambahkan ini di bagian atas file skrip:

/*globals $:false */

Ada juga opsi jshint "jquery" steno seperti yang terlihat pada halaman opsi JSHint ..

Anda juga dapat menambahkan dua baris ke .jshintrc Anda

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

Ini memberitahu jshint bahwa ada dua variabel global.

Yang perlu Anda lakukan adalah mengatur "jquery": truedi .jshintrc.

Per referensi opsi JSHint :

jquery

Opsi ini mendefinisikan global yang diekspos oleh pustaka JavaScript jQuery.

Berikut ini adalah daftar kecil untuk dimasukkan ke .jshintrc Anda.
Saya akan menambahkan daftar ini pada waktu berlalu.

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

Jika Anda menggunakan editor IntelliJ seperti WebStorm, PyCharm, RubyMine, atau IntelliJ IDEA:

Di bagian Lingkungan pada File / Pengaturan / JavaScript / Kualitas Alat / JSHint, klik pada kotak centang jQuery.

Alih-alih merekomendasikan "matikan JSHint global" yang biasa, saya sarankan menggunakan pola modul untuk memperbaiki masalah ini. Itu membuat kode Anda "terkandung" dan memberikan peningkatan kinerja (berdasarkan 10 hal yang saya pelajari tentang Jquery karya Paul Irish ).

Saya cenderung menulis pola modul saya seperti ini:

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

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

Anda bisa mendapatkan manfaat kinerja lainnya ini (dijelaskan lebih lanjut di sini ):

• Saat mengecilkan kode, windowdeklarasi objek yang diteruskan akan diperkecil juga. misalnya window.alert()menjadi m.alert().
• Kode di dalam fungsi anonim yang dijalankan sendiri hanya menggunakan 1 instance windowobjek.
• Anda memotong ke pengejaran saat memanggil windowproperti atau metode, mencegah traversal mahal dari rantai lingkup misalnya window.alert()(lebih cepat) versus alert()(lebih lambat) kinerja.
• Lingkup fungsi lokal melalui "namespacing" dan penahanan (global adalah kejahatan). Jika Anda perlu memecah kode ini menjadi skrip yang terpisah, Anda dapat membuat submodule untuk masing-masing skrip tersebut, dan minta mereka diimpor ke dalam satu modul utama.

Jika Anda menggunakan editor IntelliJ, di bawah

• Preferensi / Pengaturan
  • Javascript
    • Alat Kualitas Kode
      • JSHint
        • Predefined (di bawah), klik Set

Anda dapat mengetikkan apa saja, misalnya console:false, dan itu akan menambahkannya ke daftar (.jshintrc) juga - sebagai global.

Untuk memperbaiki kesalahan ini saat menggunakan implementasi JSHint online :

• Klik "KONFIGURASI" (bagian atas kolom tengah pada halaman)
• Aktifkan "jQuery" (di bawah bagian "ASSUME" di bagian bawah)

Anda mungkin ingin melakukan hal berikut,

const $ = window.$

untuk menghindari itu melempar kesalahan linting.