Portafolio Que hacemos AX3 Tech Clientes Nosotros Blog Contacto

Beginners Introduction To Sublime Text Code Snippets

Foto del autor: Pablo Vallejo


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.

¿Qué esperas para crecer más?

Los consumidores hoy son digitales, quedarse obsoleto es la receta del fracaso. Comienza ahora tu transformación digital.

Carrera 13 # 98 - 70 OF 204
Bogotá - Colombia