Post
Ask Question

Voice of a Developer: JavaScript JSLint v2 - Part 23

Introduction

 
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. var output = array.map(Math.sqrt);    
    3. 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 a warning, ex-
    1. let array = [2,4,16];    
    2.     
    3. var output = array.map(Math.sqrt);   
     
  • Assume=>a browser: your code is leveraging global variables accessible in browser ex- window, the document then you can click this checkbox and mention these specifically in global variables, refer snapshot below:
     
    Code
    1. function f1() {    
    2.    var array = [2,4,16];    
    3.    var output = array.map(Math.sqrt);    
    4.    window.alert(output);    
    5. }   
     
     

Function report

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

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 the name of variables. The risk is it will create global undefined variables. As an 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: Another advantage of JSLint is that it can read JSON also.
 

Command-line support

 
As developers, we love command prompt. The good news is JSLint is available as a node module and we will learn how to lint our JS files locally.
 
Assumption: I believe you have NodeJS installed, if not please refer to my article number 6 of this series. We will first install the jslintJSLint npm package in the existing NodeJS repository.
 
Steps
  • Open GIT bash and goto NodeJS repository.
     
  • Run below command to install jslint.
     
    npm install jslint -g
     
     
  • Run jslint from the 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. function f1() {    
    3.    var x ={a:1, b:2};    
    4.    alert(x);    
    5. }   
     
    Above Warnings we have seen at web applications are now appearing on the command line. The benefit of the 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 the 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.


Similar Articles