Javascript JSHint 和 jQuery：'$' 未定义

JSHint and jQuery: '$' is not defined

提问by Allyl Isocyanate

The following JS:

以下JS：

(function() {
  "use strict";

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

}());

Yields:

产量：

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

When linted using JSHint 0.5.5. Any ideas?

当使用 JSHint 0.5.5 lint 时。有任何想法吗？

回答by Stephen Booher

If you are using a relatively recent version of JSHint, the generally preferred approach is to create a .jshintrc file in the root of your project, and put this config in it:

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

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

This declares to JSHint that $ is a global variable, and the false indicates that it should not be overridden.

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

The .jshintrc file was not supported in really old versions of JSHint (such as v0.5.5 like the original question in 2012). If you cannot or do not want to use the .jshintrc file, you can add this at the top of the script file:

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

/*globals $:false */

There is also a shorthand "jquery" jshint option as seen on the JSHint options page..

还有一个简写的“jquery”jshint 选项，如 JSHint 选项页面所示。

回答by wmil

You can also add two lines to your .jshintrc

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

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

This tells jshint that there are two global variables.

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

回答by niren

All you need to do is set "jquery": truein your .jshintrc.

您需要做的就是"jquery": true在您的.jshintrc.

Per the JSHint options reference:

根据JSHint 选项参考：

jquery

This option defines globals exposed by the jQuery JavaScript library.

查询

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

回答by James Harrington

Here is a happy little list to put in your .jshintrc
I will add to this list at time passes.

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

回答by Joe Golton

If you're using an IntelliJ editor such as WebStorm, PyCharm, RubyMine, or IntelliJ IDEA:

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

In the Environments section of File/Settings/JavaScript/Code Quality Tools/JSHint, click on the jQuery checkbox.

在 File/Settings/JavaScript/Code Quality Tools/JSHint 的 Environments 部分，单击 jQuery 复选框。

回答by Alastair Paragas

Instead of recommending the usual "turn off the JSHint globals", I recommend using the module patternto fix this problem. It keeps your code "contained" and gives a performance boost (based on Paul Irish's "10 things I learned about Jquery").

与其推荐通常的“关闭 JSHint 全局变量”，我推荐使用模块模式来解决这个问题。它使您的代码保持“包含”并提高性能（基于 Paul Irish 的“我学到的关于 Jquery 的 10 件事”）。

I tend to write my module patterns like this:

我倾向于这样写我的模块模式：

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

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

You can get these other performance benefits (explained more here):

您可以获得这些其他性能优势（在此处详细解释）：

• When minifying code, the passed in windowobject declaration gets minified as well. e.g. window.alert()become m.alert().
• Code inside the self-executing anonymous function only uses 1 instance of the windowobject.
• You cut to the chase when calling in a windowproperty or method, preventing expensive traversal of the scope chain e.g. window.alert()(faster) versus alert()(slower) performance.
• Local scope of functions through "namespacing" and containment (globals are evil). If you need to break up this code into separate scripts, you can make a submodule for each of those scripts, and have them imported into one main module.

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

回答by Tony L.

To fix this error when using the online JSHint implementation:

要在使用在线 JSHint 实现时修复此错误：

• Click "CONFIGURE" (top of the middle column on the page)
• Enable "jQuery" (under the "ASSUME" section at the bottom)

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

回答by knowncitizen

If you're using an IntelliJ editor, under

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

• Preferences/Settings
  • Javascript
    • Code Quality Tools
      • JSHint
        • Predefined (at bottom), click Set

• 首选项/设置
  • Javascript
    • 代码质量工具
      • JSHint
        • 预定义（底部），点击设置

You can type in anything, for instance console:false, and it will add that to the list (.jshintrc) as well - as a global.

例如console:false，您可以输入任何内容，它会将其添加到列表 (.jshintrc) 以及全局中。

回答by nilakantha singh deo

You probably want to do the following,

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

const $ = window.$

to avoid it throwing linting error.

以避免它抛出 linting 错误。