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. Make sure when you save it you give it the extension .sublime-snippet. eg. ~/Library/Application\ Support/Sublime\ Text\ 2/Packages/User/your-snippet.sublime-snippet

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

Update: If you have Sublime Text 3, check out this post: Better Definition Navigation in Sublime Text 3

Note: if you want an all-in-one resource to become an expert in ruby on rails 3, don’t bother with textbooks – just get this video tutorial series (highly recommended): Ruby on Rails Tutorial

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 :)

  • vLight

    it there a way to set multiple in the snippet ? e.g. Some JavaScript code, which schould be available in HTML and JS files only ?

  • asfalt boy

    I’d like to know too .. is there such a thing?

  • Nosli

    So were do I save the snippet, and which extension should I use?

  • Ankit001raj

    that was really helpful man…
    is there a way by which i can compile and run c programs in ST2

  • http://twitter.com/epogue Elliott Pogue

    You shouldn’t have to. The scope is set to source.js when you’re inside of a tag in HTML (so any JavaScript snippets that you’ve created should work).

  • rlmflores

    There is. Separate them with a comma.

  • Rick

    Hey Plattsi, thanks for this tutorial, helped a lot! Any hint on how to insert `date +”%H:%M:%S”` as if in terminal? The only way I’ve found so far was using the insert_date plugin

  • http://webtempest.com Web Tempest

    Not off the top of my head sorry

  • Quinten

    you can save it in your packages directory under User/snippet-name.sublime-snippet, he references the path above in the the code showing the key binding.

  • http://www.mighty-technologies.com/ Sergey Romanov

    May be I missed this but where do I save this snippet file? And can I insert few snippets in one file and make my own snippet library?

  • http://webtempest.com Web Tempest

    Click on Sublime Text 2 -> Preferences -> browse packages

    The “User” folder in here is where you can store your snippets. Not sure if you can store more than one in a file – try it out

  • Behinder

    Textmate snippet creation is much easier :)

  • http://webtempest.com Web Tempest

    yeah creating st2 snippets is not the easiest – hence the need for tutorials such as this :(

  • Behinder

    Jeff Way of Nettuts presented simplified  method of installing snippet via package control system

  • Alisa

    Can someone help me figure out what colors ST2 uses for Python syntax highlighting (not Regular Expressions)? Thank you!

  • Vive Vio

    can i make 2 or more snippet in one file?
    like

  • marblegravy

    Aha! The key part that I was missing was that you had to save it with the extension sublime-snippet. Thanks!

  • http://twitter.com/guzart Arturo

    Thanks, Don’t forge to escape any dollar signs ‘$’ (jquery snippets) by preceding it with a back slash.