Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn
Vasanthi Sathyanarayanan
Senior Software Developer at Genuitec

What is a Linter?

Linters are Code Quality Inspectors, which work by basically parsing your code. They check JavaScript code for common mistakes and discrepancies without running the application.You can plug linters into your code editor or copy and paste your code into any standard online linting tool. Linting your code is a great thing to do, no matter what language you code with. This article is about JavaScript linters, but you can even lint HTML, CSS and JSON.

Benefits of Using a Linter

  1. Instant notification of mistakes without running the application
  2. Save time
  3. Safer code
  4. Stay focused on the hard part of coding
  5. Better coding flow
  6. Obvious highlighting in code
  7. Standard coding style across teams

Available JavaScript Linters

  • JSHint—A flexible linter and the most commonly used.
  • JSCS—Ships with 90 validation rules, including presets from popular style guides.
  • ESLint—Create your own linting rules and rules are completely pluggable.
  • JSLint—One of the first linters for JavaScript.
  • Closure Linter—Checks based on guidelines in the Google JavaScript Style Guide.

Using a JavaScript Linter in Your IDE

If you are using Webclipse or MyEclipse as your Javascript development tool, then enabling a Linting module is easy, just select the appropriate Linting module when setting up your JavaScript modules. By default, ESLint, JSCS, JSHint and Lint are supported.

Don’t already have it?  Grab Webclipse with JSjet for free — Download  

Enabling ESLint

If you don’t use either Webclipse or MyEclipse, take a look at this article for for ESLint or this one for JSHint.

Let’s walk through actual usage of a couple of linters, EsLint and JSHint.

ESLint—Examples and Configuration

On enabling ESLint, JavaScript files are validated for errors with default eslint.json settings. Here are some examples of ESLint errors and their fixes.


Configuring ESLint

You can customize the ESLint rules by specifying a custom eslint.json file:


Eslint.json File Snippet



Now lets see a few examples of modifying the json file:

  1. Modifying the rule to get rid of unused variable errors:
    Default value:  [2, {“vars”: “all”, “args”: “after-used”}]
    Modified value:   0

  2. Modifying the rule to enforce consistent spacing before and after commas.
    Default value:  0
    Modified value:   1

ESLint Quickfix

There are certain rules that can also be solved with a quick-fix option, like the one below:



For the entire set of ESLint rules, please see this link; the rules with a wrench icon next to them are those for which quick fixes are available.

JSHint—Examples and Configuration

JSHint is an open source, community-driven tool to detect errors and potential problems in JavaScript code. There is an online tool for validating instantly.

Here are some examples of JSHint validations:


Configuring JSHint

On modifying configuration values, we can get rid of warnings which can be ignored for the project.

Before modifying configuration:



After modifying configuration – to ignore semicolon missing:




Choose a linter that suits your needs – there are several factors that could influence your decision. How strict it is by default, what types of issues is it sensitive to, how flexible and configurable it is, whether it is actively maintained, and, perhaps most importantly, how easy it is to use with your existing development tools.

No matter which linter you choose, especially in language like JavaScript, the difference between using a linter or not, is significant. A linter will help you catch errors that would only occur at runtime, but without you having to run and test your application. In several cases, it will catch errors that would only occur in rare circumstances, for specific types of input, and these would typically be hard to reproduce live.

With the tooling integration that exists today, there really is no excuse for a responsible JavaScript developer to not be using one – in the long run, the time saved and quality gained is invaluable.

Want to stay up to date on our latest posts?  

Reference Links

Related Posts

CodeMix – Better with You! Thanks to detailed feedback from our awesome users, our team has been hard at work adding stability, reliability and performance fixes, and enhancements, to CodeMix. Read on for the deets on what’s new in CodeMix over the last month.Editing & ValidationWhen editing TypeScript files, error markers were sometimes not cleared when the error was fi...
A Day with Dani: Eclipse Plugin for Awesome Worksp... DevStyle Rescued My Workspace!As a new developer working in Eclipse, nothing was worse than doing a project and looking at an outdated, plain workspace. It was boring, and took away from the excitement and learning these projects had to offer. This was an IDE I would be using almost every day, so when I learned about the DevStyle plugin for Eclipse...
Equifax Data Breach Advisory Many of you may have heard of the Equifax data breach, possibly affecting millions of consumers. Information accessed by hackers during the incident included Social Security numbers, personal details, driver’s license numbers, and even credit card numbers.Equifax has confirmed that the breach was made possible by a vulnerability in the Apache Strut...
Realtime Server Monitoring App with Angular 4 , No... This article will show you how to build a very simple monitor that allows you to observe some OS parameters, such as free memory available. We will be using Node.js, Angular 4, and Chart.js - and all you need is Angular IDE.We will be creating two applications; the first is a Node application that will monitor the OS parameters and send them via we...

Posted on May 23rd 2016