Snippets (Plantillas) en Sublime Text

Cuando hacemos un sitio o programa muchas veces utilizamos código que repetimos muchas veces durante todo el proceso, como por ejemplo llamadas SQL a la base de datos, código CSS largo y repetitivo como agregar sombras, etc.

Seguramente al leer lo anterior te vinieron a la cabeza muchas opciones donde utilizas el mismo código una y otra vez, pues bien, si usas Sublime Text hay una manera de hacerlo menos tedioso o más rápido utilizando los Snippets.

Estos son plantillas configurables para insertar código más rápido, la forma de usarse es escribiendo el texto de llamada de la plantilla y presionando TAB... muy simple no?

Para crear un nuevo Snippet vamos a Tools -> New Snippet

Esto nos abrirá una nueva tab 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> ​


Como puedes observar, se trata de un archivo XML simple y que al guardarlo deberá tener la extensión .sublime-snippet

No entrare con mucho detalle en las opciones de las plantillas, para eso te sugiero que visites el sitio Plantillas de Sublime Text donde encontrarás una amplia referencia, por ahora me centrare en un ejemplo practico.


Insertar una llamada a SQL con PHP y MySQL


Si tu proyecto requiere agregar varias veces sentencias SQL el siguiente Snippet te podrá servir mucho, obviamente podrás adecuarlo a tu necesidad, este es un simple ejemplo:

<snippet>
 <content><![CDATA[
 \$${1:this} = "SELECT * FROM ${2:from} WHERE ${3:where}";
 \$${4:resultado} = mysqli_query(\$${5:conexion}, \$${1:this});
 \$${6:array} = mysqli_fetch_array(\$${4:resultado});
]]></content>
 <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
 <tabTrigger>sql</tabTrigger>
 <!-- Optional: Set a scope to limit where the snippet will trigger -->
 <scope>source.php</scope>
</snippet>

Guardamos nuestro archivo con la extensión .sublime-snippet y reiniciamos (opcional pero recomendable) nuestro Sublime Text.

Que hice:
En la sección content puse el código para el SQL en PHP que daría como resultado algo asi:
$this = "SELECT * FROM from WHERE where";
$resultado = mysqli_query($conexion, $this);
$array = mysqli_fetch_array($resultado);


En el código del Snippet verás cosas como \$${1:this}, donde \$ le indican que agregue literalmente un signo de $, después esta ${1:this}, estos son campos, donde el 1 indica el orden de tabulación y this es un nombre descriptivo opcional, pudieras solo usar $1.

Pero ¿que es lo que hacen los campos?, te permiten, una vez insertado el Snippet en el código modificar facilmente esos valores moviendote entre ellos usando TAB y CTRL TAB, obviamente el orden de recorrido lo indicarán los numeros asignados. Si deseas agregar un punto de salida usa el valor $0

Lo de los campos es opcional y son para facilitar la edición del texto resultante.

Sección tabTrigger indica el texto que llamará a la plantilla en nuestro código, en este caso es sql, recuerda que para insertar el resultado deberás escribir sql + TAB donde quieras que el código sea insertado.

En mi caso utilice la opción scope para indicar que este Snippet solo pueda usarse en un archivo PHP, esto puedes omitirlo si lo deseas.

Ejemplos practicos

Usar box-shadow y sus variantes (CSS)
<snippet>
 <content><![CDATA[
-moz-box-shadow: ${1:hor}px ${2:ver}px ${3:des}px ${4:color};
-webkit-box-shadow: ${1:hor}px ${2:ver}px ${3:des}px ${4:color};
box-shadow: ${1:hor}px ${2:ver}px ${3:des}px ${4:color};
]]></content>
 <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
 <tabTrigger>shadow</tabTrigger>
 <!-- Optional: Set a scope to limit where the snippet will trigger -->
 <scope>source.css</scope>
</snippet>​


Usar border-radius y sus variantes (CSS)

<snippet>
 <content><![CDATA[
border-radius: $0px;
-moz-border-radius: $0px;
-webkit-border-radius: $0px;
-khtml-border-radius: $0px;
]]></content>
 <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
 <tabTrigger>border</tabTrigger>
 <!-- Optional: Set a scope to limit where the snippet will trigger -->
 <scope>source.css</scope>
</snippet>


Si deseas compartir tu Snippet envíamelo y lo publico aquí.