Voice of a Developer: JavaScript JSLint v2 - Part 23

JavaScript is a language of Web. This series of articles will talk about my observations learned  during my decade of software development experience with JavaScript. I hope this series on JavaScript is giving you a good understanding and you are enjoying most parts of it.

Before moving further let us look at the previous articles of the series:

This is a continuation of the last article on JSLint, we will start with Options and command line utility of JSLint. Connect the dots where we left now, but read the  last article (link) before reading this one otherwise you will feel nausea, drowsiness and feel unhappy.

Go to URL: http://www.jslint.com/

You can fiddle with JSLint and customize your warnings via Options below:



I am going to show commonly used options here:

  • Assume => in development: select this when you are using debugging code, troubleshooting and code includes statements like console, alert etc.

    1. var array = [2,4,16];  
    2.   
    3. var output = array.map(Math.sqrt);  
    4.   
    5. alert(output);  

    If ‘in development’ is unchecked, you will get below warning:



  • Assume => ES6 checkbox: if you’re using ES6 features in your code and you try it without selecting this checkbox it’ll give you warning, ex-

    1. let array = [2,4,16];  
    2.   
    3. var output = array.map(Math.sqrt);  



  • Assume =>a browser: your code is leveraging global variablesaccessible in browser ex- window, document then you can click this checkbox and mention these specifically in global variables, refer snapshot below:

    Code:

    1. function f1() {  
    2.   
    3.    var array = [2,4,16];  
    4.   
    5.    var output = array.map(Math.sqrt);  
    6.   
    7.    window.alert(output);  
    8.   
    9. }  


Function report

It display an output showing about global objects and objects leveraged inside our function.

Question: What is the biggest problem in JavaScript?

Answer: I am going to share my opinion that it is not possible to determine at compile time if you misspell name of variables. The risk is it will create global undefined variables. As outcome, developers will spend a lot of time troubleshooting and debugging code. If front-end code grows exponentially then code smells in absence of right design and best practices.

FYI: Other advantage of JSLint is that it can read JSON also.

Command line support

As developers we love command prompt. Good news is JSLint is available as node module and we will learn how to lint our JS files locally.

Assumption: I believe you have NodeJS installed, if not please refer my article number 6 of this series. We will first install jslintJSLint npm package in existing NodeJS repository.

Steps:

  • Open GIT bash and goto NodeJS repository.

  • Run below command to install jslint.

    npm install jslint -g



  • Run jslint from command line to lint your code.

    Example lets revistrevisit our script we wrote on JSlint.com and save as ‘script.js’
    1. 'use strict';  
    2.   
    3. function f1() {  
    4.   
    5.    var x ={a:1, b:2};  
    6.   
    7.    alert(x);  
    8.   
    9. }  


     Above Warnings we have seen at web application are now appearing on command line. The benefit of command line is integration with your code and during continuous integration & deployment.

  • We could pass Options in command line utility as well, but before that check syntax:



  • In order to remove above Warnings we could pass on Options as following:

Summary

I believe now you have a good understanding of linting &JSlintJSLint tool. There are many other tools available in JavaScript like JShintJoshing, ESlintSlant. Some of these were forked from JSlintJSLintgithubGitHub repository and based on JSlintJSLint fundamentals but differ in some contexts.