Al empezar a usar VSCode me enteré de los snippets y cree algunos muy buenos, pero por alguna razón no los uso mucho. Recordar los prefijos muy cortos que puse no me ayudó de mucho y creo que ese fue mi punto débil.
¿Qué son los snippets?
Los snippets en Visual Studio Code1 son fragmentos de código reutilizables que puedes llamar con un atajo de teclado o con prefijos mientras escribes en el editor.
VSCode te sugiere ayuda con IntelliSense al estar escribiendo. Entre ellas se encuentran los snippets que se identifican por un cuadrado, el prefijo utilizado y el título del snippet.
Scope en los snippets
Gracias al scope de los snippets es que VSCode sugiere los snippets que puedas usar en el archivo basado en el lenguaje y/o proyecto.
-
Scope global: Es útil porque se pueden usar todos los snippets que definas independietemente del proyecto y del lenguaje que usemos.\
-
Scope de lenguaje: Estos son snippets basados en el lenguaje que usemos, este lenguaje se puede cambiar con ctrl+k seguido de la tecla m.
-
Scope de proyecto: Solo se pueden usar en un proyecto específico. Es útil porque se puede compartir con el proyecto.
Importante:
- Para definir el scope global se dirige a las opciones con ctrl+shift+p y buscar
preferences: Configure User Snippets > new global snippets file, te pedirá un nombre del archivo global y creará el archivojsondonde se puede empezar a crear los snippets. - Para definir el scope del lenguaje en opciones
preferences: Configure User Snippetsse busca el lenguaje deseado y abrirá el archivo donde se pueden empezar a crearlos. - Para definir el scope por proyecto en opciones
preferences: Configure User Snippets > New Snippets file for "project name"te pedirá el nombre del archivo y crea una carpeta si no existe llamada.vscodedonde se encuentra el archivo que tenemos que editar.
Crear snippets propios
Una vez elegido el scope y ya dentro de nuestro archivo podemos crear nuestro primer snippet.
Notas:
El primer key es el nombre del snippet y dentro de este va un objeto con 3 elementos:
- Prefix: Es el prefijo con el que llamaremos al snippet. Algunas personas le ponen algo al inicio para reconocer los snippets propios, como por ejemplo
_c. - Body: Es el código a usar.
- Description: Es la descripción de ayuda que aparecerá al darle en más detalles como se vio al inicio (opcional).
El anterior snippet es el ya visto en la primera sección, expliquemos que pasa en el body: Primero tenemos a $LINE_COMMENT, esto es una variable predefinida por visual studio code. La sintaxis de estas variables empieza por el símbolo $, .
Tip: Gracias a que la variable $LINE_COMMENT nos ayuda a poner comentarios sin tener que preocuparnos por el lenguaje, hace que este snippet sea perfecto para el scope global.
El símbolo $0 es muy importante. $0 indica la posición en donde va a acabar nuestro cursor al seguir pulsando tab. Si este valor es mayor a 0 irá de manera ascendente hasta llegar al final 0.
| Orden en body | $1 | $0 | $3 | $2 |
|---|---|---|---|---|
| Posición del cursor | 1 | 4 | 3 | 2 |
Variables predefinidas y variables con opciones
Para darle un nombre predeterminado a una variable se le agrega :nombre después del número de variable. Y para crear una variable con opciones, al igual seguido del número separamos las opciones por coma y las envolvemos dentro de los símbolos ||.
En el siguiente ejemplo tenemos dos variables predefinidas y una opcional.
- Variables predefinidas:
${1:document}y${0:element}. - Variable opcional:
${2|querySelector, getElementById, getElementsByClassName, getElementsByTagName|}.
Múltiples líneas
Por ahora hemos visto snippets de una sola línea, pero el body también puede ser un array de multiples cadenas de texto, donde cada cadena de texto sería un salto de línea y lo podemos indentar con \t, si es el caso que queramos usar todo en una sola línea podemos usar el salto de línea de \n.
Transformaciones
El siguiente ejemplo contiene un caso común si estás familiarizado con React, crea un fragmento que envuelve al texto con variable predefinida del texto seleccionado.
Podemos transformar las variables, ya que aceptan expresiones regulares. En el siguiente ejemplo transforma un arrow function a una verbose function, los pasos para realizarlo son los siguientes:
- Escribe primero la primera línea
export default function. - Toma el nombre del archivo con la variable
TM_FILENAME_BASE. - Pega el texto seleccionado. Este contiene la expresión regular que hace match con la primera y última línea y las remplaza por un espacio vacío.
En la parte final es donde se remplaza lo que hace match de regex en //gm /<texto a remplazar>/gm y g es el contexto global de regex y la m que tomará en cuenta que contenga múltiples líneas para poder seleccionar ambas.
El fragmento y la transformación se verían de la siguiente manera:
Llamar a los snippets
Ya hemos visto una forma de llamar a los snippets que es con los prefijos que definimos, pero hay otras formas.
En las opciones ctrl+shift+p buscamos insert snippet y nos dará una lista con los snippets que podemos usar.
Otra opción que podemos usar con los snippets que más usamos a diario es con atajos de teclado. Es una forma un poco más rápida, pero con la desventaja de tener menos opciones a la mano y que sean difícil de olvidar si tenemos muchos.
Estos atajos los podemos definir en el archivo keybindings.json, lo podemos encontrar usando el atajo ctrl+p y escribiendo en la barra de búsqueda keybindings. En este archivo podemos definir igual un snippet de la siguiente forma:
También podemos referenciar nuestros snippets ya creados de la siguiente forma:
Conclusión
Los snippets nos pueden acelerar a la hora de codear, pueden ser texto simple o código dinámico incluyendo opciones y valores predefinidos. Son de ayuda, ya que de esta forma no necesitamos recordar la sintaxis exacta de una porción de código, la guardamos en un snippet y la reutilizamos.
Referencias
-
Visual Studio Code Snippets in Visual Studio Code ↩
