Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn
Profile photo of joseruiz
Jose Ruiz
PHP Backend Developer and other stuff in Portal team

JSHint is an open source tool used in software development to analyze JavaScript code and verify that it complies with certain coding rules you established. This powerful tool helps detect errors and issues in your code, plus it forces your team to keep certain coding conventions and style guides resulting in code that is reliable and easier to read.

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

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

Now that JSHint is installed, let’s perform some tests to analyze a file with JavaScript code from the command line using the jshint command.

Below is a file named demo1.json:

demo1source

We can execute the following command to analyze the code:
jshint demo1.js

JSHint tells us that we have an error in line 8 of the file demo1.js, due to a missing semicolon.

demo1result

If we insert the missed semicolon and run the command again, we no longer see errors in the output.

Configuring JSHint

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 --config flag:
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.

jshintconfig

A fourth option is to provide the configuration using special configuration comments inside the files.

jshintcommentconfig

You can review the different configuration options to control the behavior of JSHint at http://jshint.com/docs/options/.

A Little Example

Next, let’s see the operation of the options specified in the config.json configuration file mentioned above. Let’s suppose we have the following JavaScript file, it’s just a little piece of code with only academic objectives.

demo2source

If we execute the jshint command demo2.js --config config.json, we are going to get the following result:

demo2result

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:

demo2sourcefix

Now, let’s add the devel option set to true in the config.json file so JSHint can recognize the “confirm” and “console” globals.

jshintconfigfix

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:

Let Us Hear from You!

If you have any comments or questions, we would love to hear from you @Webclipse on twitter or via the Webclipse forum. Happy coding!

If you’re not already subscribing to our blogs, why not do it today?

 

Related Posts

Equifax Data Breach Advisory Many of you may have heard of the Equifax data breach, possibly affecting millions of consumers. Information accessed by hackers during the incident included Social Security numbers, personal details, driver’s license numbers, and even credit card numbers.Equifax has confirmed that the breach was made possible by a vulnerability in the Apache Strut...
With Genuitec, updates are free! Did you know that you already have access to the latest Genuitec products, as a licensed user? This includes brand new releases - there's no need to buy a new version when it is released.Perhaps you have gone all the way and purchased MyEclipse, our Java IDE that includes the best tools for dynamic frontend and powerful backend development, and are...
Live Preview for a Java EE project in MyEclipse Change, deploy, wait… don’t like it… start over!! This doesn’t have to be your developer’s life. With Live Preview of CodeLive you can know what’s going on immediately, as you code. It allows you to jump to source code from the browser, inspect it, instantly view changes and receive a preview on multiple browsers and gadgets. So there you are,...
Angular IDE vs WebStorm for Angular Coding. As we know, our favorite IDE can become an unparalleled ally when it comes to undertaking an agile workflow entailing TypeScript compilation at runtime, static type checking and introspection, and code completion and visual assistance for debugging and building our app. In this article, we will compare WebStorm vs Angular IDE for Angular coding. So...

Posted on Jul 27th 2016