Vasanthi Sathyanarayanan
Senior Software Developer at Genuitec
Posted on May 23rd 2016

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