Snippets in Sublime Text 2

Creating snippets in Sublime Text 2 is super easy, quick and highly recommended. If you want to increase your coding speed, setting up snippets can be extremely helpful. Not only will they save you from RSI in the future, they will give you more time to hang out with you pals at the cafe.

A snippet in Sublime Text is a block of code that is injected into your working document when triggered.

e.g. Typing ‘list’ and then hitting the Tab key will inject the code below into your document.

list + tab


<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

With this particular snippet typing 4 characters and hitting the Tab key, saves typing 54 characters. Pretty cool hey.

1

So to create a snippet, go to ‘Tools’ > ‘New Snippet’.

New snippet

2

Doing the above step will inject a new barebones snippet template into a new tab. You can now start customising it to suit your needs.

Barebones snippet

3

Customising The Snippet

The barebones snippet contains all the information Sublime Text needs in order to know what to insert, whether to insert it and when. Those sections are: content, tabTrigger, scope and description.

Content
The actual snippet. This is where the code you want to be outputted goes.

The content must be included in the <![CDATA[…]]> section.

Note: If you want the get a literal $, you have to escape it like this: $ and when writing a snippet that contains indentation, always use tabs. The tabs will change to spaces when the snippet is injected if the option ‘translateTabsToSpaces’ is set to true.

tabTrigger
This is where you put the sequence of keys that you want to trigger the snippet with (e.g. ‘list’). The snippet will be injected after you type your chosen set of keys and hit the Tab key.

Scope
The scope selector determines the context of where the snippet can be used. For example, you would not want a HTML snippet to be injected into your CSS file.

e.g. <scope>source.html</scope>, <scope>source.css</scope>

Description
This is used to give the snippet more information when viewing the snippet in the Snippets menu. This is optional and if not present, Sublime Text defaults to the name of the snippet.

Getting all Funky!

Sublime Text has a lot more power than I am going to explain here. So if you feel like you need to give your snippets a little bit more oomph then head over to the official documentation.

Fields
Field markers can be used in your snippet to cycle through certain positions in your snippet once it has been injected. To move to the next marker, all you need to do is press the Tab key (or Shift + Tab to go backwards).


<ul class="$1">
	<li>$2</li>
	<li>$3</li>
	<li>$4</li>
	<li>$5</li>
</ul>

Note: If you want to control where the exit point should be, use the $0 mark and you can break out of the field cycle by pressing the Escape key.

Mirrored Fields
The mirrored fields copy each other. These can help your snippet become a super snippet.


-webkit-box-shadow: {$1px 1px 2px rgba(0,0,0,.2)};
   -moz-box-shadow: {$1px 1px 2px rgba(0,0,0,.2)};
        box-shadow: {$1px 1px 2px rgba(0,0,0,.2)};

In the example above, the first value of the shadow will be mirrored by all, in realtime.

Place Holders
This tiny addition to your snippet markup gives your fields a default value and turns your super snippet into a super dooper snippet. Adding this is useful when there is a common value but sometimes you will need the option of customising it.


-webkit-box-shadow: {${1:0}px 1px 2px rgba(0,0,0,.2)};
   -moz-box-shadow: {${1:0}px 1px 2px rgba(0,0,0,.2)};
        box-shadow: {${1:0}px 1px 2px rgba(0,0,0,.2)};

When the above example is injected it will give a default value to the box-shadow of ’0′. The cursor will be active and enable customisation if needed.

5

Once you are happy with your snippet, you will need to save it to the ‘Users’ folder in the package directory.

To bring up the packages folder, go to the ‘Sublime Text’ > ‘Preferences’ > ‘Browse Packages…’

Browse packages

When you have launched the ‘Packages’ directory, save your snippet into the ‘Users’ folder.

Save snippet

Make sure your snippet is saved with the extension ‘.sublime-snippet’.

e.g. snippet_name.sublime-snippet

Note: You might have to re-start Sublime Text 2 for your snippet to take effect.

If you find yourself not being able to remember your snippet, you can always find your snippet in the ‘Tools’ > ‘Snippet’ menu.

Find snippets

Or by using Command + Shift + P and searching for it.


To get you started, or add to your collection, I have added a bunch of snippets to a Github repository. If you feel like contributing, don’t hold back!

Sublime Super Snippets

Enjoy!

[emailform title="Get the newsletter!" subtitle="A once a week email with just pure awesome links to the best news and articles about web design."]

13 Comments

  1. Thanks for the info, I’m just starting my first project with Sublime now. This will come in handy. Cheers

  2. Thanks for the tutorial – I’ve only been using Sublime Text for a few months and have been using a separate snippet program. It makes sense to combine them.

  3. Thanks for the tutorial. I know it’s a bit late now, but to be totally honest I couldn’t fully grok how to format the snippets when I first read this. The reason: no finished examples. I had to go read Scott Granneman’s article here:

    http://www.granneman.com/webdev/editors/sublime-text/top-features-of-sublime-text/quickly-insert-text-and-code-with-sublime-text-snippets/

    If you could add finished examples for a few snippets, this would be an immensely more helpful resource.

    Thanks again,
    Paris

  4. You can easily manage Sublime Text (2 or 3) snippets from within Snippets (http://snippets.me/) with Distributor for Sublime Text. Here is a demo with TextMate http://www.youtube.com/watch?v=GKZK4U_DgbM but it works exactly the same with Sublime.

  5. “Note: If you want the get a literal $, you have to escape it like this: $

    I did and it doesn’t show up. Just how exactly do you escape it?

    • Cheers Harry!

  6. Just what I needed, thanks for the post. I think they need to make it a lot easier though. I believe there are too many steps. Is it possible to create multiple snippets in one file?

    • Hey Jason,

      As far as I know I am not sure that you can combine multiple snippets in one file.

This post currently has 13 responses. What do you think?

You can use basic HTML when posting code, please turn all < characters into &lt; or > into &gt;
If the code is multi-line, use <pre><code></code></pre>

Leave a Reply

Your email address will not be published. Required fields are marked *