Sublime Text 2 Snippets

Sublime Text 2 Snippets

Bienvenido a la segunda parte de la Guía definitiva de Sublime Text 2. En este artículo explicaré que son los snippets (también conocidos en castellano como fragmentos de código), como crearlos, donde se guardan, etc.

Empezaremos desde la creación y utilización de un snippet básico hasta la utilización de variables/parámetros en snippets.

¿Cómo crear snippets en Sublime Text 2?

Para comenzar a crear nuestro primer snippet clicaremos en Tools > New Snippet

Sublime Text 2 Snippets

A continuación se nos abrirá un nuevo archivo "untitled" que es la plantilla básica proporcionada por Sublime Text 2.

Sublime Text 2 Snippets

La plantilla anterior da una visión general y muy básica de lo que debe hacer. Veámoslo mejor con un ejemplo :)

Paso1: Creando nuestro primer Snippet

Supongamos que queremos crear un snippet que nos facilite la creación de una estructura de un documento HTML5, para ello necesitaríamos crear el siguiente fragmento:


<snippet>
     <content><![CDATA[

        <!DOCTYPE html>
          <html>
              <head>
                   <title>Título</title>
              </head>

              <body>
                   <h1>Título</h1>
              </body>
          </html>

    ]]></content>

 <!-- Opcional: Establece un tabTrigger. Activa el fragmento de código escribiendo la palabra escrita entre las etiquetas y pulsando TAB -->
   <tabTrigger>htmlcinco</tabTrigger>

 <!-- Opcional: Establece el ambito del snippet. Este fragmento sólo estará disponible en un documento con extensión .html -->
   <scope>source.html</scope>
</snippet>

Paso2: Guardar el snippet

Ya tenemos nuestro primer snippet de Sublime Text 2 creado, ahora tenemos que guardarlo, pulsa Ctrl+S (Cmd+S en MAC) y ponle un nombre descriptivo, es importante que lo guardes con la extensión ".sublime-snippet" y en la carpeta correcta: /Sublime Text2/Packages/User sino no te funcionará.

Guardar snippet

Utilización del snippet

Para utilizarlo es tan sencillo como abrir un archivo nuevo de tipo html, escribir "htmlcinco" y Tabulador, aparecerá el fragmento de código. Sino te funciona puede ser por:

  • Verifica que el nuevo archivo que acabas de crear tiene extensión .html ya que en el Scope hemos indicado source.html (o bien elimina la etiqueta scope del snippet)
  • La extensión con que has guardado el snippet no es la correcta
  • No has guardado el snippet en la carpeta correcta
  • No has indicado un tabTrigger o bien el nombre que le has asignado no es "htmlcinco"

Creación de snippets con utilización de variables

En el anterior ejemplo, hemos visto que tanto en la etiqueta <title> como en el <h1> hemos puesto "Título", lo que queremos es que en ambas etiquetas figure el mismo texto. Vamos a editar nuevamente nuestro snippet y lo dejaremos de la siguiente forma:


<snippet>
     <content><![CDATA[

        <!DOCTYPE html>
          <html>
              <head>
                   <title>$1</title>
              </head>

              <body>
                   <h1>$1</h1>
              </body>
          </html>

    ]]></content>
   <tabTrigger>htmlcinco</tabTrigger>
</snippet>

Ahora cuando escribas htmlcinco+[Tab] el cursor estará situado entre las etiquetas title y h1 y al comenzar a escribir se rellenarán ambas etiquetas. Esto es debido a que hemos utilizado la variable $1 para ambos casos.

Snippet con variables

Creación de snippets con diferentes variables

Veamos otro ejemplo de snippet pero en este caso haciendo uso de diferentes variables. Supongamos que queremos crear un snippet que nos permita introducir facilmente la propiedad de css "animation". Como tiene muchos parámetros nos puede resultar útil para no tener que memorizarlos. Como en este caso necesitamos que se ejecute sólo en css añadiremos el scope "source.css".


<snippet>
     <content><![CDATA[

-webkit-animation: ${1:name} ${2:duration} ${3:ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier(<number>,<number>,<number>,<number>)} ${4:delay} ${5:infinite|<number>} ${6:normal|alternate};

-moz-animation:    ${1:name} ${2:duration} ${3:ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier(<number>,<number>,<number>,<number>)} ${4:delay} ${5:infinite|<number>} ${6:normal|alternate};

-ms-animation:     ${1:name} ${2:duration} ${3:ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier(<number>,<number>,<number>,<number>)} ${4:delay} ${5:infinite|<number>} ${6:normal|alternate};

-o-animation:      ${1:name} ${2:duration} ${3:ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier(<number>,<number>,<number>,<number>)} ${4:delay} ${5:infinite|<number>} ${6:normal|alternate};

animation:         ${1:name} ${2:duration} ${3:ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier(<number>,<number>,<number>,<number>)} ${4:delay} ${5:infinite|<number>} ${6:normal|alternate};

    ]]></content>
   <tabTrigger>animation</tabTrigger>
   <scope>source.css</scope>
</snippet>

Como puedes ver en este ejemplo existen más de una variable, si creas una nueva hoja de estilo y luego escribes: "animation+[Tabulador]" verás el cursor situado en el primer parámetro, si a continuación pulsas [Tabulador], verás como el cursor se desplaza hasta el segundo parámetro, y así hasta llegar al sexto.

Atajos de teclado para los snippets

Si en lugar de crear tabTrigger para los snippets, prefieres asignarle atajos de teclado, también puedes, sólo tienes que, acceder a las Preferencias de Sublime Text 2 y escoger Key Bindings - User.

Introduce el atajo de teclado con la estructura siguiente:


[
 { 
   "keys": ["ctrl+shift+<"], 
   "command": "insert_snippet", 
   "args": { "name": "Packages/User/dochtml5.sublime-snippet" } 
 }
]

Donde en key tendrás que espeficar la combinación de teclas, en command, nombre del comando y en args la localización del snippet.

Puntos a tener en cuenta:

  • Todos los snippets han de ir entre la etiqueta "content" después del CDATA.
  • El tabTrigger es opcional, si no especifícas un tabTrigger podrás utilizar el snippet pulsando Ctrl+Shift+P en Windows (Cmd+Shift+P en Mac) escribe el nombre de tu fragmento y pulsa Enter para insertarlo o bien añadiéndole un atajo de teclado.
  • El campo Scope también es opcional. En el supuesto caso de que tengas muchos snippets te puede resultar interesante limitarlos por tipo de extensión. Ejemplo: source.python, source.php, etc.
  • Puedes hacer uso de tantas variables como desees
  • Recuerda guardarlo con la extensión: .sublime-snippet y en el directorio correspondiente, sino no te funcionará

Eso es todo de momento, espero que os haya gustado esta mini-guía :)