Creando un snippet en sublime text
<Hola>, cuando estas programando muchas veces repites funciones o estructura de código para las aplicaciones que estás creando, puede ser muy tedioso estar tecleado una y otra vez lo mismo, te puede hasta aburrir y una función como programadores que somos es optimizar nuestro tiempo y recursos.
Para ellos le enseñare a crear un snippet con el programa Sublime text, hasta ahora no hay diferencia entre la estructura de como crear un snippet en sublime text 2 o 3, asi que no se preocupen por las versiones.
Primero vamos al y le damos clic a la opción “Tools” y luego a la opción “New Snippet…”
Y luego nos saldra un codigo de ejemplo como el siguiente.
Con este código podemos comenzar a crear nuestro snippet, primero que nada, dentro de las etiquetas “<content>” va nuestro código que queremos, este elemento “<content>” siempre debe de tener dentro las etiquetas “<![CDATA[” al inicio y al final “]]>”.
En este código en particular vemos unas etiquetas como esta “${1:this}” esto nos indica que será la primera opción a modificar después de haber ejecutado el snippet y por defecto tendrá la palabra “this”, esta palabra por defecto lo puedes cambiar a otra cosa como”${1:hi}” y tendrás impreso la palabra hi, si damos un segundo “tab” después de haber ejecutado el snippet, nos llevará a la siguiente etiqueta “${2:snippet}”, que por defecto tiene impreso la palabra snippet.
Luego debemos de quitar las etiquetas de comentarios a “<tabTrigger>” y a “<scope>” y debe de quedar así.
La etiqueta “<tabTrigger>” nos sirve para indicar con qué palabra es llamado el snippet, es importante ponerle nombres claves que no se repitan con las palabras reservadas de los lenguajes de programación para no causar conflictos.
Ahora la etiqueta “<scope>” nos sirve para indicar con qué lenguaje será válido el uso de este snippet, aquí vemos que está para pyhton pero para esta ocasión lo voy a cambiar para el uso de Typescript.
Y nos quedara asi.
[code language=”xml”]
<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.ts</scope>
</snippet>
[/code]
Lo guardamos.
Es importante que tenga la extensión “.sublime-snippet” para que lo reconozca sublime text, ahora vamos a probarlo, solo colocando la palabra “hello” y haciendo un tab nos aparecera el codigo del snippet.
Y finalmente tenemos creado nuestro primer snippet, ahora ustedes puede determinar que fragmento de código repiten varias veces al momento de programar y crear un snippet para facilitar su trabajo.
</Saludos>