JSHint и jQuery: '$ ' не определен


Следующие JS:

(function() {
  "use strict";

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

}());

Выходы:

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

, Когда linted используя у JSHint 0.5.5. Есть идеи?

8 201

8 ответов:

Если вы используете относительно новую версию JSHint, обычно предпочтительным подходом является создание a .jshintrc файл в корне вашего проекта, и поместите в него эту конфигурацию:

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

Это объявляет JSHint, что $ является глобальной переменной, а false указывает, что ее не следует переопределять.

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

/*globals $:false */

Существует также сокращенная опция jshint "jquery", как показано на странице JSHint options..

Вы также можете добавить две строки в свой .jshintrc

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

Это говорит jshint, что есть две глобальные переменные.

Все, что вам нужно сделать, это установить "jquery": true в вашем .jshintrc.

По ссылке JSHint options:

Jquery

Этот параметр определяет глобалы, предоставляемые библиотекой JavaScript jQuery.

Вот счастливый маленький список, чтобы положить в свой .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:

В разделе Environments раздела File/Settings/JavaScript/code Quality Tools/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() (медленнее) производительности.
  • локальная область функций через "пространство имен" и сдерживание (глобалы-зло). Если вам нужно разбить этот код на отдельные скрипты, вы можете создать подмодуль для каждого из этих сценариев и импортировать их в один основной модуль.

Чтобы исправить эту ошибку при использовании онлайн-реализации JSHint:

  • Нажмите кнопку "Настроить" (вверху среднего столбца на странице)
  • включить "jQuery "(в разделе "предполагать" внизу)

Если вы используете редактор IntelliJ, в разделе

  • Предпочтения / Настройки
    • Javascript
      • Инструменты Качества Кода
        • JSHint
          • предопределено (внизу), нажмите установить

Вы можете ввести что угодно, например console:false, и он добавит это в список (.jshintrc), а также-как глобальный.