If you’re anything like me, you’re constantly looking for a more efficient way to do things. One time-suck that I encountered working in Rails is typing out erb tags in view files. I can’t imagine a more annoying set of characters to type in order to write Ruby in HTML and we use them ALL THE TIME. So I set out on a mission to simplify this task in my chosen text editor, Sublime. I came across Snippets, the handy dandy tool which would prove to make my, and soon your, coding life a smidge easier.

Snippets are XML files used for creating text shortcuts. Sublime comes with a package of built-in snippets. For example, have you ever noticed that when you type def within a ruby file and hit tab you are provided with a method-name and an end? The method-name is automatically highlighted, positioning the user to overwrite it with their chosen method name. If you hit tab again, the cursor magically moves you to the next line positioning you to define the functionality of your method. This isn’t magic people, it’s a snippet!

Well now we can all create our own magic. We’ll use those pesky erb tags as our example. To create a new snippet, go to the Sublime toolbar and open the Tools. Click on “New Snippet”.
You will be provided with a snippet skeleton, which details the code necessary to make it work.

1
2
3
4
5
6
7
8
9

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

Within the content tags in the square brackets after CDATA, define the desired output.

1

<content><![CDATA[<% %>]]></content>

You can specify the desired cursor location after keying tab.

1

<content><![CDATA[<% $0 %>]]></content>

Or even a sequence of movements!

1

<content><![CDATA[<% $2 %> $1]]></content>

In this case, after typing er (this step is explained next) and pressing tab, the cursor will move to the $1 location. When you press tab again, the cursor will move to the location at $2. Note that I didn’t use $0 as the starting point as I had in the previous example. That is because $0 specifies the exit point, so it would actually be evaluated last in the sequence of movements. If I replaced $2 with $0 above, the cursor would follow the same sequence.

You can further define place holders for those locations.

1

<content><![CDATA[<% ${2:second stop} %> ${1:first stop}]]></content>

Within the optional tabTrigger tags, set the shortcut. For example, I want to be able to type er, press the tab key to render my erb tags. If you don’t specify the shortcut, you’ll only be able to use the snippet by searching for it through the snippet menu. I can’t imagine why anyone would want to do that so I suggest considering this part a requirement.

1

<tabTrigger>er</tabTrigger>

The optional scope tags specify the type of files in which this snippet will be accessible. I want to use erb tags in Rails views so I have specified text.html.ruby.

1

scope>text.html.ruby</scope>

After ample googling, I’ve concluded there’s no offical list of scopes. I figured out that I needed to use text.html.ruby by looking at another Rails snippet. If you get stuck trying to figure out the scope of the files you want this shortcut to function in, don’t fret. Firstly, remember that it’s optional. You can also google around and likely find your answer anyway. Here’s a work-in-progress list I came across during my search.

The last and also optional input in the skeleton is a description. Here you can specify the text in the Snippets menu. I’ve made mine ERB tags. Now when I open the Snippets menu from Tools, I can search for ERB tags which will identify the shortcut and also generate the text if I click on it. If the description is not defined, it will default to the name of the file.

1

<description>ERB tags</description>

Note that this snippet will only show up in the menu when the search is conducted in files which support it, in our case html.erb files.

Here is the erb tag snippet in its totality:

1
2
3
4
5
6

<snippet>
<content><![CDATA[<% $0 %>]]></content>
<tabTrigger>er</tabTrigger>
<scope>text.html.ruby</scope>
<description>ERB tags</description>
</snippet>

And here’s another snippet that I created for erb output:

1
2
3
4
5
6

<snippet>
<content><![CDATA[<%= $0 %>]]></content>
<tabTrigger>erb</tabTrigger>
<scope>text.html.ruby</scope>
<description>ERB Output</description>
</snippet>

Check out the documentation for other available features.

Now we need to save the file. The extension is key here, it must be ‘.sublime-snippet’. The default directory is User within the Packages directory. You can move it into a language specific directory if you wish, but it’s not necessary. So easy right?!

Happy coding!