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.
$ npm install -g jshint
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.
$ jshint path/to/javascript
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.
$ jshint --exclude="node_modules/" path/to/javascript
When you actually run it, you will find warnings displayed to standard output, as shown below.
$ jshint --exclude="node_modules/" path/to/javascript
index.js: line 2, col 3, Comma warnings can be turned off with 'laxcomma'.
index.js: line 1, col 26, Misleading line break before ','; readers may interpret this as an expression boundary.
index.js: line 9, col 19, ['BOT_URL'] is better written in dot notation.
index.js: line 9, col 30, Missing semicolon.
4 errors
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.
$ jshint --exclude="node_modules/" --reporter=checkstyle path/to/javascript
<?xml version="1.0" encoding="utf-8"?>
<checkstyle version="4.3">
<file name="index.js">
<error line="9" column="27" severity="warning" message="Missing semicolon." source="jshint.W033" />
</file>
</checkstyle>
If you select unix, it will become easier to count the rows and words.
$ jshint --exclude="node_modules/" --reporter=unix path/to/javascript
index.js:9:27: Missing semicolon.
1 error
--extract By using this option, you will be able to check JavaScript written inside html files.
$ jshint --exclude="node_modules/*" --extract="auto" index.html
index.html: line 16, col 46, Missing semicolon.
1 error
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.
{
"undef": true,
"unused": true,
"globals": {
"MY_GLOBAL": true
}
}
You can also define these in comments in each Javascript file. Use whichever is easier.
/* jshint undef: true, unused: true */
/* globals MY_GLOBAL */
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.
