Beginners Introduction To Sublime Text Code Snippets

One the things we as developers expend most of our time on is our text editor and the more comfortable we feel using it, the better. Because of this premise, a bunch of packages and plug-ins have been created, they include themes, color schemes, snippets, integrations and more.

In this article, we want to show you how to improve your productivity by using snippets in Sublime Text. Snippets are pieces of code that you can refer to with a keyword, so for example if while developing you type hundreds of console.log's, a snippet can come in handy, as with it, you can bring this instruction by typing a keyword you define, like cl, log or other you prefer followed by tab.

In order to create a snippet go to Tools > New Snippet, it should open a new tab with a default snippet template which you can modify. In this example, we're going to modify it to create our own console.log snippet which will get triggered when we type cl followed by tab.

Content

The body of a snippet goes inside <content> tag and inside CDATA section, here we define it content and also where we want the cursor to be placed inside the snippet by using the $ brackets keyword. In this example, when we type cl and hit tab, console.log() will pop up as the next text with the caret inside the parenthesis.

<content><![CDATA[
console.log($1);
]]></content>

Fields

Fields indicate where we want the cursor to be placed at and each time we hit tab the cursor will pass to the next field.

$('$1').click(function($2}){
    alert($3);
});

Placeholders

Placeholders are almost the same as fields, but they offer a default value which is selected so that it can be overwritten.

$(${1:'a'}).click(function(${2:e}){
    alert(${3:'Clicked'});
});

TabTrigger

TabTrigger indicates which keyword follow by tab we want to show the snippet with.

    <tabTrigger>cl</tabTrigger>

Scope

To be more precise, snippets code with a scope parameter, which indicates in which language the snippet should be used.

    <scope>source.js</scope>

Complete snippet

<snippet>
    <content><![CDATA[
console.log(${1});
$1
]]></content>
    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    <tabTrigger>cl</tabTrigger>
    <!-- Optional: Set a scope to limit where the snippet will trigger -->
    <scope>source.js</scope>
</snippet>

Saving it

Snippets live in the Packages directory ~/Library/Application\ Support/Sublime\ Text\ 3/Packages/, also, they have to be saved with a .sublime-snippet extension.

Further reading

Snippets are very useful as they can save you a lot of typing when writing things over and over. If you want to learn more, you can head over to the snippets documentation. Also, here there are some useful JavaScript snippets adapted from Tomas Ruzicka's.