Sublime Text and Snippets

Asif Ahmed

Every developer has their favorite text editor to write code in. Some people prefer TextMate, or Notepad++, or even Eclipse. I have definitely used TextMate and Notepad++ in the past, but for the last year I have been strictly a Sublime Text person. Sublime Text is a beautiful simple text editor with tons of plugins, and easy customization. It’s also free-ish. The trial is unlimited, but every 20-30 saves, it opens a popup asking you to please buy it. And honestly if you are not a starving developer anymore, you should buy it! It’s a great product and you are supporting your fellow developer. Though I’ve been using it for the past year, that are still so many shortcuts and tricks I have yet to learn. The most people thing I learned today was having user defined snippets. Let’s go through creating a snippet from scratch. The snippet I will be creating is the HTML for creating a table.

To create a snippet, open up Sublime Text and in the toolbar up top, click Tools -> New Snippet. This will bring up a new file with a sample snippet already inside of it. It should look something like this –

<snippet>
	<content><![CDATA[
Hello, ${1:this} is a ${2:snippet}.
]]></content>
	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
	<!-- <tabTrigger>hello</tabTrigger> -->
	<!-- Optional: Set a scope to limit where the snippet will trigger -->
	<!-- <scope>source.python</scope> -->
</snippet>

The text between the content tags is the actual snippet. The text between the tabTrigger tag is the word upon which the snippet is activated. For example if I type in “hello” and then press tab as soon as I finish typing “hello” (and before typing a space), then this tab action will cause “hello” to turn into the snippet text. The scope tag defines in what type of files you want this snippet to be active. Let’s uncomment the tabTrigger tag, but keep the scope tag commented.

Now let’s take a closer look at the text within the content tag. What do these brackets mean? These brackets are basically placeholders for variables that may or may not have default values. Basically after you press tab after typing “hello”, the focus of your cursor will go to where $1 is in the snippet. Because we defined a default value of “this” it will highlight “this” and allow us to replace it easily. I would suggest trying this out, to get a better understanding of what this means.

We don’t want this “hello” snippet so let’s get it closer to what we want for the table HTML.

<snippet>
	<content><![CDATA[
<table class="${1:}" width="${2:}" cellspacing="0" cellpadding="0" border="0">
	<tr>
		<td>
			$0
		</td>
	</tr>
</table>
]]></content>
	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
	<tabTrigger>table</tabTrigger>
	<!-- Optional: Set a scope to limit where the snippet will trigger -->
	<!-- <scope>source.python</scope> -->
</snippet>

This is the HTML for the table. I set variables for the class and width of the table because I will probably be setting these frequently. Notice how there is a $0 in the middle. This means that once I have set all the variables (by pressing tab), the cursor will go to whatever location the $0 is at. Otherwise if I excluded this the cursor would have gone to the end of the snippet.

For a better understanding, be sure to read the unofficial documentations.

If you have any questions contact me!