Sublime Text 2 – How to Create Snippets

Recently I changed editors from Rubymine to Sublime Text 2 (due to Rubymine being a bit slow on big projects). Anyway creating snippets and new short-cuts can turn you into the speediest of programmers. Here I look into creating a basic snippet, along with instructions on how to bind a keyboard shortcut to that snippet.

The Snippet

This is the template snippet provided by Sublime Text 2. To see this you click “Tools” and then “New Snippet”.

<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 above template gives a basic overview of what to do. Here is a real life example to show this off.

<snippet>
    <content><![CDATA[
     assert_equal(${1:expected}, ${0:actual})
   ]]></content>
    <tabTrigger>ase</tabTrigger>
    <scope>source.ruby</scope>
    <description>assert_equal(..)</description>
</snippet>

So in the editor if you type:

ase

And then hit Tab, then since this “ase” is the tabTrigger the text will transform into what’s in the content element:

assert_equal( expected, actual )

From this we can gather that ${1:expected} means that the word “expected” will be highlighted first after you hit tab, ready for the user to either change it or leave it. If the user hits tab again, the cursor will jump to ${0:actual}, which means it will highlight the word “actual”, waiting for you to either type something new in, or hit tab to keep the word “actual” there.

It is quite odd that it highlights ${0:actual} second. You would think that after hitting tab after typing “ase” that you would be taken to ${0:actual} as 0 comes before 1. The reason 0 comes last here is that no matter where you put ${0}, it will always be the last thing to type in. So if you had this weird snippet:

<snippet>
  <content><![CDATA[
Hello, ${1} is a ${2:snippet}. ${0}, ${3}
]]></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>

Each time you hit tab you would be taken to ${1} then ${2} then ${3} and the finally ${0}.

Also note that when you hit tab after you type in ${0}, the cursor will not move. Therefore we can deduce that ${0} is not only the final thing to type in, but also that the user is expected to continue typing straight after it.

I’m sick of tabbing

Since you get a tabTrigger element to fill in it seems you can’t bind other keys to do fancy stuff. What if you wanted ctrl-alt-. to create erb style wrappings like this:

<%= %>

To do this you need to bind a keyboard shortcut to the snippet:

User keybinding => Snippet

So to create this key binding you go to the Sublime Text 2 menu item, then preferences, then Key Bindings – User. Here you should find an empty array. It is in this array that you put your key bindings. Our key binding will look like this:

[
  {
    "keys": ["command+shift+."],  
    "command": "insert_snippet",
    "args": {"name": "Packages/User/erb.sublime-snippet"}
  }
]

So it is a hash with several options:
“keys”: takes an array of keyboard shortcuts
“command”: name of the command
“args”: any extra arguments

Naturally we also need to create the snippet. To see where all the packages are kept click on the menu item Sublime Text 2, then Preferences, then Show Packages right up the top. Locate the User subdirectory and add erb.sublime-snippet with the contents:

<snippet>
  <content><![CDATA[<%= ${1} %>]]></content>
</snippet>

I will try and add more advanced stuff as I learn it myself. Like this article if you want more

About the Author

Plattsi | Other Articles

A twenty something web developer and entrepreneur from Sydney, Australia. Loves building web applications that are both easy and fun to use (and don't require manuals).

  • http://bluzgraphics.com Paz Aricha

    Thanks dude! I was looking for exactly that :)

  • Juan Valera

    Thanks a ton! Just what I needed to up my productivity in ST2.

  • Andrei Cvasniuc

    Thank you!!! This is what I am looking for :)