Snippets en Sublime Text 3

Sublime Text 3 nos permite crear snippets de forma muy fácil, los snippets son archivos que se guardan en nuestro editor con la extensión “.sublime-snippet” y nos simplifica mucho el trabajo al desarrolar o maquetar, por lo que aumenta nuestra productividad, básicamente lo que hacen estos archivos es crear fragmentos de código pre-definidos a los cuales podemos acceder mediante una llamada también predefinida.

El procedimiento es muy sencillo, nos desplazamos en el editor de Sublime a “Tools>Developer>New Snippet”, se creará entonces un archivo nuevo, la extensión del archivo se crea por defecto, no tenemos que escribirla, por lo que si guardamos con el nombre “bt-car” se creará el archivo como “bt-car.sublime-snippet” de forma automática, no obstante nos aseguramos de que la extensión .sublime-snippet se ha guardado de forma correcta.

Al crear un nuevo snippet nos encontramos con el siguiente código

<snippet>
	<content><![CDATA[
Hello, ${1:this} is a ${2:snippet}.
]]></content>
	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
	<!-- <tabTrigger>hello</tabTrigger> -->
	<!-- Optional: Set a scope to limit where the snippet will trigger -->
	<!-- <scope>source.python</scope> -->
</snippet>

<content>
La etiqueta content es donde va el contenido que queremos generar, específicamente dentro de corchetes CDATA

<content><![CDATA[
Este es el código que vamos a generar
]]></content>
</snippet>

Variables
Las variables son opcionales y lo que hacen básicamente es posicionar el cursor y desplazarse ordenadamente por las variables mediante el tabulador, por lo que al generar el código nos será más fácil completarlo o modificarlo. Se utilizan con el simbolo $ y la posición entre llaves “${1}” o bien de esta otra forma “${1:texto}” donde “texto” será el lugar donde se posiciona el cursor, tenemos que tener en cuenta que si queremos escribir el simbolo $ en nuestro snippet para que se ejecute en el código resultante debemos escribirlo con la barra invertida “\$”

<!– <tabTrigger></tabTrigger> –>
Se utiliza para indicarle al snippet el texto que vamos a escribir para que se ejecute.

Nuestro primer snippet
Vamos a ver un ejemplo básico con las cosas que hemos visto hasta ahora, vamos a crear una apertura para jquery, el ejemplo sería el siguiente

<snippet>
	<content><![CDATA[
\$(function(){
	${1}
});
]]></content>
	<tabTrigger>jquery-start</tabTrigger>
</snippet>

Tengo que destacar 2 cosas, la primera es que en la línea 3 he tenido que recurrir a la barra invertida para que se pueda generar el simbolo $, ya que las variables utilizan este simbolo, en segundo lugar y como consejo de “Buenas prácticas”, es nombrar a los archivos del mismo modo que llamemos al tabulador (tabTrigger) y utilizar siempre en el nombre el lenguaje de programación para tenerlos mejor ordenados.

Lo guardamos como jquery-start.sublime-snippet y ya podemos ejecutarlo, escribimos jquery-start y tabulamos, el código se escribe de forma automática y el cursor se posiciona en el lugar definido con ${1}, podemos escribir tantas variables como queramos e ir recorriendolas con el tabulador.

Veamos otro ejemplo

<snippet>
	<content><![CDATA[
@media(min-width: ${1:992}px){
	${2}
}
]]></content>
	<tabTrigger>css-responsive</tabTrigger>
</snippet>

El resultado sería

    @media(min-width: 992px){
    	
    }

El cursor se posiciona en primer lugar en “992” y si tabulamos se pasa a la posición “${2}”.

<scope>source.python</scope>

Con esta tag podemos definir el lenguaje en el que debe ejecutarse el código, podemos definir prácticamente todos los lenguajes de programación o al menos los más utilizados, la forma de definir más lenguajes es separados por comas:

<scope>source.css,text.html(.basic),text.html.jsp,source.js,source.php</scope>

Existen todas estas extensiones

source.actionscript.2,
source.applescript,
source.asp,
source.dosbatch,
source.cs,
source.c++,
source.clojure,
source.coffee,
source.css,
source.d,
source.diff,
source.erlang,
source.go,
source.dot,
source.groovy,
source.haskell,
text.html(.basic),
text.html.jsp,
source.java,
source.java-props,
text.html.javadoc,
source.json,
source.js,
source.bibtex,
text.log.latex,
text.tex.latex.memoir,
text.tex.latex,
source.css.less,
text.tex,
source.lisp,
source.lua,
source.makefile,
text.html.markdown,
text.html.markdown.multimarkdown,
source.matlab,
source.objc,
source.objc++,
source.camlp4.ocaml,
source.ocaml,
source.ocamllex,
source.perl,
source.php,
source.regexp.python,
source.python,
source.r-console,
source.r,
source.ruby.rails,
text.haml,
source.sql.ruby,
source.regexp,
text.restructuredtext,
source.ruby,
source.sass,
source.scala,
source.shell,
source.sql,
source.stylus,
source.tcl,
text.html.tcl,
text.plain,
text.html.textile,
text.xml,
text.xml.xsl,
source.yaml

Y esto es todo lo básico sobre como crear snippets en Sublime Text 3, matizar que por cada snippet hay que crear un nuevo archivo y que la ruta por defecto en Windows donde se guardan es C:\Users\Tu_usuario\AppData\Roaming\Sublime Text 3\Packages\User

Espero que os sirva de ayuda