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:
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:
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:
Here is my .eslintrc configuration file. As you can see, it's simple to override and specify rules:
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.