JAVA SCRIPT - Cleaning Up Your Code with JSHint

Cleaning Up Your Code with JSHint

Problem

You want to check your code for any gotchas that may not trigger a failure, but also aren’t the best coding practices.

Solution

Use a lint tool such as JSHint to highlight potential problems or less than optimal code.

EXPLAIN

The simplest approach to ensuring your code meets a minimum standard of acceptable coding standards is to use the strict setting at the beginning of your code or function:

This setting ensures certain programming standards are met, such as always defining variables, and never using eval(). And of course, the most reliable way of ensuring your code meets standards is whatever error mechanism is built into the tools you’re using to run the code, typically explored in depth using your favorite debugging tool. 

There are a set of coding practices, though, that don’t typically trigger an error or warn‐ ing, but should be avoided because they may introduce unwanted application behaviors or results that are hard to discover. That’s where a linting tool comes in. And the most popular of the JavaScript lint tools is JSHint. JSHint is a fork of a previously popular lint tool named JSLint. JSHint is now more popular because it is more configurable and less rigid—as well as being actively maintained. 

JSHint can be installed using npm, part of the world of Node.js that is covered in

npm install jshint -g

When JSHint is installed using npm, you can run it against any JavaScript using command-line syntax such as the following:

jshint scriptfile.js

Though workable, running JSHint at the command line is a bit tedious. A preferred option is to use a plug-in or browser tool. Both of the JavaScript online playgrounds— JS Bin and jsFiddle—I used to test most of the examples for this book either use JSHint by default or provide an option to run the tool. When running JSHint, you’re running with a default group of settings. Among some of the default settings are those that prevent bitwise operators from being used, requiring curly brackets ({}) for every block, and the use of strict equality (“===”).

You can see all of the options in the .jshintrc file. If you want to change a default setting, use one of four techniques:

• From the command line you can use the --config flag and specify the name of the file containing the configuration settings.

• Create a local version of the .jshintrc file.
• Add settings to your project’s package.json file
• Embed JSHint settings directly in your code. When you’re using an integrated tool that may not provide a way to add an override file for changing JSHint options, you can embed JSHint comments to change default settings directly in the JavaScript. For instance, one of my chronic code foibles is mixing quotes (single and double) in the same code. To prevent this, I can add the following to my JavaScript:

/*jshint quotmark:true */

And I’ll get a warning that I used both types of quotes in the code. If I want to use standard equality operators without warnings, I can use the following:

/*jshint quotmark:true, eqeqeq:false */
var test1 = "today";
var test2 = 'tomorrow';
if (test == tomorrow)
 console.log("nope");

Using a linting tool such as JSHint doesn’t mean you have to create perfect code based on some arbitrary standard. However, it does help ensure that when you decide to write code that bucks the standards, you do so deliberately, rather than accidentally