hand Inicio
hand JSBloqs
hand GutenBloqs

Cómo utilizar snippets de código con VSCode

Cómo utilizar snippets en VSCode (tu editor favorito)

Que son los snippets?

La traducción de snippet es retazo: un fragmento de cualquier cosa

En código, un snippet se refiere a un código concreto (una línea, una palabra o una función entera) que en este contexto quiere decir el poder insertar ese snippet con un simple atajo de teclado, o que nos aparezca al escribir una palabra concreta

Para qué?

Si por ejemplo somos de los de utilizar console.log('hola') para localizar los errores, utilizar snippets nos servirá para ahorrar el tener que escribir la misma frase 200 veces

TextExpander y compañía

TextExpander (aquí) y sus alternativas son increíblemente populares, y lo son porque el impacto que causan en la productividad es enorme

La ventaja es que te sirven para cualquier programa, estás escribiendo un correo? lo puedes usar, estás escribiendo una nota? también, un mensaje en la web de whatsapp? Una pregunta en GitHub? Al ser un programa externo siempre está allí, funcionando y para todo el mundo

Pero para los que sólo queramos snippets en entornos de programación, por qué no utilizar nuestro editor favorito?

Cómo crear snippets en VSCode?

Nada más sencillo que seleccionar en el menú de arriba File -> Preferences -> User Snippets

Allí podemos seleccionar e ir a los snippets de JavaScript que asimismo abre un archivo javascript.json que en Windows se almacenará en C:\Users\tu_usuario\AppData\Roaming\Code\User\snippets

El propio archivo ya te explica como definir un snippet al uso, y por ejemplo podemos probar el siempre útil console.log

json
  "Print to console": {
"scope": "javascript,typescript,markdown,javascriptreact",
"prefix": "log",
"body": ["console.log('hola')"],
"description": "log output to console"
}

y al escribir con nos saldrá el snippet que hemos configurado el IntelliSense (que si no nos sale podemos mostrar con ctrl + space)

Configuración de VSCode

Luego tienes que activar los snippets en las preferencias en File -> Preferences -> Settings

Y allí, bien con el mismo menu o bien en el archivo aparte, que en el caso del workspace que estés utilizando esto es tan sencillo como crear una carpeta .vscode y allí un archivo settings.json

Y en ese archivo settings.json puedes poner lo siguiente

json
{
"editor.tabCompletion": "on",
"editor.snippetSuggestions": "top",
"editor.quickSuggestions": {
"other": true,
"comments": false,
"strings": false
}
}

Con esto los snippets ya deberían funcionar, siempre que el archivo sea del tipo que has marcado arriba en el "scope"

Añadir puntos de inserción

Y puestos a pedir, estaría bien que pudiésemos editar partes del snippet mientras escribimos de una manera cómoda

Es muy fácil de implementar, se añaden los insertion points con las variables $1, $2, etc

Por ejemplo

json
  "Print to console": {
"scope": "javascript,typescript,markdown,javascriptreact",
"prefix": "log",
"body": ["console.log($1)", "$2"],
"description": "log output to console"
}

Así el cursor se nos aparecerá en $1 y con el Tab podremos pasar directamente a la posición $2 (si queremos)

image

Software

También tienes toda una miríada de software integrado con vscode que te pueden ser de utilidad

  1. Desde snipit.io con integración con vscode, gratuito para snippets públicos y perfecto para tenerlos todos bajo control, o
  2. cacher.io con versión gratuita con _snippets_ privados pero sin integración con _vscode_ (sólo en versión pro), o
  3. snippet-generator.app que te permite transformar tu código a la estructura _json_ de vscode para facilitar la creación de snippets
draw of me

Hola, tienes en mente desarrollar una web?

Si quieres, te ayudo

11ty para webs ultra-rápidaseleventy js
Gatsby para webs complejasgatsby js
WordPress para webs para el usuario finalwordpress

Escríbeme

Lista de correo: escribo algo de tanto en cuanto