DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
  1. DZone
  2. Coding
  3. JavaScript
  4. Reduce JavaScript Errors with JSHint

Reduce JavaScript Errors with JSHint

How to use the open source JSHint tool to analyze and verify that JavaScript code complies with your rules.

Silvia Rojas user avatar by
Silvia Rojas
·
Oct. 25, 16 · Tutorial
Like (15)
Save
Tweet
Share
11.56K Views

Join the DZone community and get the full member experience.

Join For Free

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:

Image title

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.

Image title

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.

Image title

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

Image title

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.

Image title

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

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:

Image title

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

Image titleIf 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:

  • Eclipse with webclipse plugin
  • Brackets with brackets-jshint
  • SublimeText: with SublimeLinter
  • Webstorm included in Code Quality Tools
  • gedit with gedit-jshint
JSHint JavaScript code style Command (computing)

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • Apache Kafka vs. Memphis.dev
  • How To Validate Three Common Document Types in Python
  • Handling Automatic ID Generation in PostgreSQL With Node.js and Sequelize
  • How to Cut the Release Inspection Time From 4 Days to 4 Hours

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends: