JSHint та jQuery: '$' не визначено

Наступні JS:

(function() {
  "use strict";

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

}());

Врожайність:

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

При підшивці за допомогою JSHint 0.5.5. Будь-які ідеї?

Якщо ви використовуєте відносно недавню версію JSHint, загальноприйнятим підходом є створення файлу .jshintrc в корені вашого проекту та введення цього конфігурації в нього:

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

Це заявляє JSHint, що $ є глобальною змінною, а помилка вказує на те, що її не слід перекривати.

Файл .jshintrc не підтримувався в дійсно старих версіях JSHint (наприклад, v0.5.5, як оригінальне запитання 2012 року). Якщо ви не можете або не хочете використовувати .jshintrc файл, ви можете додати це у верхній частині файлу сценарію:

/*globals $:false */

Існує також скорочений "jquery" варіант jshint, як показано на сторінці параметрів JSHint .

Ви також можете додати два рядки до свого .jshintrc

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

Це говорить jshint, що є дві глобальні змінні.

Все, що вам потрібно зробити, це встановити "jquery": trueу вашому .jshintrc.

За посиланням на параметри JSHint :

jquery

Цей параметр визначає глобальні точки, відкриті бібліотекою jQuery JavaScript.

Ось щасливий маленький список, який потрібно розмістити у вашому .jshintrc,
я додаду до цього списку за часом.

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

Якщо ви використовуєте редактор IntelliJ, такий як WebStorm, PyCharm, RubyMine або IntelliJ IDEA:

У розділі "Середовища" Файл / Налаштування / JavaScript / Інструменти якості коду / JSHint натисніть на прапорець jQuery.

Замість того, щоб рекомендувати звичайне "вимкніть глобальні поля JSHint", я рекомендую використовувати модульну схему, щоб вирішити цю проблему. Він зберігає ваш код "вміщеним" і збільшує ефективність роботи (базуючись на "10 речей, які я дізнався про Jquery" Пола Ірліш ).

Я схильний писати свої шаблони модулів так:

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

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

Ви можете отримати інші переваги від продуктивності (докладніше тут )

• Під час мінімізації коду також передається впорядкована передана в windowоб’єкті декларація. наприклад window.alert()стати m.alert().
• Код всередині самовиконаної анонімної функції використовує лише 1 екземпляр windowоб'єкта.
• Ви вирізаєте переслідування при виклику windowвластивості чи методу, запобігаючи дорогому проходженню ланцюга діапазону, наприклад window.alert()(швидше) порівняно alert()(повільніше).
• Локальний обсяг функцій за допомогою "простору імен" і стримування (глобальні зли). Якщо вам потрібно розбити цей код на окремі сценарії, ви можете створити підмодуль для кожного із цих сценаріїв і імпортувати їх в один основний модуль.

Якщо ви використовуєте редактор IntelliJ, під

• Налаштування / налаштування
  • Javascript
    • Інструменти якості коду
      • JSHint
        • Заздалегідь визначений (внизу), натисніть кнопку Встановити

Наприклад console:false, ви можете ввести що завгодно, і це додасть до списку (.jshintrc) також - як глобальний.

Щоб виправити цю помилку під час використання онлайн-реалізації JSHint :

• Клацніть "CONFIGURE" (верхній частині середньої колонки на сторінці)
• Увімкніть "jQuery" (у розділі "ЗАБЕЗПЕЧЕННЯ" внизу)

Ви, мабуть, хочете зробити наступне,

const $ = window.$

щоб уникнути помилки підкидання.