Guia: Cómo Crear Snippets en Sublime Text

Una de los programas en el cual los desarrolladores pasamos incontables horas es nuestro editor de texto, así pues, entre más cómodos nos sintamos con él, nuestra productividad aumentará. Partiendo de la anterior premisa se han creado una gran cantidad de paquetes y plug-ins de tal manera que los desarrolladores adapten su editor a sus necesidades, estos incluyen esquemas de colores, snippets, plugins de integración y más.

En este artículo, daremos una mirada de cómo puedes mejorar tu productividad utilizando snippets en Sublime Text. Los snippets son secciones de código que puedes traer a lo que estás escribiendo usando un keyword y presionando tab.
Por ejemplo, si escribes cientos de
console.log's' en JavaScript al día, te vendría bien utilizar un snippet, de tal manera que con solo escribir cl, console u otro keyword que tu escojas y presionar tab, este código se insertará después del cursor.

Para crear un snippet, ve a
Herramientas > Nuevo Snippet, esto te debe abrir una nueva pestaña con el template básico de un snippet que puedes modificar. En este ejemplo, vamos a modificarlo para crear nuestro propio console.log() snippet el cual se insertara cuando presionemos tab después del keyword cl.

Content

El cuerpo del snippet va dentro del tag
<content> el cual esta dentro de la sección CDATA, aquí definimos las posiciones del cursor utilizando el signo de dólar $. En este ejemplo cuando escribimos cl seguido de la tecla tab, console.log() será insertado en el editor y el cursor se posicionará entre los paréntesis.

<pre lang="xml"><content><![CDATA[
console.log($1);
]]></content>
</pre>

Fields

Utilizando
fields podemos indicar a donde queremos que el cursor se pose cada vez que presionamos tab.

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

Placeholders

Los placeholders funcionan casi igual que las
fields, solo difieren en que en placeholder podemos definir un valor por defecto que se puede sobreescribir.

<pre lang="js">$(${1:'a'}).click(function(${2:e}){
    alert(${3:'Clicked'});
});
</pre>

TabTrigger

El tag
tabTrigger se utiliza para definir con que keyword queremos que se muestre el snippet.

    <tabTrigger>cl</tabTrigger>

Scope

El tag
scope tiene como objetivo especificar en qué lenguaje de programación queremos que el snippet se pueda insertar.

<pre lang="xml">    <scope>source.js</scope>
</pre>

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>

Guardado del Snippet

Los Snippets se guardan en el directorio de paquetes
Packages ~/Library/Application\ Support/Sublime\ Text\ 3/Packages/, de la misma manera los debemos guardar utilizando la extensión .sublime-snippet.

Conclusión

Los Snippets son muy útiles ya que pueden ahorrarnos muchas tecleadas cuando escribimos muchas veces la misma instrucción. Si quieres conocer más sobre los Snippets de
Sublime, puedes dirigirte a su documentación. Asimismo aquí puedes encontrar múltiples ejemplos de snippets adaptados de Tomas Ruzicka. 

Este artículo es una traducción de Beginners Introduction To Sublime Text Code Snippets