Haciendo snippets con yasnippet

Hace muuucho tiempo prometí que escribiría una guía sobre cómo usar emacs para programar cosas web, y luego me olvidé ‘¬’

bueno, hoy lo volví a recordar XD

Recordarás que ya había escrito algo sobre cómo instalar yasnippet , esta vez quisiera compartir algunos snippets rápidos que creé, y que ahora los uso todo el tiempo mientras programo “cosas” web.

Pero más que compartir snippets ya hechos, quiero mostrarte cómo crear tus propios snippets, y algunas ideas para usar los snippets para aprender a usar librerías nuevas. Pero vamos en orden XD

No es necesario, pero talvez quieras instalarte primero web-mode (que te proveerá highlighting para php).

Lo que sí necesitarás, es yasnippet.

0. ¡¿qué es un snippet?!

Un snippet es un trozo de código que puedes “invocar” con una palabra clave. (Como el

 syso -> System.out.println(); de eclipse 

)

1. Haciendo tu propio snippet

Para crear un snippet para un mode de emacs, necesitas crear un archivo con la información del snippet en el directorio

 ~/.emacs.d/snippet/xxx-mode 

. En donde ‘xxx’ es el nombre del mode.

Por ejemplo, si quiero crear un snippet para javascript, tengo que crear un archivo llamado

 ~/.emacs.d/snippet/js-mode/mi-snippet 

.

El contenido de ese archivo debe ser algo así:

 
  # name: nombre
  # key: clave
  # --
  hola snippet

“clave” es la palabra clave que usarás para invocar al snippet. Puedes tener varios snippets con la misma clave, y allí es donde entra la importancia del “nombre”. Cuando tienes varios snippets que invocar con la misma palabra clave, te saldrá un menú desde el que puedes elegir cuál es el snippet que quieres elegir. Si le haz puesto nombre a tu snippet, entonces, el texto que esté en “nombre”, será el texto que se mostrará en ese menú.

Ahora, para probar tu nuevo snippet, abre un archivo javascript: “archivo.js”, luego: “M-x yas-reload-all” (eso hará que el snippet que acabas de crear se registre, sin tener que reiniciar tu emacs), ahora, en ese archivo, escribe “nombre”, y presiona “TAB” (o la tecla que uses para expandir un snippet). Si lo haz hecho bien, la palabra “nombre” debería desaparecer, y en vez de ella, apareció “hola snippet” (que es el código predefinido que escribimos en el snippet)… … genial, no? :D

Se pueden hacer cosas más complicadas con un snippet. Puedes poner campos de texto dentro del código predefinido… es complicado de explicar XD lo entenderás mejor si lo pruebas…

1.1 Un ejemplo dice más que mil palabras.

Antes de leerte todo este blog, talvez quieras probar este snippet, que probablemente despejará todas tus dudas, y así puedas saltarte a la 2da parte: usando snippets para aprender cosas nuevas.

 
  # name: un snippet esclarecedor
  # key: tutorial
  # --
  for (int ${1:i}=${2:0}; $1 < ${3:n}; ${4:$1++}) {
    $0
  }

Entendido? no? bueno… entonces lee el resto del blog XD

1.2 Un snippet más complicado

Ahora, haremos un snippet para hacer un div. Generalmente, cuando hacemos aplicaciones web, queremos hacer divs, y estos divs suelen tener clases diferentes. El div es el mismo, lo único que cambia, es su clase (y talvez, su id), algo así:

 
  <div class="esto siempre cambia" id="y esto también">  
    este es el contenido del div :P
  </div>

Vamos a hacer un snippet para “optimizar” el div xD

Crea un snippet llamado

 ~/.emacs.d/snippet/html-mode/tutorial-div 

el contenido es:

 
  # name: div class id
  # key: div
  # --
  <div class="$1" id="$2"> $0 </div>

Este snippet es igualito al que hicimos antes, la única diferencia son los “$”. Abre un archivo html y pruébalo por tu cuenta.

Notarás que el cursor ya no está al final del código predefinido, ahora está en “$1”, y el “$1” ha desaparecido. Prueba escribir algo, y a continuación, presionar “TAB”. Ahora el cursor se detuvo en el “$2”. Escribe algo de nuevo, y presiona tab. Ahora, el cursor se detuvo en $0, y el fondo de lo que escribes ya no está resaltado. “El snippet ha terminado”, y el cursor se quedó en $0.

1.3 Un snippet con texto por default

Suele pasar que, una porción de texto del código necesita ser cambiada, pero no muy seguido… por lo general, no cambia. Para esto, se le puede poner texto por defecto a cada snippet.

Por ejemplo, cuando comenzamos a hacer una página web, el idioma suele ser el español, pero podría ser otro.

Este snippet llamado

 ~/.emacs.d/snippet/html-mode/tutorial-html 

, escribe el esqueleto de un html:

 
  # name: esqueleto de html
  # key: html
  # --
  <!DOCTYPE html>
  
  <html lang="${1:es}">
    <head>
      <meta charset="${2:utf-8}" />
      <title>$3</title>
    </head>
    
    <body>
      $0
    </body>
  </html>

De nuevo, abre un archivo html, reinicia yasnippet con “M-x yas-reload-all”, y prueba el snippet con “html” “TAB”. Esta vez, el cursor se detendrá en lang=”…”, y, por defecto, estará escrito “es”, pero… en cuanto escribas algo, se borrará “es”, y se reemplazará por lo que escribas. Lo mismo pasará con charset. Luego, en title, pasará lo que ya expliqué en la sección anterior, y el snippet terminará, y el cursor se quedará dentro de body.

1.4 Reusando el texto

A veces, queremos reusar el texto que ya hemos escrito (como con los \begin{environment} \end{environment} de LaTeX, o con los tags de html).

Este es uno de los snippets que tengo en mi “arsenal” XD

 
  # name: generic tag
  # key: <
  # --
  <$1$2> $0 </$1>

De nuevo, abre un archivo html, reinicia yasnippet, y prueba el snippet que acabas de hacer escribiendo “<" "TAB". en $1, escribes el nombre del tag, observa cómo lo que escribes al abrir el tag, también se escribe cerrando el tag. Al presionar tab, puedes escribir las opciones del tag. Por último, el snippet se sale, y el cursor se queda en $0.

La segunda parte: usando snippets para aprender cosas nuevas, la escribiré después, me da flojera XD

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s