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’.

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.

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…’

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

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.

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.”]