In a former article I slightly mentioned that if you were a JavaScript developer, Aptana Studio — with all its built-in JSLint support, intellisense, auto completion, task management features, and more… — was an excellent IDE for you.

But as time passed by, I realized that along with its good parts, I had some “very” serious issues with Aptana Studio‘s undesirable drawbacks. Here are to name two:

• Aptana was sucking up my RAM like an elephant: Its memory utilization was no less than 1 gigabyte. In fact, that’s not a really big problem, since I had plenty of free RAM. But regardless of the amount of RAM it used, as the project’s size increased so did Aptana‘s sluggishness.
• Every time I booted up the IDE, Aptana started indexing all the PHP files, and other resources. The project I was working on had plenty of PHP files. And I had to wait for the indexing operation’s completion to start doing anything reasonable. That indexing time was no less than ten minutes, and it felt like ages!

Aptana has taught me to continuously slow down, and live in a Zen-like patience.

I sticked with Aptana anyway, since it was the only IDE around that suited my JavaScript development needs… Or I thought it was, until I met Sublime Text 2 .

This week, I’ve completely transferred all my front-end development work to Sublime Text 2. After having used it thoroughly for more than 40 hours, I can confidently say that Sublime Text 2 is “the editor” for any JavaScript Engineer / Front-End Developer.

In this article, I’ll try to list a few features that make Sublime Text 2 uniquely stand out in the crowd. I’m sure you’ll learn more as you install and explore it further.

Blazing Fast

I believe Sublime Text 2 is one of the fastest, and one of the most incredible editors to come out in a long time! If you consider those big fat IDEs as monster trucks, Sublime Text 2 is a race car. Each has their own pros and cons. And I’ll prefer the race car .

It is damn fast. So fast that sometimes you think a file opens and renders with full syntax highlighting before you click on it on the side bar. You have to see it, to believe it . It’s the most responsive editor I’ve seen so far.

Cross-Platform Support

Sublime Text 2 is available for all major platforms:

• Linux,
• OS X,
• And Windows.

Extensibility

Sublime Text 2 is fully extensible with plug-ins. Plug-ins give Sublime Text 2 its flexibility, and power.

Sublime Text 2 plug-ins are Python scripts that re-use existing commands, or create new ones to build new features. You can use any of the available Application Commands, Window Commands, or Text Commands inside a Sublime Text 2 plug-in.

If you like to extend your development environment and make it behave the way you like you can look at the API reference and the plug-in reference — it’s really easy to get started.

Configuration Files

Almost anything you can imagine in Sublime Text 2 is configurable via editing JSON configuration files. Most of these configuration changes are reflected in real time: As soon as you edit and save the configuration file, the changes will be visible.

For instance, if you want to change the font family and font size you use, you can do it by clicking Preferences > File Settings – User and updating the JSON file you see with something like this:

{
    "color_scheme": "Packages/Color Scheme - Default/Cobalt.tmTheme",
    "font_face": "BitStream Vera Sans Mono",
    "font_size": 10
}

File Settings

You can modify the file settings by updating Preferences > File Settings (Default)

Here are some of my preferred file settings:

    "rulers": [80,120,160],
    "tab_size": 4,
    "translate_tabs_to_spaces": true,
    "detect_indentation": true,
    "auto_indent": true,
    "trim_automatic_white_space": true,
    "word_wrap": true,
    "wrap_width": 80,
    "indent_subsequent_lines": true,
    "auto_match_enabled": true,
    "draw_minimap_border": true,
    "highlight_line": true,
    "caret_style": "phase",
    "line_padding_top": 0,
    "line_padding_bottom": 0,
    "scroll_past_end": true,
    "draw_white_space": "selection",
    "draw_indent_guides": true,
    "trim_trailing_white_space_on_save": true,
    "ensure_newline_at_eof_on_save": true,
    "save_on_focus_lost": false,
    "tab_completion": true,
    "shift_tab_unindent": true,
    "find_selected_text": true

These are the settings that I like to use, but there are plenty more that you might want to change.

Global Settings

The global settings can be configured via Preferences > Global Settings (Default)

Here is the global setting I file use:

    {
    "theme": "Default.sublime-theme",
    "hot_exit": true,
    "remember_open_files": true,
    "folder_exclude_patterns": [".svn", ".git", ".hg", "CVS"],
    "file_exclude_patterns": ["*.pyc", "*.pyo", "*.exe", "*.dll", "*.obj","*.o", "*.a", "*.lib", "*.so", "*.dylib", "*.ncb", "*.sdf", "*.suo", "*.pdb", "*.idb", ".DS_Store", "*.class", "*.psd", "*.db"],
    "binary_file_patterns": ["*.jpg", "*.jpeg", "*.png", "*.gif", "*.ttf", "*.tga", "*.dds", "*.ico", "*.eot", "*.pdf", "*.swf", "*.jar", "*.zip"],
    "scroll_speed": 1.0,
    "show_tab_close_buttons": true,
    "highlight_modified_tabs": false,
    "open_files_in_new_window": true,
    "close_windows_when_empty": true,
    "use_simple_full_screen": false,
    "overlay_scroll_bars": "system",
    "ignored_packages": []
    }

Instead of customizing global settings, it’s safer to override them in user file settings, user global settings, and user key bindings files.

Here is my current User File Settings file:

{
    "color_scheme": "Packages/User/Monokai Soda.tmTheme",
    "font_face": "Meslo LG S DZ",
    "font_size": 10,
    "vintage_start_in_command_mode": true
}

And my current User Global Settings file:

{
    "theme": "Soda Dark.sublime-theme"
}

And my User Key Bindings File

[
    { "keys": ["ctrl+shift+H"], "command": "highlightCurrentWord" },
    { "keys": ["ctrl+shift+x"], "command": "htmlprettify" }
]

As you see, Sublime Text 2‘s configuration flexibility is almost unlimited. You can edit the configuration files to your liking, and have the most suitable development environment for yourself.

Let’s examine the user interface deeper, shall we?

Everything can be Done from the Keyboard

You don’t need your mouse, or your trackpad when you get used to keyboard shortcuts. This does not mean mouse is useless, though.
Everything can be done from the mouse too. However, if you habituate using keyboard shortcuts, you’ll see that you’ll become more productive.

Some Useful Keyboard Shortcuts

Here are a few (out of many) useful keyboard shortcuts:

selecting lines of code

cmd + L

jump to line number

cmd + G

moving code up and down

cmd + ctrl + (up/down arrows)

wrapping text selection with a tag

ctrl + shift + W

selecting multiple lines

cmd + shift + L

selecting multiple lines then wrapping each single one (useful for menus, list items… etc.)

cmd + shift + L; then cmd + ctrl + W

selecting multiple columns

alt + (drag) (enables you select an arbitrary rectangle of text)

Fuzzy Finder (Go to Anything)

All the search in Sublime Text 2 is based on a powerful fuzzy matching algorithm. Which enables you to find DialogControllerComponentFactory class by typing dccf. This is way more quicker than writing a regular expression to grep the right file — it’s almost second nature.

With the keyboard shortcut CTRL+P (fuzzy finder) you can switch between the open files by using the arrow keys.

You just have to type some keys and it will show you a list of files containing these keys. It’s smart though: It’ll order the results by popularity, meaning that the files that you open more will be already at the top of the list.

While switching back and forth with the arrow keys, you can see the contents of the file you switch without even pressing the enter key.

It’s lightning fast. I can say that it’s even faster than VIM applications like PeepOpen.

Command Palette

Another very useful feature of Sublime Text 2 is its Command Palette. You can access it by clicking CTRL+Shift+P. The palette displays a searchable list of all the available commands.

Multi Selection

Yet another indispensable feature of Sublime Text 2 is its multi-selection mode. Once you get used to it, you cannot do without it .

To select multiple parts of the text, press CTRL (CMD key in Mac) then highlight and click each region where you want to get selected.

Tabbed Layout

With Sublime Text 2, you can easily open multiple documents not only in different tabs, but also side by side.

There are seven alternative screen layouts, allowing you to stack up documents next to, or below, one another.

Themes

If you are not satisfied with the default theme, you can always modify the theme or install another theme. Let us install Ian Hill‘s “Soda” theme, for example.

After extracting the folder contents to Packages/Theme – Soda, you’ll need to update Preferences > Global settings – User with this one

{
    "theme": "Soda Dark.sublime-theme"
}

This is enough to start instantly using the new theme.

Color Schemes

There are (by the time of this writing) 22 built-in color schemes for Sublime Text 2. All of them are pleasing to the eye. If you prefer to use your own color scheme though, you can use it by adding your .tmTheme file into the Packages/User folder.

Here’s a color scheme file that uses a modified version of Sublime Text 2‘s default Monokai color scheme.

JSLint Support

If you are a JavaScript developer, JSLint shall be a part of your regular development cycle.

With Eduardo Lundgren‘s JSLint plugin, it’s extremely easy to integrate JSLint to your development cycle.

After adding the plugin’s files to Sublime Text 2‘s configuration folder (which is .config/sublime-text-2/Packages for my environment), and binding the build action to a keyboard shortcut like CTRL+Shift+B, you can JSLint the file you edit with a few keystrokes .

Trim Trailing Spaces

Another useful sublime plugin is the trailing spaces plug-in.

What it does is simple: It marks the trailing spaces in your source file, and optionally deletes them with an assigned keyboard shortcut. You can even configure the plug-in to trim trailing spaces whenever you save a source file.

Auto Format JavaScript Files

We’ve all worked with those files whose indentation has gone wild, with no consistent usage of braces and spaces, where white-space and tabs are mixed together.

Those files are hard to read, harder to understand and even harder to maintain.

With the Sublime HtmlPrettify plugin, you can auto-format any JavaScript and HTML file.

Installing this plug-in, as any other plug-in can be done by copying the folder contents to Packages/HTMLPrettify folder.

Then adding

{ "keys": ["ctrl+shift+x"], "command": "htmlprettify" },

to Preferences > Key Bindings > User, will map CTRL+SHIFT+x keyboard combination to htmlprettify action, which will auto-format your code.

Zen-Like HTML Creation

Another useful plugin is ZenCoding.

Similar to the plug-ins before, to install, simply copy the ZenCoding folder inside Sublime’s Packages folder.

Zen Coding enables you to convert something like this

div.mydiv>ul#theul>li*5>a[href="http://mylink.com"]+span

into this:

<div class="mydiv">
    <ul id="theul">
        <li><a href="http://mylink.com"></a><span></span></li>
        <li><a href="http://mylink.com"></a><span></span></li>
        <li><a href="http://mylink.com"></a><span></span></li>
        <li><a href="http://mylink.com"></a><span></span></li>
        <li><a href="http://mylink.com"></a><span></span></li>
    </ul>
</div>

Highlight Words

Another useful plug-in is the WordHighlight plugin.

Installing the plug-in is similarly easy:

You guessed it! Just copy the folder to Sublime Text 2‘s Packages Folder .

The plug-in enables you to highlight all occurrences of the word under your cursor.

But… Still VIM is the King of All Editors

I feel the same way you do . Once you master VIM‘s keyboard commands, you’ll never want to go back to another editor. Before analyzing Sublime Text 2, I’ve felt the same way too. I have always wondered why on earth do IDE creators not integrate a VIM-like text editing behavior to their IDEs.

A decent editor which had all the flexibility and keyboard shortcuts of VIM, along with the power of an IDE would have been great!

What I found is: Sublime Text 2 has a “Vintage Mode”, which easily enables a VIM-like editing environment .

If you are one of akind who uses l, h, j, k instead of arrow keys, Vintage mode is what you need.

Since VIM is an editor with a slightly steep learning curve, Vintage Mode is not enabled by default. To enable it:

• Select the Preferences/Global Settings – Default menu item,
• Edit the ignored_packages setting, changing it from:

  "ignored_packages": ["Vintage"]
  

  to

  "ignored_packages": []
  

Vintage Mode includes most basic actions:

• d (delete),
• y (copy),
• c (change),
• gu (lower case),
• gU (upper case),
• g~ (swap case),

It also includes many motions, including l, h, j, k, W, w, e, E, b, B, alt+w (move by sub-words), alt+W (move backwards by sub-words), $, ^, %, 0, G, gg, f, F, t, T, ^f, ^b, H, M, and L.

That may be not enough for a seasoned VIM fanatic, but it’s more than satisfactory for me .

I even enabled:

"vintage_start_in_command_mode": true

in my user file settings to start Sublime Text 2 in Command Mode every time I open a file.

MiniMap

You can see your code from 10,000 feet with Sublime Text 2‘s MiniMap.

MiniMap is a little map on the right of the editor, showing an overall view of the entire code.

I found that the MiniMap works best when you’re trying to discipline yourself to keep your files small:

Large classes in with tons of methods, with deeply nested code blocks become really obvious when the MiniMap is right there staring at you all the time.

Code Snippets

Yet another powerful feature of Sublime Text 2 is code snippets.

Let’s see one by example:

Click Tools > New Snippet

and paste the following snippet there:

<snippet>
    <content><![CDATA[
/**
 * ${1:function} \{${2:identifier}\} ${3:methodName}
 *
 * <p>${4:description}.</p>
 *
 * @param \{${5:type}\} ${6:name} - ${7:description}
 * @return ${8:what}
 */
]]></content>
    <tabTrigger>/**</tabTrigger>
</snippet>

then save it as jscomment.sublime-snippet.

After that, any time you type /** and press the TAB key, the editor will automatically paste this:

/**
 * function {identifier} methodName
 *
 * <p>description.</p>
 *
 * @param {type} name - description
 * @return what
 */

Where you can navigate between tab stops by clicking the TAB key further.

Distraction-Free (i.e. Blogging) Mode

It’s the mode that I use when I was drafting this article .

It’s simple one but really useful. In Distraction-Free Mode, the editor goes into full screen and your text is centered in the middle of the screen. There’s nothing to distract you: no menu bar, no MiniMap. The only thing you focus is your text.

Simple, and awesome!

Unofficial Documentation

There is a comprehensive documentation of Sublime text on docs.sublimetext.info. The docs are well-organized and helpful.

Package Control

Install Sublime Package Control in order to magically pull and install plugins from github.

If you are like me, and want to experiment with different addons/plugins, then the first thing you install must be Package Control in deed.

Useful Sublime Text 2 Plugins

Here are a few other useful Sublime Text 2 plugins:

Sublime Alignment

A key binding to align multiple lines and multiple selections, for code readability.

Sublime Change Quotes

Enables changing the selection from single quotes to double quotes, trying to intelligently escape quotes whenever possible.

Case Conversion

Case conversion converts the current word/token between pascal, camel, and snake case.

Bracket Highlighter

A must-have extension, if you are a frequent code writer (i.e. a programmer )

Sublime Tag

Currently provides: “Close tag on slash”, “Tag indent or AutoFormat Tags”, “Tag Remove”, “Insert as Tag”, “Tag Remove Attributes”, “Tag Close”, “Tag Lint”. If you edit a lot of HTML/XML documents then this plugin is a life-saver

Clipboard History

Keep a history of your clipboard items. Let you paste them back in, as needed.

Conclusion

Sublime Text 2 is an editor I fell in love with. I’m sure I’ve only scratched the surface of it, and I’m pretty sure I will keep finding new things for Sublime Text 2 as I continue using it more.

Sublime Text is trial-ware: However, it doesn’t seem to have a time or feature restriction on the trial. In other words, you can use the trial as long as you like, without any inconvenience.

That aside, I must admit that the developers of Sublime Text 2 did one hell of a job. I will spare the money, and thereby support the people that made this possible. I urge you to do so too.

…

Have you tried Sublime Text 2? If so, what was your experience?
What are the Sublime Text 2 plugins that you cannot live without?
What coding environment do you currently use?
Don’t be shy; share your experiences in the comments below .