Automatically check JavaScript code using JSHint

Image for post

In JavaScript, there can be many possible implementations for solving the same problem. There are also many ways for source code to become hard to understand, like the accumulation of unsynchronized processes, so-called “callback hell”. Writing a small script by yourself might not be a problem, but when working on a large web app with multiple developers, the programming language is such that it is easy for problems to arise.

So, let’s automatically check our code and correct the parts that need fixing. That’s where JSHint comes in handy.

JSHint Installation

JSHint can be installed with npm command.

The jshint command can now be used.

You can also install it by including it in the project’s package.json and installing it to the relevant project or directory.

How to use JSHint

JSHint is most commonly used by directly passing the Javascript/Node.js project you want to analyze to the jshint command. You can pass both files and directories.

In Node.js projects, packages that were installed via npm are located in the node_modules directory. Since this directory contains code that we didn’t write ourselves, it would be better if we exclude it from our check. In such a case, we use the --exclude option.

When you actually run it, you will find warnings displayed to standard output, as shown below.

Once you’ve read the warnings and made corrections accordingly, if no output is given, then the check is complete.

About options

--reporter By using this option, you can change the output format. If you select checkstyle, the output will be in an xml format which is compatible with CheckStyle.

If you select unix, it will become easier to count the rows and words.

--extract By using this option, you will be able to check JavaScript written inside html files.

Settings

Settings can be specified with a file named .jshintrc. The contents are a JSON file, as shown below. The following returns an error if undefined variables are used; it also returns an error if variables are unused. It also designates MY_GLOBAL as a global variable, to prevent it giving errors for being undefined.

You can also define these in comments in each Javascript file. Use whichever is easier.

To check files written in ES6, specify /*jshint esversion: 6 */. Of course you can apply this to everything by using .jshintrc.

Also, lines which you want excluded from the check should have // jshint ignore:line appended. For other options, refer to JSHint Options Reference.

JSHint has been maintained for a long time. It is packed full of all sorts of knowhow. It may have fewer functions than other analyzers, but all the ones that you will need.

The SideCI automatic code review tool is compatible with JSHint. Individual users can install JSHint locally. Development teams are invited to try SideCI, which can apply automatic code review to individual Pull Requests on GitHub.

SideCI can be trialed for free. Do consider using it with your Rails project.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.