Guide to Linting JavaScript with JSHint

By . in Coding. Updated on .

Editor’s note: This article is part of our Code Optimization series, where we take a look at how to optimize coding for better efficiency in a bid to be better coders.

Linting in computer programming is the process of static analysing code to find issues like wrong syntax, and iffy usage of code. The tool used for linting is known as a lint or linter. One of the linters available for JavaScript today is JSHint.

JSHint is available for multiple platforms. The online web tool that most of us are familiar with is at jshint.com. There are also the command line tool via Node.js, a JavaScript API, multiple text editors, and IDE plugins for JSHint. You can see the full list of available JSHint tools for different environments in the download and install page of the JSHint website.

According to its website, the two most common ways the JSHint tool is used are as the command line tool and the API. Let’s take a look at how you can download use both, along with other linting optiosn the tools provide.

Via Command Line Tool

Step 1

If you haven’t have Node.js installed in your computer, then you’ll have to go its website and download and install it first. To check if Node.js has been successfully installed you can run the command npm -version in the command-line interface (CLI) and it’ll show you the version of the Node.js in your computer (or you can just run the command npm and see what happens).

Read more: Beginner’s Guide to Node.js

Step 2

To install the JSHint tool, run the command npm install jshint in CLI. If you want to check if JSHint has been successfully installed, run the command jshint -version to see its version. Once this step is over, installation is complete.

Step 3

To run the tool, go to the directory in the CLI where your JavaScript file (say test.js) is and run the command jshint test.js. The result of the tool’s analysis on your JavaScript code will appear (something like this):

jshint cli output

Via The JavaScript API

Step 1

Download the compressed file from this GitHub link, and unzip it. In the dist folder you’ll find the jshint JS file (the API library).

Step 2

To use the API, add the jshint JS file to your project and link it to your page. The API can be accessed in the JavaScript code using the function/object called JSHINT. Below is a sample HTML code where JSHint’s JavaScript API is used to analyse the JavaScript code present in the source array and display the analysis results on the page.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<script src="jshint.js"> </script>
<script>  /* Array containing the JavaScript code to be analysed */
    var source = [
      'var obj = {}',
      'foo();'
    ];
    /* Linting options (optional) */
    var options = {
      undef: true,
      unused: true
    };
    /* API is invoked */
    JSHINT(source);
    /* The tool's analysis output is written on the page after the JSON object -> String conversion */
    document.write(JSON.stringify(JSHINT.data())); </script>
</body>
</html>
Step 3

We passed the source array containing the JavaScript source code to be analysed and options object containing linting options (we’ll go into options shortly) as parameters to the JSHINT function. The analysis result (a JSON object) is fetched from JSHINT‘s function property called data.

Step 4

JSON.stringify is used for display-only here, to display the result returned from the data function in string format on the page. The beautified JSON string looks like this. The highlighted parts are the errors found by JSHint worded in simple sentences.

Linting Options

Linting options let us configure the linting process. We can specify which type of errors or wanring need to be linted and which don’t. In the previous example two linting options were used namely undef and unused.

undef option flags undeclared variables, and unused will flag variables that were declared but never used. Like these there are many more options that you can see a list of in this page, if you want to search an option, there’s a search bar provided at the top right corner.

If you’re using the CLI tool via Node.js, you can write the linting options inside a package.json file under the property jshintConfig in the same directory. You can also add the options as directives in the JavaScript code.

// -- test.js --
/* jshint undef: true, unused: true  */
foo();
a = 7;

There are more ways to configure linting options in your project based on the tool you’re using. Check out the different ways for configuration here.

WebsiteFacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail