🖖 Inicio

SERVICIOS

Salir

nochedía

Cómo utilizar snippets de código con VSCode

500 palabras
2 minutos
July 10, 2019
blogvscode

Te enseño cómo utilizar snippets en VSCode, tu editor favorito para programar en JavaScript

  1. Que son los snippets?
  2. TextExpander y compañía
  3. Cómo crear snippets en VSCode?
  4. Configuración de VSCode
  5. Añadir puntos de inserción
  6. Software

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

Brillante 🤯😎

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 tremendo

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? Y además, es que es gratuito 🤪🥳

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
"console.log": {
"prefix": "con",
"body": [
"console.log('hola')"
],
"description": "console.log"
}

y al escribir con nos saldrá el snippet que hemos configurado (no tan rápido 👇 )

Configuración de VSCode

No iba a ser tan sencillo 😁

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

Pero ojo! porque tu archivo de user snippets sólo sirve para el lenguaje que hayas seleccionado, es decir, tendrás que replicar ese archivo para todos los lenguajes con los que quieras tener acceso a esos snippets

Y si bien esto puede parecer una obviedad, si trabajas con React tendrás archivos JavaScript, JavaScript React y Markdown React (y posiblemente otros), y para mi los Markdown React no funcionan bien y tengo que utilizar los Markdown clásicos

Añadir puntos de inserción

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

Claro que sí, y además es muy fácil de implementar, se añaden para esos insertion points las variables $1, $2, etc

json
"console.log": {
"prefix": "con1",
"body": [
"console.log('mensaje: $1')"
],
"description": "console.log"
}

Y puedes saltar entre los distintos insertion points con el Tab (aunque en este caso sólo tenemos uno y no será necesario)

user snippets con vscode

Software

Y como no podía ser de otra manera hay todo un ecosistema de managers de snippets que nos harán la vida más fácil

  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
Qué tal la entrada?
👌 Bien 🙌🙌
👍 Bien, pero algunas cosas podrían explicarse mejor 😬
🤷‍♂️ Da por sentadas demasiadas cosas 😒
🤷‍♂️ A ver, hay poca chicha 😬
🤷‍♂️ Los ejemplos no son muy claros 🙇‍♂️
🤷‍♂️ No se entiende, está mal escrito 👎
✍️ Hay errores, revísalo en cuanto puedas 🙏

Newsletter de kuworking, un correo de tanto en cuanto

Quizá te interese

Privacidad
by kuworking.com
[ 2020 >> kuworking ]