Sublime Text 2: How to create a snippet?

When I started using Sublime Text 2, I realized that I wanted to simplify my life a bit by creating some useful snippets , but I was faced with the fact that at that time there was no instruction manual in Russian. Having found a good English-language article, I decided to translate, in the process I added a little and learned a couple of interesting points that I am ready to share with you.

About inaccuracies, typos, errors, write in a personal - I will promptly correct.


')

Snippet

This is a snippet template in Sublime Text 2. You can reach it through Tools-New Snippet.

1. < snippet >
2. < content > <! [CDATA [
3. Hello, $ {1: this} is a $ {2: snippet}.
4. ]] >
5. </ content >
6. <! - Optional: Set a tabTrigger to ->
7. <! - <tabTrigger> hello </ tabTrigger> ->
8. <! - Optional: set the snippet will trigger ->
9. <! - <scope> source.python </ scope> ->
10. </ snippet >

Directly the code for insertion is contained between <! [CDATA [ some code ]]>. And here is a real example:

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

.

Now, when you drive into the editor “ase” and then press Tab “ase” is replaced with the code given in the snippet.

1. assert_equal (expected, actual)

Now we understand that $ {1: expected} means that the word “expected” will be highlighted first after pressing Tab, ready for editing, and if you press Tab again, the cursor moves to $ {0: actual}, i.e. . the word “actual” will be highlighted.

Oddly enough, $ {0: actual} is highlighted second. You might think that pressing Tab after typing “ase” will highlight $ {0: actual} because 0 comes before 1, but it was not there - $ {0} will always be allocated last, wherever you shove it. So if you have a snippet like this:

1. < snippet >
2. < content > <! [CDATA [
3. Hello, $ {1} is a $ {2: snippet}. $ {0}, $ {3}
4. ]] > </ content >
5. <! - Optional: Set a tabTrigger to ->
6. < tabTrigger > hello </ tabTrigger >
7. <! - Optional: set the snippet will trigger ->
8. <! - <scope> source.python </ scope> ->
9. </ snippet >

Each time you press Tab, you will be transferred to $ {1}, then to $ {2}, then to $ {3} and finally $ {0}.
Also note that when you reach $ {0}, the selection will stop moving. One can guess that $ {0} denotes that part of the code, after which the user usually immediately begins to write further.

Tired of pressing Tab

It might seem to you that you can only button Tab. And what if you want to use ctrl-alt-. to create such wrappers: <% =%>?
To achieve this, you must bind the keyboard combination to the snippet:
go to Preferences, then Key Bindings - User. Here’s how it should look:

1. [
2. {
3. "Keys": ["command + shift +."],
4. "Command": "insert_snippet",
5. "Args": {"name": "Packages / User / erb.sublime-snippet"}
6. }
7. ]

So, there are several options:
“Keys”: desired shortcut keys
“Command”: command name
“Args”: additional arguments

Do not forget that in the end we need to create a snippet :) To find where all the “packages” are located, click on the menu item Preferences, then Browse Packages. Find the User folder and add erb.sublime-snippet with the following contents:

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

Done!

Supplement from zimorodok

1. You can use variables, such as $ TM_SELECTED_TEXT. It is convenient for specifying the default value when a hot key is specified for a snippet or a snippet is launched from the command panel.

<snippet> <content><![CDATA[console.log(${0:$TM_SELECTED_TEXT});]]></content> <tabTrigger>cl</tabTrigger> <scope>source.js</scope> <description>console.log</description> </snippet> 

2. You can use regular expressions to modify the body of the snippet during the typing process.

 <snippet> <content><![CDATA[set${5:T}${5/(T)|(I).*/(?1:imeout)(?2:nterval)/}(${20:function () \{${0:$TM_SELECTED_TEXT}\}}, ${10:50});]]></content> <tabTrigger>set</tabTrigger> <scope>source.js</scope> <description>setTimeout, setInterval</description> </snippet> 

When typing “set” - TAB, you can continue to write “I”, and “terval” will be substituted with an automatic one. In words it is difficult to describe, but it is convenient.

A set of snippets for javascript from zimorodok

References:

www.sublimetext.com/download - Download
www.sublimetext.com/docs/api-reference - Plugin API Reference
habrahabr.ru/post/136529 - Excellent article about creating plugins for Sublime Text 2
github.com/bobthecow/sublime-sane-snippets - Sane Snippet - plugin for creating snippets (thanks to TycoooN )
sublimetext.info - Informal documentation
sublimetext.info/docs/en/reference/snippets.html - Chapter about snippets