In this post I will show you how to install, configure and use JSHint. I have also included an example and a list of some of my favorite editors that allow you to use JSHint.
Installing JSHint is pretty easy and you can do it using the Node Package Manager (npm). If you don’t have it installed, you can download the latest version from the nodeJS website, which installs Node.js and npm.
Once npm is installed, you can install JSHint from the shell with the following command:
npm install jshint -g
The -g flag tells npm that we want to install the package globally in our system, this way we can access the command from any directory.
Checking Code From CLI
Below is a file named demo1.json:
We can execute the following command to analyze the code:
JSHint tells us that we have an error in line 8 of the file demo1.js, due to a missing semicolon.
If we insert the missed semicolon and run the command again, we no longer see errors in the output.
JSHint includes a default configuration to analyze our code, but it was designed to assign settings in a flexible way according to needs. There are four ways to provide JSHint with the configuration to process our files.
One option is to specify the configuration file using the
jshint demo1.js --config config.json
Another option is to put the configuration in a file named .jshintrc, so JSHint will search for the file in the same folder as the file being analyzed, if none is found it will continue to look one level higher in the directory structure following the path to the root file system, this allows different configuration files for each project.
A third option is to place the configuration in your package.json file under the jshintConfig property.
For any of these three methods, the configuration is specified in JSON format and each parameter tells JSHint which options turn on or off. For example, in the next configuration file “unused” and “undef” activate alerts for variables unused and undefined. “curly” requires you to always put curly braces around blocks in loops and conditionals. “eqeqeq” prohibits the use of == and != in favor of === and !==. “globals” can be used to specify a white list of global variables that are not formally defined in the source code.
A fourth option is to provide the configuration using special configuration comments inside the files.
You can review the different configuration options to control the behavior of JSHint at http://jshint.com/docs/options/.
A Little Example
If we execute the jshint command
demo2.js --config config.json, we are going to get the following result:
We have 4 errors in our code. In line 9 JSHint is telling us that we must surround the “if” block with curly braces. The subscription_id variable was defined but was never used in our code. We also see that in lines 9 and 11 “confirm” and “console” are not defined.
Now we must modify a little bit of our code to avoid these first two errors:
Now, let’s add the devel option set to true in the config.json file so JSHint can recognize the “confirm” and “console” globals.
If we run the
jshint command again, we shouldn’t get any error from JSHint.
Text Editors with JSHint Support
As you can see, JSHint is a great way to reduce errors in your code. A number of editors have included or support JSHint. Here is a list of some of my favorites: