Linting is statically checking the source code of a program to find code that does not adhere to a certain code style and discover problematic patters in the code. As a dynamic and loosely-typed language, JavaScript benefits greatly from a linting tool.
Below are the most popular linting tools for JavaScript, listed and briefly explained, in the order they are released.
For more information, please visit projects’ own websites.
JSLint
JSLint is a tool created by Douglas Crockford that aims to ensure high quality JavaScript code by checking the code against the rules defined by Douglas Crockford who detailed them in his book, JavaScript: The Good Parts.
Although JSLint has a few options to “tolerate certain things, it is not a configurable linting tool. The reason why is explained as follows at jslint.com:
JSLint was designed to reject code that some would consider to be perfectly fine. The reason for this is that JSLint’s purpose is to help produce programs that are free of error. That is difficult in any language and is especially hard in JavaScript. JSLint attempts to help you increase the visual distance between correct programs and incorrect programs, making the remaining errors more obvious. JSLint will give warnings about things that are not necessarily wrong in the current situation, but which have been observed to mask or obscure errors. Avoid those things when there are better options available.
It is dangerous out there. JSLint is here to help.
You can either use it online following the link above or integrate it to your development and/or deployment workflow:
Command-Line Tool: https://github.com/reid/node-jslint
Grunt Plugin: https://www.npmjs.com/package/grunt-jslint
Gulp Plugin: https://www.npmjs.com/package/gulp-jslint
The source code is also available on GitHub:
https://github.com/douglascrockford/JSLint
If you wish more control over the linting criteria, check out JSHint, which is explained right below.
JSHint
JSHint is a community-driven, flexible, open source linting tool that does not try to enforce certain coding preferences and allows developers to configure it according to their coding conventions. JSHint simply does its job by checking the code against the given style and detects errors and potential problems in the code.
You can either use it online following the link above or integrate it to your development and/or deployment workflow:
- Command-Line Tool: https://www.npmjs.com/package/jshint
- Grunt Plugin: https://www.npmjs.com/package/grunt-contrib-jshint
- Gulp Plugin: https://www.npmjs.com/package/gulp-jshint
- More Information: http://jshint.com/install/
ESLint
ESLint is the next-generation linter that is highly configurable to the point that it allows custom parsers and plugins to extend its linting process. The customizability of ESLint should not overwhelm you, you can still simply use it the way you use JSHint.
To fully grasp what ESLint is and what it isn’t, here is the philosophy behind ESLint, from its About page:
Everything is pluggable:
- Rule API is used both by bundled and custom rules
- Formatter API is used both by bundled and custom formatters
- Additional rules and formatters can be specified at runtime
- Rules and formatters don’t have to be bundled to be used
Every rule:
- Is standalone
- Can be able to be turned off or on (nothing can be deemed “too important to turn off”)
- Can be set to be a warning or error individually
Additionally:
- Rules are “agenda free” – ESLint does not promote any particular coding style
- Any bundled rules are generalizable
For more information, please follow the instructions on Getting Started with ESLint:
If you are looking for more advanced features mentioned above, please follow the detailed instructions on Configuring ESLint:
But, which one to choose?
At this day and age, ESLint is hands down the best choice with its extensibility and out-of-the-box support for many of your modern day needs.
Get started with ESLint following the basic instructions linked above and dive deeper into its capabilities as your needs arise.
Are you using a linting tool? Share your experience in the comments!
Top comments (9)
My personal setup for most apps:
eslint prettier eslint-config-standard eslint-config-prettierFor React apps:
eslint prettier eslint-config-standard eslint-config-prettier eslint-config-standard-reactWhat I love about ESLint is that you can use a bundled set of rules which can act as a inter-company or de-facto standard set of rules.
Lots of projects now extend yarnpkg.com/en/package/eslint-conf...
I'm not using it yet because I'm still working on a ES5 code base but I'm happily using eslint anyway!
Here's my personal favorite ESLint configuration (for extension development): gist.github.com/kav2k/e83641d3c95d...
It's quite verbose (as opposed to using presets), and started as a conversion of my older JSHint configuration with a tweaked Google preset.
I like the fact that it's verbose: it shows the stylistic choices quite clearly.
I've been using ESLint this whole time and was unaware that there are more options!. I doubt I'll switch though since it is working pretty well for me. What I did spend a lot of time on is deciding what style guide to follow through. Nice post!
I highly recommend checking out Standard JS - it provides a set of no-nonsense, non-configurable linting rules and uses solid ESLint behind the scenes.
Some popular presets for eslint sometimes do not like the way Prettier formats code. But you can always customize ;)
Thanks for the read! I prefer XO which uses ESLint underneath. It's easy to remember, easy to extend and free.
I personally cannot use ESLint (at least in a editor) because it feels slow and I am too used to the incredible speed of JSHint.
Nice breakdown of Javascript linters. As a somewhat new programmer, I was always confused why there were multiple options of linters in general.