Los Snippets se guardan en el directorio de paquetes

  1. Mac: /Users/yussme/Library/Application Support/Sublime Text 3/Packages/User/, utilizando la extensión .sublime-snippet.
  2. Windows: C:\Users\Irving Yussel\AppData\Roaming\Sublime Text\Packages\User
cd Users/yussme/Library/Application\ Support/Sublime\ Text\ 3/Packages/User
  1. Ir a Tools/DEveloper/New Snippet...
  2. El cuerpo del snippet va dentro de <content><![CDATA[ y ]]></content>.

Cursor

Podemos indicar a donde queremos que el cursor se pose cada vez que presionamos tab, utilizando el signo de dólar ${#}. Por ejemplos:

console.log(${1});
$('${1}').click(function(${2}}){
    alert(${3});
});
  • Por supuesto, si necesitamos usar el signo de dólar, podemos anteponer una diagonal \.

Valor default

Podemos definir un valor por defecto que se puede sobreescribir.

$('${1:uno}').click(function(${2:dos}}){
    alert(${3:tres});
});

Palabra clave

tabTrigger se utiliza para definir con que palabra clave queremos que se muestre el snippet.

Scope

scope tiene como objetivo especificar en qué lenguaje de programación (Ver lista) queremos que el snippet se pueda insertar.

<scope>text.html, source.js</scope>

Consejo profesional: La mejor forma de conocer los diferentes alcances (scopes) asociados a un archivo, es mover cursor a diferentes posiciones y teclear ctrl + shift + p para abrir un menú emergente.

Variables predefinidas

Los Snippets tienen algunos nombres de variables predefinidos que tienen un significado especial:

  • ${cursor} o $0 se utiliza para indicar la posición final del cursor en la salida generada. Si no aparece en el Snippet, el cursor se posicionará al final de este.