Syntax errors suck. They're pretty much like the worst. We've all been there. You have a moment of transcendental inspiration, you hack out some of the most erudite, lucid code you've ever created, hit save, and wait for the fruits of your flawless genius to unfold. But then everything comes crashing down around you like a flaming house of cards hitting a fan, or something roughly equivalent. The culprit? Some misplaced comma on line 238 that takes you an hour and half to find.
Enter Sublime Linter. Catch those malevolent little errors before they illicit any hair pulling.
Installation is simple, but has a few steps.
Step One - Install SublimeLinter Package
If you have Package Manager installed on Sublime cmd + shift + p
and open that sucker up.
(If you don't, time to get out from under the Subliminal Rock packagemanager.io)
Got to: Package Control: Install Package --> SublimeLinter
and install it.
Step Two - Install Linters
SublimeLinter alone, as the Package Control Messages page emphatically states, doesn't do anything. In order to get at the lintfree goodness that is clean code, you have to install language specific linters first.
In this case, we'll go ahead and install jshint to act as our linter.
Back in package manager: Package Control: Install Package --> SublimeLinter-jshint
On the new Package Control Messages Page, at the bottom you will have a new section referring specifically to jshint.
Step Three - Install jshint node package
We're getting there, one more step to get this working! jshint makes use of a Node package that must be installed separately on your machine.
If you have node
and npm
on your computer already, run the following command to install jshint globally so SublimeLinter can get at it.
npm install -g jshint
If you have no idea what this node stuff is all about, check out more detailed instructions here.
https://github.com/SublimeLinter/SublimeLinter-jshint
At this point you should be up and running! Head into a .js file in Sublime, type out the most heinous syntax errors you can think of, and bask in their yellow outlined ostracism!
Step Four - Changing JShint Configuration
So you're psyched, your totally free of unwanted lintyness, but your JSHint isn't playing nice with jQuery. It especially doesn't like '$' which, it correctly although rather narrowly, tells you is not defined.
To change the linting configuration, you need to add a file called .jshintrc
into your project folder.
The file allows you to use object notation to customize the way Jshint works. For example, to stop any errors on the jQuery '$' object, enter
{
"globals": {
"$": false
}
}
For your reference, here is a full list of options that can be modified in the .jshintrc
file.