What is a linter?
Example workflow WITHOUT linter
- Write some code
- Save your code
- Refresh the page and wait for the page to load
- The inspector found an error
- You inspect the error and it says something like… “Uncaught SyntaxError: Unexpected identifier on line 43 file…”
- You think “that’s kind of a cryptic message”. You return to the code to see what’s actually causing the problem on line 43
- Ah, you missed a comma between your variable declarations
- You add the comma… var variable1 = 1, variable2 = 2;
- Then you save the project and walk yourself through the whole process again, thinking “wow, this is a bit time consuming. I really hope I didn’t miss a comma somewhere else”
Example workflow WITH linter
- Write code. In the meantime the linter tells you about your syntax errors.
- You fix your mistakes
- Save your code
- You smile and think “wow, this is the future”
Benefits of using a linter.
- Get instantly notified of your mistakes
- Save time
- Safer code
- You can stay focused on the hard part of your coding
- Better coding flow
- Obvious highlighting in your code
- Your team will follow the same coding style
- It’s just more fun. It’s like magic
There’s a few of them out there so I’ll give you a quick walk through of some of them.
EsLint: Is open source and started in 2013. The founder says he love JsHint but found himself in need of a more pluggable linter. The primary reason ESLint was created was to allow developers to create their own linting rules. ESLint is designed to have all rules completely pluggable. It ships with a basic set of rules to get started with, then it’s up to you what rules you want to change or implement. This is the linter for the person who needs to add and change linting rules. If you’re not one of those people, maybe one of the other three linters would be a better choice.
Jscs: Started 2013 and ships with 90 validation rules (or 120 according to their github), including presets from popular style guides. This is great so we don’t need to come up with our own style-guides over and over again. Here’s a list of presets Jscs provides.
But, I still don’t know which one to use?
Well, maybe it’s easiest to just follow the bigger mass. This is the download history for the last month from npmjs.com 6th July 2015.
- JsLint: 38,210 downloads
<a href="https://www.npmjs.com/package/jslint" target="_blank" rel="noopener">npmjs.com/package/jslint</a>
- JsHint: 1,635,776 downloads
<a href="https://www.npmjs.com/package/jshint" target="_blank" rel="noopener">npmjs.com/package/jshint</a>
- EsLint: 363,212 downloads
<a href="https://www.npmjs.com/package/eslint" target="_blank" rel="noopener">npmjs.com/package/eslint</a>
- Jscs: 366,619 downloads
<a href="https://www.npmjs.com/package/jscs" target="_blank" rel="noopener">npmjs.com/package/jscs</a>
Let’s see who is using what…
Who is using JSLint?
Ah, but who is using EsHint?
And who is using Jscs?
jQuery Adobe Bootstrap AngularJS Yandex Wikimedia Grunt
Ember.js Ionic Moment.js TodoMVC Famous less.js Goodvidio
Since there are heaps of code editors and a bunch of linters, I will focus on just one editor. Since I’m using Sublime Text 3 on Mac, this should give you a good demonstration. Don’t worry if you’re not a Sublime Text 3 user, I’m sure Google will be there for you to find information for other setups. With that said this guide may still be useful for you. Here’s how to install linters in Sublime Text.
Installing a pre installed linter like JSLint
JsLint is preinstalled with SublimeLinter so all you need to do to get started is…
- Make sure you’ve installed sublime package control.
- Install sublimelinter, which is the base package for the linters.
- You should now see something like this…
Installing a NOT pre installed linter like EsLint
- Make sure you’ve installed SublimeLinter3 and it’s working.
- Install the linters you want. e.g cmd+shift+p and type sublimelinter-eshint
- As you can see all linters starts with sublime-linter-[linter name]
- Once we have installed it in the editor we need to install it on on the computer. Sublime linter are using the node package manager so we have to install them as well.
- Open the terminal and type $npm install -g eslint
- Once that is installed you want to navigate to your project directory and type $eslint –init
- The prompt will now ask you how you want your linter to be set up. It will create a settings file you can change at any time.
You’ll find all you need under Tools->SublimeLinter. Here are some good things to know.
I can see the lint dots but what do they mean?
They easiest way to find out is simple click somewhere on the line and in the bottom list of sublime you can see the message.
Two settings worth mentioning are Lint Mode->Load/Save and Lint Mode->Background
Load/save will lint your file every time you load and save. Background will instantly lint your file while your’re typing.
Tips if you’re using background mode
I prefer the background mode but without right settings it can be quite annoying when all colors are shifting constantly.
Longer delay time and weaker color settings make it much better. Open Sublimelinter-sublime.settings and change to following values.
- mark_style: stippled underline
- lint_mode: background
- delay: 2
EsLint is not showing all errors in Sublime
One difference between EsLint and JsHint is the presentation of lint errors. EsLint only shows the top error while JsHint shows all at once. Compare the pictures above and below. Without any further investigation I believe it is a Sublime thing since the demo on EsLints website shows all errors at the same time.
Jump between your lint errors
A really good feature I also want to mention is the jump-between-lint-errors feature.
Let’s say you have a bunch of lint errors, you can hit cmd+ctrl+a and you can navigate between the lint errors with your arrows keys. Pretty awesome when you are linting big chunks of code to find errors.
Get more help with debug = true
Debug is by default false but if you set it to true the linter will output all messages in the console. Pretty handy sometimes.
I would expect to see something called EsHint in the future… or why not LintHint?
I hope you found this article useful, and if you still don’t know what linter to pick you can probably go for JsHint since it’s the most popular one, it’s well maintained and been around for a while.
No matter what linter you pick, the difference between using one and not using one is big. Bring some light to your work desk and have fun.
Discovering problems before they even become a problem is great. Fixing bugs is even greater but knowing what errors went live is invaluable. I can’t raise enough glasses for Raygun, the error tracking tool that keeps track of all errors your users experience. Sign up for a trial here.
I would also recommend you to read some of my previous articles on a similar topic.
And if you’d like to speed up your coding