JSHint and jQuery: '$' is not defined

Question

The following 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?

Answer 1

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:

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

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

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:

/*globals $:false */

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

Answer 2

You can also add two lines to your .jshintrc

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

This tells jshint that there are two global variables.

Answer 3

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

Per the JSHint options reference:

jquery

This option defines globals exposed by the jQuery JavaScript library.

Answer 4

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

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

Answer 5

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

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

Answer 6

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

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 window object 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 window object.
• You cut to the chase when calling in a window property 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.

Answer 7

If you're using an IntelliJ editor, under

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

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

Answer 8

To fix this error when using the online JSHint implementation:

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

Answer 9

You probably want to do the following,

const $ = window.$

to avoid it throwing linting error.