I’ve been using Sublime Text 2 exclusively for about 2 months now and I absolutely love it. More and more every day! Even though it could be considered a pretty basic editor, don’t let that fool you. There are so many plugins and customizations available it’s incredible. So I wanted to run down my basic setup with Sublime along with some tips, tricks, and notable plugins.
Sublime Package Control
Before you do anything, you need to have Sublime Package Control installed. Think of npm or nuget or any other package manager. It’s an absolute must and makes finding and installing plugins a breeze!
https://sublime.wbond.net/installation
Once installed (and restarted) simply press ⌘ – Shift – P / Control – Alt – P to open the Goto Anything dialog. Type Install and press Enter. Search to your heart’s content! Most, if not all, of the plugins listed in the rest of this article can be installed via Package Control.
Automated jsHint(ing) on Save
For Javascript developers using Sublime, here are some steps to have a nice jsHint automated build process:
- Install jsHint plugin: https://github.com/uipoet/sublime-jshint
- Install SublimeOnBuild plugin: https://github.com/alexnj/SublimeOnSaveBuild
- Install jsFormat plugin: https://github.com/jdc0589/JsFormat
- Install Trailing Spaces plugin: https://github.com/SublimeText/TrailingSpaces
Set some user settings for Trailing Spaces:
[sourcecode lang=”javascript”]
{
“trailing_spaces_highlight_color”: “invalid”,
“trailing_spaces_include_current_line”: false
}
[/sourcecode]
Some Sublime optional settings (Preferences -> Settings – User):
[sourcecode lang=”javascript”]
{
“rulers”:
[
80, 120
],
“tab_size”: 4,
“translate_tabs_to_spaces”: true,
“trim_trailing_white_space_on_save”: true,
“use_tab_stops”: true,
“ensure_newline_at_eof_on_save”: true,
}
[/sourcecode]
You should probably restart Sublime again after all of that.
Now when you edit any .js files:
- Execute jsFormat (depends on how you configured keyboard shortcuts) which will fix most tabbing and spacing alignment issues. (If you have no code highlighted the entire file will auto format, if you highlight code the formatting will apply only to that selection.)
- Save and you will get the jsHint report popup in a console window. (Not only that, but the trailing spaces everywhere will be automatically trimmed.)
Execute Sublime from the command line (mac):
In order to be able to launch sublime from the command line, you need to setup a symlink. The easiest way to do this is with the following command:
[sourcecode]
ln -s /Applications/Sublime Text 2.app/Contents/SharedSupport/bin/subl /usr/local/bin/sublime
[/sourcecode]
Git integration:
There are 2 excellent plugins that work really well if you find yourself working on git repos a lot:
- Git plugin: https://github.com/kemayo/sublime-text-git/wiki (lets you run git commands from within Sublime as well as the incredibly useful branch information in the status bar)
- GitGutter: https://github.com/jisaacks/GitGutter (shows git diff marks in the gutter as green pluses, yellow dots, or red x’s)
If you’d prefer to use Sublime as your default Git related editor (i.e. to edit commit messages and manage rebasing) then execute the following command (assuming you created the symlink for Sublime above so that you can execute it from the command line):
[sourcecode]
git config –global core.editor “sublime -w”
[/sourcecode]
Other miscellaneous plugins:
- Emmet: https://github.com/sergeche/emmet-sublime (zen coding)
- BracketHighlighter: https://github.com/facelessuser/BracketHighlighter
- Search Stack Overflow: https://github.com/ericmartel/Sublime-Text-2-Stackoverflow-Plugin
- SimpleClone: https://github.com/mikefowler/simple-clone (clone current doc to another pane)
- Theme – Soda: http://buymeasoda.github.io/soda-theme/ (just a really nice theme!)
Some other helpful random settings (that should be self explanatory):
[sourcecode lang=”javascript”]
“bold_folder_labels”: true,
“draw_indent_guides”: true,
“highlight_line”: true,
“highlight_modified_tabs”: true,
“match_brackets”: true,
“match_brackets_angle”: true,
“match_brackets_braces”: true,
“match_brackets_content”: true,
“match_brackets_square”: true,
“remember_open_files”: true,
“remember_open_folders”: true,
“scroll_past_end”: true,
“scroll_speed”: 2,
[/sourcecode]
Snippets:
Sublime includes a lot of predefined code snippets by default. To use snippets, just start typing and a dropdown will instantly appear. Type something like “for” (no quotes) and then TAB and you will see JavaScript for loop code output instantly. You can also open the Goto Anything dialog and type Snippet to get a list of all the Snippets. To create a new Snippet, simply goto Tools->New Snippet… (read more about Snippets) As a bonus, you can install snippets for popular libraries and frameworks via the Package Installer (hint, install the jQuery Snippet package!).
Keyboard Commands and Shortcuts:
There are a ton of keyboard shortcuts for Sublime, as well as the awesome ability to very quickly and easily create your own. Take a look at the default key bindings to get an idea of how to create your own or overwrite an existing key bind. Then edit your own:
Preferences->Key Bindings – User:
[sourcecode lang=”javascript”]
[
// git specific shortcuts:
{ “keys”: [“ctrl+shift+d”], “command”: “git_diff” }
]
[/sourcecode]
*Note: If you plan to add more than one custom shortcut, be sure to place a comma and the end of every line but the last. In the example above, there is only 1 line so there is no trailing comma.
Some of the most important keyboard shortcuts:
- ⌘ – P (Ctrl – P) = Goto anything
- ⌘ – T (Ctrl – T) = Goto file
- ⌘ – R (Ctrl – R) = Goto function (inside file)
- Control – G = Goto line number
Hopefully you find these tips, tricks, shortcuts, and plugins useful! The best tip I can give is to always Google “sublime ____” no matter what it is you are trying to do, think you should be able to do, or wish you could do. I can almost guarantee someone created a plugin for it!