Crear Snippets en SublimeText 2

Buenos días manga de traga-sables a cuatro manos, y una que otra damisela que lee este rincón lleno de basura fétida!

Hoy vamos a aprender otra cosilla bastante útil  y eso es, crear Snippets en el editor hipster por excelencia, el editor por excelencia si queres estar IN negro... «SublimeText 2»

Que, no conoces SublimeText 2 !? Aprovechemos la ocasion negro.

SublimeText 2

SublimeText 2, es un editor de texto plano, IDE, poronga super poderosa o como quieras ponerle, yo le digo “editor de texto plano con esteroides”. Este editor, es “too mainstream” en estos momentos, y según la comunidad developera “no existís” si no usas. Mucho blah blah. Vamos a algo útil.

Donde encuentro a SublimeText 2

La web oficial de Sublime esta acá [1] (hey! vos, que te haces el denso, ya se que esta la beta del 3, pero es beta boludo, es como usar un auto al que le falta frenos eso). Por si sos ciego, claramente hay un enorme botón ahí indicándonos para descargar el editor, o en la parte superior la sugerente palabra «Download»
SublimeText, esta disponible para Windows, Mac OS X y Linux.

Ya tengo el editor y ahora ?

Snippet sencillo

Baja un cambio negro, ni que me pagaras por escribir. Vamos por parte he'i Jack El Destripador, supongamos que queremos generar de manera rápida y sencilla una pagina html. Por ejemplo, que al darle «html5» + «tab» Zá! Aparezca un bloque de código con un template standard html5. Como pajero que sos estaría bueno no, ahorrarte tantos tecleos, tener mas tiempo libre para estar tekorei, el sueño del pibe.

Algo así :
.
.
Ya te estoy convenciendo verdad?. Y ahora estas como Alejo gritando «Y como hay que hacer!?». Bueno, primero. Vamos a Tools -> New Snippet...

No pude hacer captura de pantalla :/ Así que traje de interwebs

Y nos salta algo parecido a esto :

. . «Y que mierda es esto!?», tranquilo negro, no muerde ese xml. Ahi vamos a meter nuestro Snippet. Ves esa partecita que dice 

<![CDATA[ Hello, ${1:this} is a ${2:snippet}.]]> 

, bueno, ahí adentro va nuestro snippet, y lo que esta comentado, bueno, esta bien explicado. Así que lo que hacemos es que se vea algo así :

.
.
Guardamos en donde nos indica por defecto (en el caso que uses Linux como yo seria ~/.config/sublime-text-2/Packages/User/nombre-snippet.sublime-snippet)

IMPORTANTE!: Recorda que tenes que guardar en ese directorio, y que la extensión tiene que ser .sublime-snippet . Y con eso ya esta negro.


Vamos a probrar la maravilla que acabamos de hacer. Abrimos un archivo, escribimos «html5» y tab! Es magiquee! Ves lo fácil que es. Y así de fácil se crea un snippet que nos puede ahorrar millones y millones de horas :)

... que ? Que eso no sirve para un huevo ? Papacho, take it easy, eso no es todo, podemos usar variables dentro!

Variables

Si, variables negro, supongamos que dentro de nuestro snippet html hay campos que queremos completar, por ejemplo, el titulo de la pagina, algunos meta-tags como el author, etc... Pues ves esos $1 al mas puro estilo bash que hay por ahi tirados. Buenos, esos son variables, que ubican el cursor en ese segmento de código y nos permite completar, y al darle un mágico «tab» pasamos a otro campo, y así sucesivamente.
Modifiquemos un poquito el código de nuestro snippet, para que quede algo así.

.
.
Y con eso podemos completar un template html de manera fácil y rápida :)

Pero eso no es todo amigos!

No, aun hay mas Jhony, con el snippet pajilleitor plus 3000, también podemos discriminar los tipos de archivos en los que estara disponible nuestro snippet, y todo eso agregando una linea sencilla (o descomentar en todo caso), y esa linea es:

.
.
Y ahí, por ejemplo, ese snippet solo sera sugerido en archivos html.

Con eso ya estamos negro, ahora sabes lo necesario para crear un snippet en el editor de moda. Y hacerte el Pro delante de todos tus amiguillos.

Si tienen alguna duda, o algún divague, ahí nomas esta la cajita de comentarios. Nos vemos en el siguiente post queridos pajerillos y pajerillas :)