Back to Labs

Lint JavaScript While You Type with SublimeLinter for Sublime Text 2

SublimeLinter is a package for Sublime Text 2 that applies lint tools to your code while you type. SublimeLinter provides lint tools for many languages, but in this article I will look at JavaScript linting only.

Why use a lint tool?

You should use a lint tool to check your code for errors and conformance to a style guide. This is particularly important when working on teams, since code will be maintained by multiple developers over time. See my Introduction to JSLint for a closer look at one JavaScript linter.

Why SublimeLinter?

There are several JavaScript linters for Sublime Text 2. Why SublimeLinter? In brief:

  • It runs as you type. There’s no need to use the mouse or an extra key binding to trigger the linting. However, if you prefer to trigger the linting manually, there is an option to do so.
  • Inline highlighting shows you exactly where the errors are. Focus on one error at a time by clicking into a highlighted region and reading the message displayed in the status bar. If you find the outlining obtrusive, you can use margin highlighting instead.
  • Messages are displayed in the status bar–an existing space. The plugin does not open any new windows or panels to display its output.

Installation and configuration are also simple, as outlined below:

Install a JavaScript engine on your OS

To use SublimeLinter’s JavaScript linting tools, you must have a JavaScript engine installed on your OS. Mac OS X includes a JavaScript engine, but Windows generally does not. I’m writing this on a Windows machine, so I went to the Node.js website, clicked “Install”, and ran the MSI file to install Node.js. Linux users can generally install Node.js through your OS package manager. You do not need to install any additional Node.js packages–SublimeLinter bundles the other code it needs for JavaScript linting.

Install the Package Control package for Sublime Text 2

As a Sublime Text 2 user, you likely have Package Control installed already. If not, follow the instructions on the Package Control installation page. Restart Sublime Text 2 after installing.

Although Package Control isn’t required to install SublimeLinter, installing with Package Control is fast and easy, and Package Control keeps your packages up to date.

Install the SublimeLinter package for Sublime Text 2

Open the Sublime Text 2 command palette (Command+Shift+P on Mac OS X, Control+Shift+P on Windows and Linux) and select Package Control: Install Package. Then, from the list of available packages, select SublimeLinter.

Watch it work

Restart Sublime Text 2 and open a JavaScript file. Type some code with an obvious error (like putting a dash in a variable name). SublimeLinter lints your code whenever you stop typing or save the file. The erroneous code you typed should now be outlined. Click into the outlined code to see a message from the lint tool in the Sublime Text status bar at the bottom of the editor.

Configuration

To configure which lint tool or which options are used, open the default settings (Preferences->Package Settings->SublimeLinter->Settings – Default) and your user settings (Preferences->Package Settings->SublimeLinter->Settings – User). You must make all changes in the user settings file, since changes to the default settings will be reverted if the package is ever updated. Using the default settings as a template, add any customizations you require to your user settings file. Remember to use valid JSON when working within Sublime Text 2 settings files.

JSHint

By default, JavaScript linting is handled by JSHint. To pass options to JSHint, add the jshint_options setting in your user settings file and pass in your desired options. See the JSHint documentation for a list of options.

JSLint

If you’d prefer to use JSLint, change the javascript_linter setting to “jslint”. Use jslint_options to pass options to JSLint. See the JSLint documentation for a list of options.

Wrap up

And there you have it–fast and easy JavaScript linting while you type. Happy linting!

Thanks to Matt Wicks for his contributions to this article.

Comments are closed

Top of Page