Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn
Profile photo of vasanthis
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  

linter-image03
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.

linter-image04

Configuring ESLint

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

linter-image00

Eslint.json File Snippet

linter-image06

 

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:

linter-image02

 

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:

linter-image01

Configuring JSHint

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

Before modifying configuration:

linter-image05

 

After modifying configuration – to ignore semicolon missing:

linter-image07

 

Conclusion

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

http://jshint.com/docs/
http://eslint.org/
https://raygun.com/blog/2015/07/using-linters-for-faster-safer-coding-with-less-javascript-errors/
https://github.com/angelozerr/tern.java/wiki/Tern-Linter-ESLint

Related Posts

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...
Beware of Software Scams Even though imitation might be the best form of flattery, we are Genuitec, LLC, not Genuitec, Inc. Someone is using our name and old logo to run a number of scams, including real estate transactions and software sales, with the clear intent to hide behind Genuitec’s good name. We are, however, already taking action to demand an immediate cease and ...
Take a deep breath — Eclipse Oxygen is here! We can all breathe a little easier now that Eclipse Oxygen has arrived! And just like the last Eclipse release (remember Neon?), this is a biggie!83 projects287 committers71 million lines of code664 contributorsOur development team is ecstatic about all Oxygen has to offer. When Ignacio Moreno (our SDC Product Manager) was asked to give a favorite,...

Posted on May 23rd 2016