How to create custom Sublime Text 2 Snippets

One of the greatest features of Sublime Text2 are the auto-completion features it provides to the user which speed up the coding process a lot. Today I’m going to introduce you to how to create your own Snippets shortcuts. Although it’s possible to code in a wide range of languages with ST2, I’m going to focus this post into Processing coding through ST2.

What do we need to start?

  1. A running version of Sublime Text 2 for windows.
  2. The processing-sublime extension by b-g.

Once we get everything running with ST2 in processing build mode (Tools>Build System>Processing) and the syntax highlight feature correctly set (View> Syntax > Processing) we must see something like this: 

image

Now we are ready to create our custom Snippets set. But…

WTH is a Snippets?

A Snippets is a fast method to input complex and usually used text structures in your code typing only a few letters and using TAB to jump between your new text sections. I.e - type “setup” and press TAB.

image

What you see is a custom snippets in action created by b-g in his plugin. If everything goes fine your cursor was set in the line 2 of your code, just in the right place to type the code inside setup() function. If you type size and press ENTER, you will call another snippets that build for you the syntax of processing size() function (notice how ST2 offers to you two options that fit with your text input; I will select the one without OPENGL option). Your cursor must to be placed in the first input value of size(); if you enter a new number and press TAB, ST2 will move your cursor to the second input value. To start a processing sketch turns into a incredible fast task now, isn’t it?

image

Ok, let’s talk about what have been happening inside ST2 and how to reproduce this behaviour adapting it to our needs. When you call a Snippets ST2 does:

  1. Create a text layout that match the keyword you typed.
  2. He moves your cursor in order, related with how the snippets was set up.

For the first point it’s clear that we’ll need to create a “key word” and a piece of text that will be created. For the second step we’ll need to specify the order in which our cursor will jump through the created code. Let’s start.

Go to Tools>New Snippest. ST2 will create a new tab with a new file already filled with some text. It looks like this:

image

The first thing we are going to find new is that our new file points to XML syntax. Everything we write inside our custom snippets must be written using XML syntax rules. The code is really easy to read, even for someone that doesn’t know anything about XML.

All the code is surrounded by <snippet></snippet> tags. That’s pretty clear: you are editing a snippet. Then you have a piece of code surrounded by <content></content> and inside that you have a piece of text inside <![CDATA[ “the piece of text” ]].

Everything you have to do is replace "the piece of code" with the code you want to create every time you call the snippet. Imagine that we want to create a snippet that create a function layout better that the one that comes with the processing plugin (call it with "function"); we could write this:

<snippet>
	<content><![CDATA[
${1:void} ${2:name} (${3:input1},${4:input2},${5:input3})
{
${5:content} 
}
]]></content>
	<description>new function</description>
        <scope>source.pde</scope>
	<tabTrigger>fn</tabTrigger> -->
</snippet>

Look only inside <content></content> tags. The first part that talks about <![CDATA[ is always the same, you don’t need to change it. After that we have typed this text:

void name (input1, input2, input3){content}

But adding some flavor. Every time you want to ST2 move your cursor to one word to edit it after snippet had been created, you only need to use:

${anumber:theword}

// in our example:

${1:void}

/*

This statement will move your cursor and highlight this word in the first place;

then it will go to the next statement.

*/

${2:name}

The next step will be to deal with <description>, <scope> and, the most important, <tabTrigger>.

<description> tag names our snippet in ST2 interface. <scope> determine in which sintax highlight scheme the snippet will work (we don’t want to create a java function inside a python script ;), for processing we’ll use source.pde) and <tabTrigger> define what is the key to call our snippet.

image

Remember that every snippet must be saved in a different file. Once we save our snippet (by default in SublimeText2Folder>Packages>User) it will be available in the scope we set.

I hope this helps a little bit in your coding process with Processing using Sublime Text2. Please post a comment for any question or advise you have.

UPDATE: Like funkturd said in his comment is very important to save the Snippets with “.sublime-snippet” extension. Thanks for the comment!