【问题标题】:JSHint and jQuery: '$' is not definedJSHint 和 jQuery:'$' 未定义
【发布时间】:2012-02-09 18:51:49
【问题描述】:

以下JS:

(function() {
  "use strict";

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

}());

产量:

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

当使用 JSHint 0.5.5 进行 linted 时。有什么想法吗?

【问题讨论】:

  • 您是否已将jquery.js 添加到您的页面?
  • 好吧,如果你只提供它自己的代码,$ 未定义的。
  • 我在角度上有这个问题。只需将 $ 更改为 angular.element 和 jshint no warn

标签: javascript jquery lint jshint


【解决方案1】:

您可能想要执行以下操作,

const $ = window.$

避免它抛出 linting 错误。

【讨论】:

    【解决方案2】:

    如果您使用的是相对较新的 JSHint 版本,通常首选的方法是在项目的根目录中创建一个 .jshintrc 文件,并将此配置放入其中:

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

    这向 JSHint 声明 $ 是一个全局变量,false 表示它不应该被覆盖。

    真正旧版本的 JSHint 不支持 .jshintrc 文件(例如 v0.5.5,就像 2012 年的原始问题一样)。如果您不能或不想使用 .jshintrc 文件,可以在脚本文件的顶部添加:

    /*globals $:false */
    

    还有一个速记“jquery” jshint 选项,如在 JSHint options page.. 上看到的那样。

    【讨论】:

    • 这个选项jquery简单地定义了两个只读全局变量:$和jQuery。它是/*global $:false, jQuery:false */ 的较短版本。
    • 使用我的 JSHint for Visual Studio,该选项称为“假设 jQuery”
    • 选项标志是要走的路。对于初学者:在 .jshintrc 文件中添加行 'jquery: true'。
    • ":false" 的原因是什么?,我发现 /*global $ */ 工作得很好。 (在我的例子中是 /*global jQuery */)
    • 有没有办法为脚本中的所有函数通用地设置它,而不是在/* global ... */ 中逐个键入?我通常将一个包含我所有功能的脚本导入我的main,因此一个一个定义很麻烦......
    【解决方案3】:

    在使用the online JSHint implementation时修复此错误:

    • 点击“CONFIGURE”(页面中间一栏顶部)
    • 启用“jQuery”(在底部的“ASSUME”部分下)

    【讨论】:

      【解决方案4】:

      您只需在您的.jshintrc 中设置"jquery": true

      根据JSHint options reference

      jquery

      此选项定义由 jQuery JavaScript 库公开的全局变量。

      【讨论】:

      • 这应该是最好的答案了……可惜它被埋在这里了
      • 在 Sublime text 3 中哪里可以找到 .jshintrc 文件?根据jshint.com/docs。这些都没有帮助我。
      • @Milos 在 sublimetext 中安装 JSHint Gutter 3. 转到 Tools > JSHint > Set Linting Preferences,它将打开 .jshintrc。
      • 什么都没有,它仍然无法识别“$”符号。当我打开 .jshintrc 时,它位于路径:\AppData\Roaming\Sublime Text 3\Packages\JSHint Gutter 上,我输入了 "jquery": true 并且没有任何反应。
      • 比向全局部分添加变量要好得多!用这种方法解决!
      【解决方案5】:

      这是一个快乐的小清单,可以放入您的 .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
        },
      }
      

      【讨论】:

      • 如果您将“browser”和“node”选项设置为“true”,则此列表中唯一需要的剩余项目是 $、jquery 和 angular。有关详细信息,请参阅文档的环境部分:jshint.com/docs/options/#environments
      • 我已经编辑了答案以包含您的更新谢谢@user456584
      【解决方案6】:

      我不推荐通常的“关闭 JSHint 全局变量”,而是建议使用 module pattern 来解决这个问题。它使您的代码保持“包含”并提高性能(基于 Paul Irish 的 "10 things I learned about Jquery")。

      我倾向于这样编写我的模块模式:

      (function (window) {
          // Handle dependencies
          var angular = window.angular,
              $ = window.$,
              document = window.document;
      
          // Your application's code
      }(window))
      

      您可以获得这些其他性能优势(解释更多 here):

      • 在缩小代码时,传入的window 对象声明也会被缩小。例如window.alert() 变为 m.alert()
      • 自执行匿名函数内的代码仅使用 window 对象的 1 个实例。
      • 您在调用window 属性或方法时切入正题,从而防止昂贵的作用域链遍历,例如window.alert()(更快)与alert()(更慢)的性能。
      • 通过“命名空间”和包含(全局变量是邪恶的)实现的局部函数范围。如果您需要将此代码分解为单独的脚本,您可以为每个脚本创建一个子模块,并将它们导入到一个主模块中。

      【讨论】:

      • 这也是我使用的模式,但它并没有解决我原来的问题。 JSHint 仍然抱怨未在最后一行定义变量(在您的示例中为"}(window))" - 我也遇到了 jQuery 和 Highcharts 的问题)。除了为该文件,然后破坏了目的。
      • @myrosia browser: true 告诉 JSHint 你期望一个浏览器环境(window 已经定义)。
      • 我喜欢这种方法!
      【解决方案7】:

      您还可以在 .jshintrc 中添加两行

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

      这告诉 jshint 有两个全局变量。

      【讨论】:

      • 这应该是公认的答案。用各种代码行污染项目中的每个 javascript 文件以使语法检查器满意不是一种选择。谢谢 wmil
      【解决方案8】:

      如果您使用的是 IntelliJ 编辑器,请在

      • 首选项/设置
        • Javascript
          • 代码质量工具
            • JSHint
              • 预定义(在底部),单击设置

      您可以输入任何内容,例如 console:false,它会将其添加到列表 (.jshintrc) 以及 - 作为一个全局变量。

      【讨论】:

        【解决方案9】:

        如果您使用的是 IntelliJ 编辑器,例如 WebStorm、PyCharm、RubyMine 或 IntelliJ IDEA:

        在文件/设置/JavaScript/代码质量工具/JSHint的环境部分,点击jQuery复选框。

        【讨论】:

        • 请注意,您可以通过选中“使用配置文件”来覆盖所有内部配置。这将使 WS 看到配置文件的修改。没有它,他只是忽略它。
        猜你喜欢
        • 2015-07-10
        • 1970-01-01
        • 1970-01-01
        • 2013-09-07
        • 2014-01-17
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2012-07-29
        相关资源
        最近更新 更多