JSHint và jQuery: '$' không được xác định

Mã sau:

(function() {
  "use strict";

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

}());

Sản lượng:

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

Khi sử dụng JSHint 0.5.5. Có ý kiến ​​gì không?

Nếu bạn đang sử dụng một phiên bản tương đối gần đây của JSHint, cách tiếp cận thường được ưa thích là tạo tệp .jshintrc trong thư mục gốc của dự án của bạn và đặt cấu hình này trong đó:

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

Điều này tuyên bố với JSHint rằng $ là biến toàn cục và sai chỉ ra rằng nó không nên bị ghi đè.

Tệp .jshintrc không được hỗ trợ trong các phiên bản thực sự cũ của JSHint (chẳng hạn như v0.5.5 như câu hỏi ban đầu vào năm 2012). Nếu bạn không thể hoặc không muốn sử dụng tệp .jshintrc, bạn có thể thêm tệp này ở đầu tệp tập lệnh:

/*globals $:false */

Ngoài ra còn có một tùy chọn jshint "jquery" tốc ký như đã thấy trên trang tùy chọn JSHint ..

Bạn cũng có thể thêm hai dòng vào .jshintrc của mình

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

Điều này nói với jshint rằng có hai biến toàn cục.

Tất cả bạn cần làm là thiết lập "jquery": truetrong của bạn .jshintrc.

Theo tham chiếu tùy chọn JSHint :

jquery

Tùy chọn này xác định các quả cầu được hiển thị bởi thư viện jQuery JavaScript.

Đây là một danh sách nhỏ hạnh phúc để đưa vào .jshintrc của bạn,
tôi sẽ thêm vào danh sách này vào thời gian qua.

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

Nếu bạn đang sử dụng trình soạn thảo IntelliJ như WebStorm, PyCharm, RubyMine hoặc IntelliJ IDEA:

Trong phần Môi trường của Tệp / Cài đặt / JavaScript / Công cụ chất lượng mã / JSHint, nhấp vào hộp kiểm jQuery.

Thay vì khuyến nghị "tắt toàn cầu JSHint" thông thường, tôi khuyên bạn nên sử dụng mẫu mô-đun để khắc phục sự cố này. Nó giữ mã của bạn "được chứa" và tăng hiệu suất (dựa trên "10 điều tôi học được về Jquery" của Paul Irish ).

Tôi có xu hướng viết các mô-đun mô-đun của tôi như thế này:

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

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

Bạn có thể nhận được những lợi ích hiệu suất khác (giải thích thêm tại đây ):

• Khi thu nhỏ mã, thông windowbáo khai báo đối tượng cũng được rút gọn. ví dụ window.alert()trở thành m.alert().
• Mã bên trong hàm ẩn danh tự thực thi chỉ sử dụng 1 thể hiện của windowđối tượng.
• Bạn cắt theo đuổi khi gọi một thuộc windowtính hoặc phương thức, ngăn chặn việc truyền tải đắt tiền của chuỗi phạm vi, ví dụ window.alert()(nhanh hơn) so với alert()(chậm) hiệu suất.
• Phạm vi chức năng cục bộ thông qua "không gian tên" và ngăn chặn (toàn cầu là xấu xa). Nếu bạn cần chia mã này thành các tập lệnh riêng biệt, bạn có thể tạo một mô hình con cho mỗi tập lệnh đó và nhập chúng vào một mô-đun chính.

Nếu bạn đang sử dụng trình soạn thảo IntelliJ, bên dưới

• Tùy chọn / Cài đặt
  • Javascript
    • Mã công cụ chất lượng
      • Mã não
        • Được xác định trước (ở dưới cùng), nhấp vào Đặt

Ví dụ console:false, bạn có thể nhập bất cứ thứ gì và nó sẽ thêm nó vào danh sách (.jshintrc) - dưới dạng toàn cục.

Để khắc phục lỗi này khi sử dụng triển khai JSHint trực tuyến :

• Nhấp vào "CẤU HÌNH" (trên cùng của cột giữa trên trang)
• Bật "jQuery" (trong phần "ASSUME" ở dưới cùng)

Bạn có thể muốn làm như sau,

const $ = window.$

để tránh nó ném lỗi linting.