Customize your Sublime Text 2 configuration for awesome coding.

I recently discovered Sublime Text 2, an amazing text editor that sits perfectly in the middle ground of better-than-textmate and less-powerful-than-vim. If you followed the link, and happend to have been a Windows user of the early to mid 2000′s, you’ll notice that the software has an evaluation license reminiscent of Winzip.

Sublime Text 2 may be downloaded and evaluated for free, however a license must be purchased for continued use. There is currently no enforced time limit for the evaluation.

So, while it’s basically freeware, I have a strong feeling even the most fervent of penny-pinchers will shell out the $59 for a license after a short while of use. If not, it bugs you every 100 saves or so with a pop up asking you to buy a license that you can just close out of. Now, let’s get to the point.

 

Table of Contents:

 

 

Step 1. Brief Overview & Quick Adjustments

After firing up Sublime Text, you’ll notice a lot of similarities between it and TextMate. It’s a text editor – not an IDE. It’s file management is minimal unless you’re already keeping good folder structuring of your projects, has rich syntax highlighting and the alternative dark-background-on-light-colored-text which I have come to prefer – but is changeable via themes. It’s of course functional as is, but let’s make a few quick changes.

  1. Enable the side bar file browser. Go to View > Side Bar > Show Side Bar to enable it. Note: It’s less of a traditional file “browser” and more of a ease-of-access panel to files you already have opened. This actually can be considered advantageous, as it can help to reduce clutter.
  2. Opening a project. You’ll quickly realize that to take advantage of the side bar, you’ll likely want to be opening your project folder as a whole rather than individual files. Notice that there is unfortunately no keyboard shortcut for this. Let’s fix that. Hit CMD + SPACE to toggle Spotlight and type “Keyboard” and pull up the keyboard preference panel of the System Preferences. Go to the Keyboard Shortcuts tab, select “Application Shortcuts” on the left panel, and hit the + button to add a new keyboard shortcut. Enter in the details in the screenshot below, substituting whatever key combination you’d like in lieu of my choice of CMD + SHIFT + O.

 

Step 2. Tab Triggered Auto-Complete

One of the greatest features of Sublime Text is it’s tab controlled auto-complete, customizable by snippets (more on snippets in the next step). To try it out, create a new file and type in “html” (without quotes) and with no trailing space, hit tab. You’ll see that it instantly sets you up a bare-bones html template, and places your cursor in between the title tags.

The possibilities with this are endless, which brings us to our next step…

Step 3. Using and Creating Snippets

Here comes the fun part in harnessing the power of Sublime Text. If you’d like, you can read more about snippets on Sublime Text’s website to get a better understanding, though the following info should be enough to get you started.

Snippets are a way of storing code that can be recalled later to use again. Utilizing them can not only make coding speedier and more efficient, it can help you create cleaner code as well. Let’s get started by creating a new snippet. Go to Tools > New Snippet. As with Open Folder, you’ll realize that sadly there’s no keyboard shortcut for this. Let’s take care of that real quick (optional).

Repeat the process detailed from Step 1 in the second part. This time, enter in the info as shown below. I chose CTRL + N as the shortcut.

Now, back in Sublime Text 2, hit your new shortcut, CTRL + N. A new tab will open containing the following:

The options are fairly self explanatory, but let’s go over them quickly.

  1. The code in between lines 2 and 4 (line 3) is the actually snippet – the piece of code that will be inserted into your document.
  2. On line 6 is the optional tab trigger – the “shorthand” text you will enter before hitting tab to have the code auto-complete and insert into your document. Note that you must uncomment it to enable the tab trigger.
  3. Line 8 is the scope – a topic I won’t be diving into, but that you can read more about here. Basically, they allow for nesting/hierarchy much like CSS, and can control when and when not to trigger the snippet.
Now that you have a basic understanding of the contents of a snippet, let’s make our own. Create a New Snippet and replace it’s contents with the code below.
1
2
3
4
5
6
7
<snippet>
    <content><![CDATA[
<link rel="stylesheet" href="$1.css">
]]></content>
    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    <tabTrigger>css</tabTrigger>
</snippet>
<snippet>
	<content><![CDATA[
<link rel="stylesheet" href="$1.css">
]]></content>
	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
	<tabTrigger>css</tabTrigger>
</snippet>

You can easily see what this snippet will do. Upon typing “css” and then hitting tab, it will:

  1. Insert the <link> code into your document
  2. Set your cursor right before “.css” – which is controlled by using $1.

Before you can use this snippet, we have to save it. When going to save the snippet, it will automatically bring you to the User directory where the snippet needs to be saved.  If it for some reason does not, you can find it in the the Sublime Text 2 directory, inside “Packages” and in the “User” folder. In order for the snippet to work, you MUST save it with extension “.sublime-snippet“.

Try creating a few of your own snippets before proceeding through this guide.

Step 4. Forget about Find and Replace, Use Multi-Select Instead

Sublime Text 2 comes equipped with amazing multi-selection abilities. Consider a scenario in which you need to rename all occurrences of a word – perhaps you change the element class name in your CSS. Highlight a word, and hit CMD + CTRL + G. Voila – all occurrences of that word are now highlighted, and if you begin typing, you’ll see them all simultaneously being replaced.

There are a lot of different way to perform multi-selection, which are detailed here in the developer’s documentation.

Step 5. Switching between files with live results

Open a few files or a project into Sublime Text 2 and prepare for amazement. Hit CMD + P (NOT CMD + SHIFT + P, to toggle the command palette) and begin typing a filename. As you are typing it, you can see that the document will load before you have even completed the filename. Hit enter to actually open the file.


Step 6. Adding Package Control

Sublime Text can have lots of plugins, both third party and ones created by the developers themselves. They can be found online via googling or their site, and installed “the hard way”, or you can add Package Control and make things a whole lot easier.

Toggle the console by typing CTRL + ` (that’s a “backtick” or “grave accent”, located on your keyboard above the tab key). Copy and paste in the the following line:

1
import urllib2,os;pf='Package Control.sublime-package';ipp=sublime.installed_packages_path();os.makedirs(ipp) if not os.path.exists(ipp) else None;open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read())
import urllib2,os;pf='Package Control.sublime-package';ipp=sublime.installed_packages_path();os.makedirs(ipp) if not os.path.exists(ipp) else None;open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read())

Restart Sublime Text 2 after the console shows the process was complete and you should now have Package Control. To test this, hit CMD + SHIFT + P (Remember this keyboard shortcut, you’ll be using it a lot) and type “Install”. Navigate to “Package Control: Install Package” to see a generated list of available plugins. We’ll be installing a package in the next step.


Step 7. Publishing to FTP (sort of) with Transmit

The biggest thing I missed coming from Coda was it’s awesome Publish to FTP feature. Fortunately there is a plugin that compensates for this. You’ll need Transmit - easily the best FTP utility I’ve ever used – which unfortunately isn’t free but you can pick up for $34. If you can’t afford it at the moment, at least grab a trial version to try this out.

  • In order for “publishing” (actually DropSend) to work right, you need to have Transmit set up correctly. We’ll do this using Transmit’s Favorites feature. Use the screenshot below as a guide, supplementing in your server information. Be sure to have the correct local and remote path set for each project, and to check “Use DockSend”.

  • Next, let’s install Sublime Transmit Docksend. In Sublime Text 2, toggle the command palette by hitting CMD + SHIFT + P, and then navigating to the package installer. Search for “Docksend” or “Transmit”, and hit enter when the package shows up. If that for some reason does not show up, follow the previous link and use the installation instructions given in the readme.
  • Now – with your project open in both Sublime Text 2 and in the background, opened in transmit, hit CMD + U while in Sublime Text 2. Voila. A growl notification will pop up indicating that the file has uploaded successfully, and you can now view your file on the server to see it updated. It’s not exactly upload on save, but one extra keystroke is more than tolerable.

 

Enjoy playing around with this wonderful editor, and stay tuned for Part 2 of this guide, which will cover even more features.

Lastly, a big thank you to Nettuts+ for this article on Sublime Text 2, as it lead me to begin using the software, and much of this article is a personal adaptation of the information in that guide.

12 Comments


  1. Alexander Zizzo on
    Alexander Zizzo wrote:

    @Doug Gorley – Doh. I was mistaken, $16 is the price for http://wbond.net/sublime_packages/sftp/buy – an SFTP plugin. I just learned as well that about every 100 saves or so, you get a little pop up asking you to purchase a license that you can close out of.

    Thanks for the heads up though – I’ve corrected the post.





  2. Mike Earley wrote:

    Hey, just a little help–you say, “make sure to set up the project paths” (paraphrasing here)…can you give an example or something, so I can set mine up? For example, if my remote path is “mearley.foo.net/home/mearley/foo_html/”, what/how do I set that up when I edit the project’s settings?


    • Alexander Zizzo on
      Alexander Zizzo wrote:

      Hey there. The remote path would be “/home/mearley/foo_html” and the local path would just be whatever folder contains the appropriate files for “foo_html”. This is so upon uploading (DockSend) it goes to the foo_html directory, rather than just the root directory of your ftp. This is assuming whatever ftp account you use has it’s path as root, “/”.


  3. Mike Earley wrote:

    OK–so right now my project file is:
    {
    “folders”:
    [
    {
    "path": "/blah blah blah"
    },
    {
    "path": "/blah blah blah 2nd folder"
    }
    ]
    }

    Is a remote path specified different from a local path? And, how does Sublime know, if I have 5 local folders and one remote folder, which local folder is ‘paired’ with the remote folder?


    • Alexander Zizzo on
      Alexander Zizzo wrote:

      @Mike Earley: Ah, you’re in the sublime project file. That’s not what I was talking about at all, just leave that file alone. The local path/remote path settings I’m talking about are referring to the Transmit settings shown in the last screenshot.


  4. Pingback: My webdesign toolkit - Tiago Franco Blog

  5. Pingback: tutorial (css[1]) | Pearltrees

  6. netzc wrote:

    Found this when trying to find out how to create my own autocompletions for more efficient coding RoR.
    Helped a lot.

    Thank you.