Sublime text es uno de los editores de texto preferidos por los desarrolladores por la gran simplicidad, estetica y cantidad de plugins disponibles en la comunidad, uno de éstos que ya viene previamente instalado está definido cómo snippets, que básicamente accesos directos a bloques de códigos los cuáles nos simplifica la labor al programar o maquetar, además de aumentar nuestra productividad cuándo hay código que continuamente repetimos, es por esta razón que esta vez te hacemos está pequeña guía de como Crear Snippets Sublime Text.

Crear Snippets Sublime Text

1.- New Snippet

Lo primero es ir a la pestaña Tools -> Developers -> New Snippet.

Crear Snippets Sublime Text 1

2.- Familiarizarse con la estructura

Una vez que hacemos clic en “New Snippet” veremos la siguiente plantilla:

Crear Snippets Sublime Text 2

Ahora explicaremos que cada elemento:

Etiqueta content:

En la etiqueta content es donde va el contenido de tu código, específicamente dentro de corchete CDATA ahí va a estar todo el código que vamos a incluir.

Las variables ${1:this} y ${2:snippet} son opcionales, funcionan para posicionar el cursor y desplazarse de una variable a otra de forma ascendente tan solo con tabular, puedes añadir todas las variables que requieras, veamos lo un poco más a fondo:

${1}: Por si solo indica que una vez el código se imprima el cursor se debe posicionar en esa posición.

:this: Este es como un texto de ayuda para indicar cuál es el texto que debería de ir allí, así que es opcional.

NOTA: Si colocas el mismo numero de variable en dos o mas lugares distintos de tu codigo con editar el primer se edita el resto.

Etiqueta tabTrigger:

Esta es una etiqueta opcional, tal como explica la plantilla y funciona para añadir la abreviación o acceso directo del teclado a nuestro código, es decir, que con que escribamos nuestra palabra y tabulemos aparezca el contenido.

Etiqueta scope:

Al igual que la anterior está es una etiqueta opcional y funciona para indicarle a sublime en que tipo de archivos y/o extensiones es que va a funcionar el snippet, nosotros particularmente nunca usamos esta etiqueta, ya que si creamos un snippet para html, este no va a funcionar en plantillas php y viceversa.

3.- Ingresar tu código en el content

Ahora que ya sabemos que es y cual es la función de cada etiqueta podemos añadir el contenido de nuestro código, hemos hecho 2 ejemplos, uno para el shortcode de wordpress y otro con la estructura de html5

Ejemplo shortcode:

Para esto usamos este fragmento en el content

Relacionado:  Aumentar las ventas con emails automáticos en woocommerce

y esto en el tabTrigger

Quedando finalmente así:

Ejemplo html5:

Para esto usamos este fragmento en el content

y esto en el tabTrigger

Relacionado:  Crear funciones php en twig

Quedando finalmente así:

4.- Guardar tu snippet

Ahora vamos a guardarlo. Recuerda guardarlo con la extensión .sublime-snippet

Crear Snippets Sublime Text 3

Crear Snippets Sublime Text 4

5.- Usar tu snippet

Ya con nuestro snippet creado solo es cuestion de comenzar a usarlo, para eso existen 2 formas de hacerlo

  • Añadiendo la palabra que agregaste en el tabTrigger y luego tabular
  • Hacer ctrl + shift + p y escribir el nombre de tu snippet.

Crear Snippets Sublime Text 5 Crear Snippets Sublime Text 6

Y eso es todo, si te gusto no olvides compartir y contarle a tus amigos, hasta la proxima