Download, install and set it up
I like to live in the edge so I installed the dev channel version that you can find here: http://www.sublimetext.com/dev. Since it's a dev version there might be some bugs but so far I must say that I hadn't any problem with it. Also, you are going to get an update every 1 or 2 days.
After you download it and install it you should set it up. What I always like to do is go to "Preferences -> File Settings - Default" and copy the entire file in the "Preferences -> File Settings - User", but before I save I remove the font options. Be careful when you're changing the files not to mess up the structure. The next step is to change the following values:
- translate_tabs_to_spaces: true Converts the tabs into spaces. The default value is 4 spaces but you can change it from the same file
- draw_minimap_border: true Draws a border around the minimap which is on the right side of the code window
- highlight_line: true Hightlights the line that you are
- caret_style: 'phase' Changes the animation on the caret
- wide_caret: true Makes the caret wider and more visible. Thanks to henrikcederblad
- trim_trailing_white_space_on_save: true When you save all the whitespace is removed
- tab_completion: true Enables autocompletion when you press tab
- highlight_active_indent_guide: true Hightlights the indent guide of the element that you are in
- find_selected_text: true When you press Cmd+F or Ctrl+F then the selected text is already in the search field
These are the settings that I like to use, but there are plenty more that you might want to change.
Features
Goto Anything
Sublime Text 2 has a really useful functionality called "Goto Anything". It can be enabled with Ctrl+P (Windows) or Cmd+P (Mac OSX) and what it does is basically find and open files inside your project. You just have to type some keywords and it will show you a list of files containing these keywords. It's smart though. It will order the results based on popularity, which means that the files that you open more frequently will be already selected inside the results list.
Distraction Free Mode
Another cool functionality is the Distraction Free Mode. It's a simple one but really useful. The application goes into full screen and your code is centered in the middle of the screen.
Hide / Show files & folders
Another important feature that I find very useful is the ability to show or hide files and folders. For example, because for all of my projects I use Subversion, I get the annoying .svn folders inside my projects. Hiding them with Sublime Text 2 is really easy. Just go to Preferences -> Global Settings - Default and find these two keys:
- folder_exclude_patterns
- file_exclude_patterns
These are arrays with files/folders/extensions that you want Sublime to hide and not to show in the sidebar. It also filters them out when searching with the "Goto Anything" functionality
Plugins
Sublime is really powerfull when it comes to plugins. A few of them that I love using are:
Package Control
Package control is a package manager for Sublime Text 2. You can automatically update all your packages, disable and install new ones really easy and fast.
Installation
You can install it from inside Sublime Text 2 by using the console. Open the console Ctrl+`, paste the following code and press Enter.
import urllib2,os; pf='Package Control.sublime-package'; ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler())); open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read()); print 'Please restart Sublime Text to finish installation'
Inc-Dec-Value (also available via Package Control)
With this plugin you can increase/decrease numbers, dates, hex values, strings (upper,lower, capitalize). You can find more information here: https://github.com/rmaksim/Sublime-Text-2-Inc-Dec-Value
Docblockr (also available via Package Control)
Docblockr is a package that helps you write JS and PHP documentation. Just go right before a function declaration, type /** and press Enter. The plugin creates the documentation for you and by pressing tab you can jump between the descriptions and the parameters and change the text. For more information you can go here: https://github.com/spadgos/sublime-jsdocs
Zencoding (also available via Package Control)
It allows you to write your html markup in a really fast way. For example if you write
div.mydiv>ul#theul>li*5>a[href="http://mylink.com"]+span
and you press Tab you will get the following markup:
<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>
You can download Zencoding from here: https://bitbucket.org/sublimator/sublime-2-zencoding and you can read the documentation here: http://code.google.com/p/zen-coding/. There is also a cheat sheet that I found really usefull!
Installation: Installing plugins in Sublime is really easy. In this case you copy the Zencoding folder inside Sublime's Packages folder. In case that you extract the zip and you get just the files, first create the folder and then copy the files inside it.
Lot's of thanks to @MarcoBarbosa for finding this.
SublimeLinter (available via Package Control)
SublimeLinter gives you inline indications for all your linting issues. It supports three different types of linters. Google Closure Linter and JSHint. You can change the linter type by going into Preference -> Package Settings -> SublimeLinter -> Settings - Default. Find the "javascript_linter" option and change it to whatever you prefer.
BracketHighlighter (available via Package Control)
BracketHighlighter is a really useful plugin for highlighting single/double quotes, opening/closing tags and opening/closing curly brackets. The small type indicator on the far left side is a nice touch. You can download it from here: https://github.com/facelessuser/BracketHighlighter or you can install it via Package Control.
Some people (I'm one of those people) find the indicators a little bit too much so there is a nice setting that makes the indicators more subtle. All you have to do is go to the BracketHighlighter settings and change the following values:
// Outline? (solid|outline|underline|none) "quote_style" : "underline", "curly_style" : "underline", "round_style" : "underline", "square_style": "underline", "angle_style" : "underline", "tag_style" : "underline",
Compressing & Minifying
Most of the times when we want to deploy our website we want to have our JS files compressed. So I found another cool plugin for compressing your JS file.
All you have to do is create a new file, name it CompressJS.py and save inside Sublime's Packages -> User folder. Then add the following code inside the file:
import os
import sublime, sublime_plugin
import urllib, urllib2
#view.run_command("compress")
class CompressCommand(sublime_plugin.TextCommand):
def run(self, edit):
folder_name, file_name = os.path.split(self.view.file_name())
sublime.status_message(("Compressing %s...") % file_name)
region = sublime.Region(0L, self.view.size())
file_string = self.view.substr(region)
url = 'http://refresh-sf.com/yui/'
values = {
'compresstext' : file_string,
'type' : 'js',
'redirect' : 'true' }
data = urllib.urlencode(values)
req = urllib2.Request(url, data)
response = urllib2.urlopen(req)
the_page = response.read()
compressed_view = self.view.window().new_file()
compressed_view.insert(edit, 0, the_page)
This plugin uses an external website and sends to it all the code from inside the opened JS file. Then it creates a new tab and copies in all the data that it got from the website. So you can create your own service if you like that does all the things that you need to the code.
In order to run the plugin you need to open the console and type view.run_command('compress');
Snippets
Another really cool feature in Sublime is the ability to create Snippets and assign a combination of letters to them. For example let's say that you want (in Javascript) to type /**m and then press tab to get this:
/**
* Describe what this method does
* @private
* @param {String|Object|Array|Boolean|Number} paramName Describe this parameter
* @returns Describe what it returns
* @type String|Object|Array|Boolean|Number
* @author Thodoris Tsiridis
*/
All you have to do is create a file with any name but with the .tmSnippet inside Packages -> Javascript folder. This folder must contain the following code:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple Computer//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>content</key>
<string>/**
* ${1:Describe what this method does}
${2: * @private }
${3: * @param { ${4:String|Object|Array|Boolean|Number}\} ${5:paramName} ${6:Describe this parameter}${7}}
* @returns ${8:Describe what it returns}
* @type ${9:String|Object|Array|Boolean|Number}
* @author ${10:Thodoris Tsiridis}
*/
</string>
<key>name</key>
<string>Method</string>
<key>scope</key>
<string>source.js</string>
<key>tabTrigger</key>
<string>/**m</string>
<key>uuid</key>
<string>17F51DD9-6CB7-4174-91E2-00E423A2190A</string>
</dict>
</plist>
What you have here is basically an xml file containing key, string pairs. So in the string node following the key node with value content you should have the string/code that you want to inject. Notice the ${1: Something} values. The number declares the tab stop and the text following ":" is the default text. Keep in mind that if you use the $0 then this will be exit point of your tab stops. Then you have your tabTrigger key that holds the combination of characters that you need to type before pressing tab in order to get the content. The combination of characters are set in the string node following the tabTrigger node. Finally you have your uuid key where is used for storing a unique id. Again, the next string node should be a unique alphanumeric unique id.
So in this example if you type /**m and then you press tab you'll get that snippet. And if you continue pressing tab you will keep moving between tab stops.