Sublime Text has been my IDE of preference for the past year or so after tiring of Eclipse: there is little of the feature set of a heavyweight IDE like Eclipse that I actually use on a regular basis nowadays. I like to have basic forms of code navigation, such as search and definition lookup, syntax highlighting, automatic linting, a bare minimum of code completion, and a few formatting helpers such as whitespace management, but beyond that I don't even tend to integrate version control into my development environment. I prefer to manage Git from the command line, for example, and keep that distinct from the IDE.

I've been using Sublime Text 2, but the time has come to move on up to Sublime Text 3. I'm a late adopter and it has taken a while for the package ecosystem to get up to speed, but here I am. So this seems like a good time to set out a brief post to document my Sublime Text 3 setup for Javascript development.

Install Sublime Text 3

The straightforward approach to installation is to head off to the Sublime Text website and download Sublime Text 3 for your OS.

If on Ubuntu, you can instead just add a repository and install Sublime Text via apt-get. Note that I'm using add-apt-repository here (because I'm too lazy to edit the sources list by hand), which is provided in the python-software-properties package:

apt-get install python-software-properties
add-apt-repository ppa:webupd8team/sublime-text-3
apt-get update
apt-get install sublime-text-installer

Configure Sublime Text User Settings

Open up Preferences -> Settings - Default and Preferences -> Settings - User. Note that in OS X the preferences menu is under the Sublime Text top level menu, which is not the case for Windows or Linux. Copy the settings you want to change from the default settings into your user settings. Don't edit the default settings - you can, but it's not the best of plans.

My user settings usually end up looking much like this:

{
  // Determines what character(s) are used to terminate each line in new files.
  // Valid values are 'system' (whatever the OS uses), 'windows' (CRLF) and
  // 'unix' (LF only).
  "default_line_ending": "unix",

  // Set to "none" to turn off drawing white space, "selection" to draw only the
  // white space within the selection, and "all" to draw all white space
  "draw_white_space": "all",

   // Set to true to ensure the last line of the file ends in a newline
   // character when saving
  "ensure_newline_at_eof_on_save": true,

   // The encoding to use when the encoding can't be determined automatically.
   // ASCII, UTF-8 and UTF-16 encodings will be automatically detected.
  "fallback_encoding": "UTF-8",

  // Columns in which to display vertical rulers
  "rulers": [80],

  // The number of spaces a tab is considered equal to
  "tab_size": 2,

  // Set to true to insert spaces when tab is pressed
  "translate_tabs_to_spaces": true,

  // Set to true to removing trailing white space on save
  "trim_trailing_white_space_on_save": true
}

Install Package Control

The next step is to install the Package Control system, as it isn't a part of the Sublime Text baseline. This involves cut and paste of Python code into the Sublime Text console. You'll find instructions at the Package Control site that explains how to do this.

Once installed Package Control provides the Preferences -> Package Control and Preferences -> Package Settings options in the Sublime Text menu. To install a package:

• Select Preferences -> Package Control.
• Select Install Package.
• Type the package name and then select it from the list.

Install SideBarEnhancements

Even if you never install another package, install SideBarEnhancements. The default file management UI in Sublime Text is bizarre, to say the least. SideBarEnhancements makes it palatable.

Install TrailingSpaces

Highlighting trailing spaces is very helpful, so install the TrailingSpaces package which does just that.

Install DocBlockr

The DocBlockr package provides creation and code completion of comment blocks that is similar to the default behavior found in other IDEs. It is necessary in Sublime Text if only to provide the expected completion behavior when opening comment blocks with "/**":

/**
 * Without DocBlockr, Sublime Text will not auto-complete this sort of
 * comment block.
 */

Install SublimeLinter and Javascript Linter

Unlike the Sublime Text 2 version, SublimeLinter is now split out into a core framework and per-language packages. So here install both SublimeLinter and SublimeLinter-jshint.

Install NodeJS and JSHint

To use JSHint with SublimeLinter you will of course need NodeJS and the JSHint package installed on your system. Install NodeJS as preferred, such as by building from source or using the Windows installer. Then install JSHint via NPM:

sudo npm install -g jshint

Setup JSHint Configuration on a Project by Project Basis

Configure the operation of JSHint in Sublime Text by using .jshintrc files: put them into your project, nesting in directories as needed. Where you must have exceptions for specific files, you can use inline JSHint settings in comments.