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:
1<!doctype html> 2<html> 3 <head lang="es"> 4 <title></title> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width"> 7 </head> 8 <body> 9 10 </body> 11</html> 12
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.
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).
- Escribe la abreviatura con la que invocarás al snippet cuando lo necesites.
- Escribe una descripción para que recuerdes que hace ese snippet.
- Escribe el código del snippet
- Inserta variables usando el signo
$al inicio y al final. Las variables serán posiciones del cursos al expandir el snippet. - 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.
- Puedes escoger que tecla expandirá el snippet.
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.