miércoles, 17 de julio de 2013

Snippets en Geany y gedit

Los snippets son, según la Wikipedia, "pequeñas partes reusables de código fuente, código binario o texto".
Si son programadores o, como yo, trabajan en diseño web utilizando editores de texto, los snippets son de gran ayuda, ya que permiten ingresar porciones de texto o código predefinidos, de uso reiterativo, con alguna combinación de teclas.
Por ejemplo, si estamos escribiendo código html, podríamos definir un snippet que con solo ingresar la palabra table seguida de un golpe de tabulador muestre en la pantalla lo siguiente:

<table>
   <tbody>
<tr>
      <td>|</td>
      <td></td>
      <td></td>
   </tr>
<tr>
      <td></td>
      <td></td>
      <td></td>
   </tr>
</tbody>
</table>


¡Y con el cursor listo para escribir en la primera celda!.



Otro ejemplo podría ser, escribir listaor, seguido por un tabulador y que en la pantalla se escribiera:

<ol>
<li>|</li>
<li></li>
<li></li>
</ol>


O si se está utilizando php, podríamos definir un snippet que al escribir if seguido de tabulador escribiera;

if (|) {
      
      }
    else {
         
      }


Para que quede más claro, aquí pueden ver los tres ejemplos precedentes en acción en Geany:



Veamos como definir snippets en Geany y en gedit.

Geany

Abra Geany. Vaya a Herramientas / Archivos de configuración / snippets.conf.
El archivo que se abre es el que controla el comportamiento de los snippets en Geany.
Verá que el documento está separado en secciones, según el lenguaje para el que se aplique el snippet en cuestión. Por ejemplo, los snippets propios del lenguaje html se encuentran bajo el subtítulo [HTML].
Para crear un snippet personalizado se debe agregar bajo este subtítulo el texto que activará el snippet, por ejemplo listaor, luego un signo de igual (=) y, a continuación, el código que se generará al escribir esa palabra.
O sea:

listaor=<ol>\n\t<li>%cursor%</li>\n\t<li></li>\n\t<li></li>\n</ol>

Esto quiere decir que, cada vez que se escriba listaor seguido de un tabulador en un documento con extensión html, se generarán, en este orden:
  1. la etiqueta de apertura de lista ordenada (<ol>)
  2. un "enter" o retorno de carro (\n)
  3. un tabulador (\t)
  4. una etiqueta de apertura del primer ítem de la lista (<li>)
  5. la posición predefinida del cursor (%cursor%)
  6. una etiqueta de cierre del primer ítem de la lista (</li>)
  7. un "enter" o retorno de carro (\n)
  8. un tabulador (\t)
  9. las etiquetas de apertura y de cierre del segundo ítem de la lista (<li></li>)
  10. un "enter" o retorno de carro (\n)
  11. un tabulador (\t)
  12. las etiquetas de apertura y de cierre del tercer ítem de la lista (<li></li>)
  13. un "enter" o retorno de carro (\n)
  14. la etiqueta de cierre de lista ordenada (</ol>)
Si en vez de crearse sus propios snippets, quieren aprovechar el trabajo de otros usuarios que ya los hicieron y que, amablemente, lo ponen a disposición, desde gitHub pueden copiar y pegar los de fitorec o de trojkat, entre otros muchos que se pueden encontrar en la web.

gedit

En gedit el procedimiento es muy similar.
Pero primero hay que activar el complemento (plugin). Para ello abra gedit y vaya a la solapa Complementos de la ventana que se abre desde el menú Editar/Preferencias... y asegúrese de marcar el cuadro de verificiación Recortes, como se ve en la siguiente captura:


Hecho esto, puede ir al menú Herramientas/Administrar recortes... y en la barra lateral izquierda de la ventana Administrador de recortes verá una gran lista de lenguajes de programación.
Si, para continuar con el mismo ejemplo anterior, va a la sección del código html, verá que ya vienen muchos snippets o recortes preconfigurados. El código de activación de cada uno es la palabra que aparece en negrita y entre paréntesis al lado del nombre del mismo.
Para crear un snippet personalizado igual al creado con Geany, pinche en el botón Crear un recorte nuevo... y asígnele un nombre (en este ejemplo: "Lista Ordenada") y presione "Enter". Luego, en el campo "Disparador" escriba listaor y en el campo de texto Editar escriba el siguiente código, que será el encargado de generar el recorte en cuestión:


El $1 indica el lugar donde se ubicará el cursor luego de activado el recorte. Pero, además, los siguientes $2 y $3 indican al lugar donde saltará el cursor luego de un golpe de tabulador. Lo que facilitará aún más el uso del recorte en nuestros códigos. El $0 indica la finalización del recorrido del recorte mediante el tabulador.
Con el botón "Exportar el recorte seleccionado" puede guardar su recorte personalizado en un archivo comprimido para cargarlo, mediante el botón  "Importar recortes" en otra instalación de gedit.
Pueden leer más sobre los recortes de gedit en el sitio de gnome. También en tuxradar hay un artículo muy interesante y detallado (aunque en inglés) sobre el tema.

3 comentarios:

  1. Muy buenas Javier, un lujazo de post el de aquí arriba. Se agradecen cosas así en castellano, thx!

    Puedo hacer una pregunta de programador novato?
    Estoy probando con varios editores y el Geany me ha gustado mucho pero incomprensiblemente no me cierra los paréntesis ni los curly brackets{ a pesar de tenerlos marcados en la pestaña de completados en el menú de preferencias.
    Tengo el geany 0.21 en ubuntu 12.04 por si sirve...llevo un rato buscando en internet y no me aclaro.
    Saludos y gracias de antemano,
    Eduardo

    ResponderEliminar
    Respuestas
    1. Eduardo:

      Me alegra que te haya servido esta entrada.
      Con respecto a tu consulta, no sé que contestarte.
      Yo tengo instalado Geany 0.20 en LinuxMint.
      A mí sí me funciona el autocompletado teniendo marcados los cuadros de verificación correspondiente en "Editar/Preferencias/Editor/Completados".
      Creo recordar que en algún momento no me funcionaba si el archivo que estaba escribiendo no estaba guardado o no tenía una extensión que indicara el lenguaje correspondiente.

      Eliminar
    2. Creo q mi geany se había stresado porq después de dejarlo tranquilo unas horas, parece q ahora si me cierra los ( ) { }. Supongo q es habitual para los novatos como yo que las cosas se arreglen sin saber qué botón has apretado para solucionar el problema.
      Saludos y Gracias por responder.

      Eliminar

Lo que escriba a continuación será revisado antes de publicarse.
Gracias por tus comentarios.