hand Inicio
hand JSBloqs
hand GutenBloqs
Qu茅?
noched铆a

DESARROLLO WEB con
REACT y WORDPRESS

Ap煤ntate a la newsletter (escribo algo de tanto en cuanto)

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 馃檹
Enviar Feedback 鉁嶏笍
El texto est谩 en blanco!
Gracias por enviarme tu opini贸n
馃憤

Si quieres explorar m谩s cursos y m谩s entradas en el blog, los tienes todos en la p谩gina principal, y si el contenido te ha ayudado si lo compartes me ayudas a dar difusi贸n 馃憤

Privacidad
by kuworking.com
[ 2020 >> kuworking ]