{"id":26372,"date":"2019-04-29T23:47:42","date_gmt":"2019-04-29T15:47:42","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=26372"},"modified":"2019-04-24T20:51:17","modified_gmt":"2019-04-24T12:51:17","slug":"code-optimisation-linting-jshint","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/code-optimisation-linting-jshint\/","title":{"rendered":"Guide to Linting JavaScript with JSHint"},"content":{"rendered":"

Editor\u2019s note: <\/strong>This article is part of our Code Optimization series<\/a>, where we take a look at how to optimize coding for better efficiency in a bid to be better coders.<\/p>\n

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

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

According to its website, the two most common ways the JSHint tool is used are as the command line tool <\/strong>and the API<\/strong>. Let\u2019s take a look at how you can download use both, along with other linting optiosn the tools provide.<\/p>\n

Via Command Line Tool<\/h2>\n

Step 1<\/h3>\n

If you haven\u2019t have Node.js installed in your computer, then you\u2019ll have to go its website<\/a> and download and install it first. To check if Node.js has been successfully installed you can run the command npm -version<\/code> in the command-line interface<\/a> (CLI) and it\u2019ll show you the version of the Node.js in your computer (or you can just run the command npm<\/code> and see what happens).<\/p>\n

Read more: <\/strong>Beginner\u2019s Guide to Node.js<\/a><\/p>\n

Step 2<\/h3>\n

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

Step 3<\/h3>\n

To run the tool, go to the directory in the CLI where your JavaScript file (say test.js<\/em>) is and run the command jshint test.js<\/code>. The result of the tool\u2019s analysis on your JavaScript code will appear (something like this):<\/p>\n

\"jshint<\/figure>\n

Via The JavaScript API<\/h2>\n

Step 1<\/h3>\n

Download the compressed file from this GitHub link<\/a>, and unzip it. In the dist<\/em> folder you\u2019ll find the jshint<\/em> JS file (the API library).<\/p>\n

Step 2<\/h3>\n

To use the API, add the jshint<\/em> 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<\/code>. Below is a sample HTML code where JSHint\u2019s JavaScript API is used to analyse the JavaScript code present in the source<\/code> array and display the analysis results on the page.<\/p>\n

\r\n<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <title>Document<\/title>\r\n<\/head>\r\n<body>\r\n<script src=\"jshint.js\"> <\/script>\r\n<script>  \/* Array containing the JavaScript code to be analysed *\/\r\n    var source = [\r\n      'var obj = {}',\r\n      'foo();'\r\n    ];\r\n    \/* Linting options (optional) *\/\r\n    var options = {\r\n      undef: true,\r\n      unused: true\r\n    };\r\n    \/* API is invoked *\/\r\n    JSHINT(source);\r\n    \/* The tool's analysis output is written on the page after the JSON object -> String conversion *\/\r\n    document.write(JSON.stringify(JSHINT.data())); <\/script>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Step 3<\/h3>\n
We passed the source<\/code> array containing the JavaScript source code to be analysed and options<\/code> object containing linting options (we\u2019ll go into options<\/em> shortly) as parameters to the JSHINT<\/code> function. The analysis result (a JSON object) is fetched from JSHINT<\/code>\u2018s function property called data<\/code>.<\/p>\n
Step 4<\/h3>\n
JSON.stringify<\/code> is used for  display-only here, to display the result returned from the data<\/code> function in string format on the page. The beautified<\/em> JSON string looks like this. The highlighted parts are the errors found by JSHint worded in simple sentences.<\/p>\n
\"\"<\/figure>\n
Linting Options<\/h2>\n
Linting options let us configure the linting process. We can specify which type of errors or wanring need to be linted and which don\u2019t. In the previous example two linting options were used namely undef<\/code> and unused<\/code>.<\/p>\n
undef<\/code> option flags undeclared variables, and unused<\/code> 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<\/a>, if you want to search an option, there\u2019s a search bar provided at the top right corner.<\/p>\n
If you\u2019re using the CLI tool via Node.js, you can write the linting options inside a package.json<\/code> file under the property jshintConfig<\/code> in the same directory. You can also add the options as directives in the JavaScript code.<\/p>\n
\r\n\/\/ -- test.js --\r\n\/* jshint undef: true, unused: true  *\/\r\nfoo();\r\na = 7;<\/pre>\n
\"\"<\/figure>\n
There are more ways to configure linting options in your project based on the tool you\u2019re using. Check out the different ways for configuration<\/em> here<\/a>.<\/p>","protected":false},"excerpt":{"rendered":"
Editor\u2019s 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…<\/p>\n","protected":false},"author":145,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392],"tags":[4117,511],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\nGuide to Linting JavaScript with JSHint - Hongkiat<\/title>\n<meta name=\"description\" content=\"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\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/code-optimisation-linting-jshint\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Guide to Linting JavaScript with JSHint\" \/>\n<meta property=\"og:description\" content=\"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\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/code-optimisation-linting-jshint\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2019-04-29T15:47:42+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/code-optimisation-linting-jshint\/cli-output.JPG\" \/>\n<meta name=\"author\" content=\"Preethi Ranjit\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Preethi Ranjit\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/code-optimisation-linting-jshint\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/code-optimisation-linting-jshint\\\/\"},\"author\":{\"name\":\"Preethi Ranjit\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e981676afae36d1ff5feb75094950ab3\"},\"headline\":\"Guide to Linting JavaScript with JSHint\",\"datePublished\":\"2019-04-29T15:47:42+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/code-optimisation-linting-jshint\\\/\"},\"wordCount\":675,\"commentCount\":5,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/code-optimisation-linting-jshint\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/code-optimisation-linting-jshint\\\/cli-output.JPG\",\"keywords\":[\"Javascripts\",\"Web Developers\"],\"articleSection\":[\"Coding\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/code-optimisation-linting-jshint\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/code-optimisation-linting-jshint\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/code-optimisation-linting-jshint\\\/\",\"name\":\"Guide to Linting JavaScript with JSHint - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/code-optimisation-linting-jshint\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/code-optimisation-linting-jshint\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/code-optimisation-linting-jshint\\\/cli-output.JPG\",\"datePublished\":\"2019-04-29T15:47:42+00:00\",\"description\":\"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\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/code-optimisation-linting-jshint\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/code-optimisation-linting-jshint\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/code-optimisation-linting-jshint\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/code-optimisation-linting-jshint\\\/cli-output.JPG\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/code-optimisation-linting-jshint\\\/cli-output.JPG\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/code-optimisation-linting-jshint\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Guide to Linting JavaScript with JSHint\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e981676afae36d1ff5feb75094950ab3\",\"name\":\"Preethi Ranjit\",\"description\":\"A .NET developer with a JavaScript background, Preethi is expert in front-end coding, JavaScript, HTML, and CSS.\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/preethi\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Guide to Linting JavaScript with JSHint - Hongkiat","description":"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","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/code-optimisation-linting-jshint\/","og_locale":"en_US","og_type":"article","og_title":"Guide to Linting JavaScript with JSHint","og_description":"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","og_url":"https:\/\/www.hongkiat.com\/blog\/code-optimisation-linting-jshint\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2019-04-29T15:47:42+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/code-optimisation-linting-jshint\/cli-output.JPG","type":"","width":"","height":""}],"author":"Preethi Ranjit","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Preethi Ranjit","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/code-optimisation-linting-jshint\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/code-optimisation-linting-jshint\/"},"author":{"name":"Preethi Ranjit","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e981676afae36d1ff5feb75094950ab3"},"headline":"Guide to Linting JavaScript with JSHint","datePublished":"2019-04-29T15:47:42+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/code-optimisation-linting-jshint\/"},"wordCount":675,"commentCount":5,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/code-optimisation-linting-jshint\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/code-optimisation-linting-jshint\/cli-output.JPG","keywords":["Javascripts","Web Developers"],"articleSection":["Coding"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/code-optimisation-linting-jshint\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/code-optimisation-linting-jshint\/","url":"https:\/\/www.hongkiat.com\/blog\/code-optimisation-linting-jshint\/","name":"Guide to Linting JavaScript with JSHint - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/code-optimisation-linting-jshint\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/code-optimisation-linting-jshint\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/code-optimisation-linting-jshint\/cli-output.JPG","datePublished":"2019-04-29T15:47:42+00:00","description":"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","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/code-optimisation-linting-jshint\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/code-optimisation-linting-jshint\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/code-optimisation-linting-jshint\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/code-optimisation-linting-jshint\/cli-output.JPG","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/code-optimisation-linting-jshint\/cli-output.JPG"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/code-optimisation-linting-jshint\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Guide to Linting JavaScript with JSHint"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e981676afae36d1ff5feb75094950ab3","name":"Preethi Ranjit","description":"A .NET developer with a JavaScript background, Preethi is expert in front-end coding, JavaScript, HTML, and CSS.","url":"https:\/\/www.hongkiat.com\/blog\/author\/preethi\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-6Rm","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/26372","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/145"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=26372"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/26372\/revisions"}],"predecessor-version":[{"id":47449,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/26372\/revisions\/47449"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=26372"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=26372"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=26372"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=26372"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}