How to Use ESLint (and JSHint) with Sublime Text

I used to be a copy editor and pride myself on catching syntax errors, so the fact that I've named the superhero version of myself the "Human Linter" is not at all sad. In spite of my linting prowess, if it's late, or if I'm staring at 5 nested callbacks, using an actual linter can be a godsend. 

What is a linter, you ask? A linter is like a spell-check/grammar-check tool for code. Linters are very useful for catching syntax errors in static code that could break your program.

JSHint vs. ESLint

For the last few months, I've been using JSHint with Sublime Text.  This is a pretty good system and catches most major errors right out of the box. JSHint is a fairly relaxed linter by default. For example, it doesn't catch anything here:

Can you spot the flaws in this code? 

Can you spot the flaws in this code? 

You can configure JSHint to be stricter, but if you need advanced customizations, you might be better off starting with ESLint. It takes a few more steps to install using command line and Sublime's Package Manager, but it has a ton of rules that are easy to configure exactly how you want. You can even make your own rules. 

The default settings will extend ESLint's recommended rules, which are fairly strict. Here is the same file linted with ESLint, using its default settings:

Two errors caught in ESLint that we didn't see with JSHint.

Two errors caught in ESLint that we didn't see with JSHint.

I configured a few ESLint rules to match my workflow and style preferences. Specifically, I relaxed the no-console rule to be a warning (in yellow) vs. an error. I also enabled the no-comment rule to detect "TODO" statements and mark them as warnings. Finally, I added a style warning to enforce spaces after keywords ("if," "else," "for", etc) and before blocks. 

This is the test file again, with my customizations added to the ESLint defaults:

My linted heart is happy.

My linted heart is happy.

Here is my .eslintrc configuration file. As you can see, it's simple to override and specify rules:

Rules rules rules... 

Rules rules rules... 

I changed the default indent to use spaces instead of tabs, with a width of 2 spaces per indent. You can find more info on indent rules here

To install and set-up ESLint, follow the instructions in the documentation, here

After you run eslint --init, answer a few questions and your .eslintrc file will be created for you. Then just open that file and modify it to your heart's content!

Using both ESLint and JSHint

If ESLint is too heavyweight for what you need right now, but you can imagine using it in production, you can toggle between linters easily in Sublime, with the keyboard shortcut CTRL + CMD + T (in Mac). That way, you can use whichever linter makes the most sense for your project at the time. 

Toggle between linters for maximum flexibility (or if you're just indecisive).

Toggle between linters for maximum flexibility (or if you're just indecisive).

Happy linting!