Crear snippets con sublime text

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.

sublime-logo
sublime-logo

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…”

01-creando-snippet
01-creando-snippet

 

Y luego nos saldra un codigo de ejemplo como el siguiente.

02-codigo-ejemplo-snippet-sublime
02-codigo-ejemplo-snippet-sublime

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í.

03-sin-coment-snippet
03-sin-coment-snippet

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.

04-guardar-snippet-subl
04-guardar-snippet-subl

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.

05-ts-snippet-subl
05-ts-snippet-subl
06-snippet-final
06-snippet-final

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>

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *