JSHint dan jQuery: '$' tidak ditentukan

215

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?

Allyl Isocyanate
sumber
Sudahkah Anda menambahkan jquery.jske halaman Anda?
Rory McCrossan
4
Nah, jika Anda hanya memberi makan kode itu saja, $ tidak terdefinisi.
Runcing
Saya memiliki masalah ini dalam sudut. Ubah saja $ ke angular.element dan jshint no warn
Raphael Vitor

Jawaban:

381

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 ..

Stephen Booher
sumber
47
Opsi ini, jquery, hanya mendefinisikan dua variabel global read-only: $ dan jQuery. Ini adalah versi lebih pendek dari /*global $:false, jQuery:false */.
Anton Kovalyov
1
Dengan JSHint saya untuk Visual Studio, opsi ini disebut "menganggap jQuery"
Jowen
2
Bendera opsi adalah cara untuk pergi. Untuk pengatur waktu pertama: tambahkan baris 'jquery: true' di file .jshintrc Anda.
genkilabs
3
Apa alasan untuk ": false" ?, Saya menemukan / * global $ * / berfungsi dengan baik. (Dalam kasus saya adalah / * global jQuery * / though)
Michiel
apakah ada cara untuk mengatur ini secara umum untuk semua fungsi di dalam skrip, daripada mengetik satu per satu /* global ... */? Saya biasanya mengimpor skrip dengan semua fungsi saya ke saya mainsehingga sulit untuk mendefinisikan satu per satu ...
tsando
148

Anda juga dapat menambahkan dua baris ke .jshintrc Anda

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

Ini memberitahu jshint bahwa ada dua variabel global.

wmil
sumber
3
ini harus menjadi jawaban yang diterima. mencemari SETIAP TUNGGAL javascript FILE di proyek Anda dengan berbagai baris kode untuk membuat pemeriksa sintaks senang bukan pilihan. Terima kasih wmil
Cosmin
51

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

Per referensi opsi JSHint :

jquery

Opsi ini mendefinisikan global yang diekspos oleh pustaka JavaScript jQuery.

niren
sumber
6
Ini mungkin seharusnya menjadi jawaban teratas ... rasa malu itu terkubur di sini
Zach Lysobey
Di mana menemukan file .jshintrc dalam teks Sublime 3? Saya mencoba untuk meletakkan opsi ini di file SublimeLinter.sublime-settings (Preferences-> Package Settings-> SublimeLinter-> Settings-Default) dan juga mencoba membuat file .jshintrc baru (my.jshintrc) di direktori root proyek saya, menurut jshint.com/docs . Tidak ada yang membantu saya.
Milos
@ Milo Instal JSHint Gutter di sublimetext 3. Buka Tools> JSHint> Set Linting Preferences, itu akan membuka .jshintrc.
niren
1
Tidak ada lagi, itu masih tidak bisa mengenali tanda "$". Ketika saya membuka .jshintrc itu ada di jalur: \ AppData \ Roaming \ Sublime Text 3 \ Packages \ JSHint Talang, saya menaruh "jquery": benar dan tidak ada yang terjadi.
Milos
Jawaban yang jauh lebih baik daripada menambahkan variabel ke bagian global! Selesaikan dengan cara ini!
Matthias Kleine
16

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
  },
}
James Harrington
sumber
1
Jika Anda mengatur opsi "browser" dan "node" menjadi "true", satu-satunya item yang tersisa dalam daftar ini yang diperlukan adalah $, jquery, dan angular. Untuk info lebih lanjut, lihat bagian Lingkungan pada dokumen: jshint.com/docs/options/#environmentments
user456584
Saya telah mengedit jawaban untuk menyertakan pembaruan Anda, terima kasih @ user456584
James Harrington
8

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.

Joe Golton
sumber
1
Perhatikan juga bahwa Anda dapat mengganti semua konfigurasi bagian dalam dengan memeriksa "gunakan file konfigurasi". Ini akan membuat WS melihat modifikasi file konfigurasi. Tanpa itu dia hanya mengabaikannya.
neoswf
3

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.
Alastair Paragas
sumber
2
Ini adalah pola yang saya gunakan juga, tetapi itu tidak menyelesaikan masalah asli bagi saya. JSHint masih mengeluh bahwa variabel tidak didefinisikan pada baris terakhir ( "}(window))"dalam contoh Anda - Saya punya masalah dengan jQuery dan Highcharts). Saya belum menemukan cara untuk mematikannya selain mendefinisikan global untuk file, yang kemudian mengalahkan tujuannya
myrosia
@myrosia browser: truememberi tahu JSHint bahwa Anda mengharapkan lingkungan browser (di mana windowsudah ditentukan).
sam
Saya suka pendekatan ini!
jethroo
2

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.

warga negara yang dikenal
sumber
2

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

Anda mungkin ingin melakukan hal berikut,

const $ = window.$

untuk menghindari itu melempar kesalahan linting.

nilakantha singh deo
sumber