Pasar al contenido principal
Alexys Lozada
José Luján
Manuel Rodriguez
José Luján
Luis Avilés
Álvaro Felipe
José Luján
Beto Quiroga
Jonathan MirCha
Jonathan MirCha
Álvaro Felipe
Alexys Lozada, Álvaro Felipe, Jonathan MirCha
Beto Quiroga
Alexys Lozada
Alexys Lozada
José Luján
Álvaro Felipe
Álvaro Felipe
Jonathan MirCha
Jonathan MirCha
Alexys Lozada, José Luján
Alexys Lozada, José Luján
Alexys Lozada, José Luján
Camilo Adobe
Álvaro Felipe
José Luján
Jonathan MirCha
Álvaro Felipe
Álvaro Felipe
Beto Quiroga, Alexys Lozada
Álvaro Felipe
Juan Villalvazo
Luis Avilés
Jonathan MirCha
Jonathan MirCha
Jonathan MirCha

Cómo crear snippets (live templates) en Webstorm

Crear snippets en Webstorm

Los snippets son porciones de código que solemos reutilizar en nuestro trabajo. Seguro pienses que es lo mismo que una función (porque es código reutilizable) pero un snippet no tiene que ver con programación pues puede ser un trozo de código HTML que es cansado escribirlo a mano cada vez. Por ejemplo, lo siguiente es un snippet:

<!doctype html>
<html>
  <head lang="es">
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
  </head>
  <body>

  </body>
</html>

En este artículo te enseñaré a crear tus snippets en WebStorm, el IDE que utilizo en mi trabajo diario. Aunque aplica para cualquier IDE de la familia JetBrains (Phpstorm, Pycharm, Gogland, etc). El proceso es muy sencillo.

1. Conceptos previos

  • Debes ir a File > Settings (o CTRL ALT S) y dentro buscar Editor (1) > Live Templates (2). También puedes usar el buscador (3)
  • Encontrarás un select (4) para escoger que tecla expandirá el snippet. Por defecto es tab (es lo más cómodo).
  • Debajo (5) verás todos los grupos y lives templates existentes (Webstorm ya trae varios de fábrica).
  • A la derecha (6) verás botones para agregar, eliminar, duplicar o restaurar live templates. Puedes agregar grupos o live templates. Es recomendable agregar primero un grupo para organizarse mejor.
Live Templates en Webstorm (EDteam)

2. Creando tu live template

Una vez que has creado tu grupo (en mi caso EDgrid), vamos a crear nuestro primer Live template pulsando el símbolo + (indicado en el paso anterior).

  1. Escribe la abreviatura con la que invocarás al snippet cuando lo necesites.
  2. Escribe una descripción para que recuerdes que hace ese snippet.
  3. Escribe el código del snippet
  4. Inserta variables usando el signo $ al inicio y al final. Las variables serán posiciones del cursos al expandir el snippet.
  5. Define el contexto del snippet. Si es de JavaScript indica que solo se expanda si estás en un archivo .js y no, por ejemplo, en HTML.
  6. Puedes escoger que tecla expandirá el snippet.
Webstorm Live templates - EDteam

Y eso es todo. A mi me acelera muchísimo el trabajo pues guardo Live templates de EDgrid, de guias de estilos y otras cosas. Y de hecho que a ti también te ayudará si empiezas a usarlos hoy mismo.

En un próximo post te contaré algunos detalles más sobre estos Live templates.

Suscríbete al blog de EDteam

Ingresa tu correo electrónico para recibir nuestro boletín semanal