Jshint and jQuery: '$' is not defined

Decoding the issue of undefined jQuery '$'

JSHint doesn’t know $ represents jQuery in JavaScript. Let's discuss how we can break this knot.

Managing '$' in individual files versus .jshintrc

Instead of editing the .jshintrc file, place the following at the top of each JavaScript file:

/*globals $:false */


This approach works best for small projects and avoids overriding $. For larger projects, configuring JSHint via a .jshintrc file keeps your code maintainable:

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

This code prevents "undefined" warnings and marks $ and jQuery as read-only, thus preventing accidental overwrites.

Applying advanced JSHint options

With a .jshintrc file, you can set strict mode for safe coding and help JSHint recognize jQuery:

{
  "strict": "implied",
  "jquery": true
}


Building effective configurations

In-code declarations to suppress warnings

/* global $:false */

Using this in scripts, we tell JSHint "Hey, $ is a well-known jQuery guy!"

Employing inbuilt JSHint jQuery support

JSHint already recognizes "jquery": true in the .jshintrc file. Add it like a boss!

{
  "jquery": true
}


JSHint now knows you're dealing with jQuery and opts to relax a bit.

Leading with a best practice: Strict mode

Believe me, a strict boss enforces discipline. So, in the .jshintrc file, set strict to implied for cleaner, safer code.

{
  "strict": "implied"
}


We’ve just hired a supervisor for our code!

Giving your IDE some insight

Enabling jQuery on your IDE's JSHint settings helps un-stitch the '$' kerfuffle. Find it usually in the environments settings of your IDE.

Regular updates keep your code fresh

Updating your .jshintrc with the current JSHint standards is important. It's like cleaning your room once in a while to avoid a mess! Visit the official JSHint documentation for any updates.

Additional bits of wisdom

Encapsulating with an IIFE

Employ an Immediately Invoked Function Expression (IIFE) to protect your code:

(function($) {
  // Your jQuery code here, shielded behind the IIFE shield!
})(jQuery);


This guards against $ conflicts, especially when other libraries rivalry for that $.

Handling conflicts

jQuery.noConflict() is a peaceful solution when libraries fight over $:

jQuery.noConflict();
(function($) {
  // jQuery and other libraries living in harmony
})(jQuery);


Including other frameworks

If you're using Angular or any other JavaScript frameworks, include them in your globals in .jshintrc:

{
  "globals": {
    "angular": false  // Angular just moved in!
    // Other globals 
  }
}


Excluding conflicting global names

You can exclude certain global names in the "globals" inside .jshintrc:

{
  "globals": {
    "unwantedGlobal": false  // unwantedGlobal: "Not in my house!"
    // Other globals 
  }
}
