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, что $ является глобальной переменной, а false указывает, что она не должна быть переопределена.

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

/*globals $:false */

Существует также сокращенная опция jshint «jquery», как показано на странице параметров 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 :

• Нажмите «КОНФИГУРАЦИЯ» (верхняя часть среднего столбца на странице)
• Включите "jQuery" (в разделе "ASSUME" внизу)

Вы, вероятно, хотите сделать следующее,

const $ = window.$

чтобы избежать этого бросая ошибку линтинга.