Fragmentos de código VS: la herramienta más poderosa para aumentar su productividad de codificación

Escriba más código con menos pulsaciones de teclas

Todos quieren poder producir más código con menos pulsaciones de teclas. Las funciones de flecha en JavaScript se han vuelto increíblemente populares recientemente, ¡y solo te ahorran 6 caracteres!

(function(){console.log('a')})() // 32 charachters(()=>{console.log('a')})() // 26 charachters

Pero hay una mejor manera de ahorrar mecanografía, y este artículo le mostrará la herramienta para hacerlo.

Fragmentos de código

Durante años, la gente ha utilizado fragmentos de código para ahorrar tiempo, ya sean funciones comunes, estructuras de archivos o incluso plantillas para sistemas completos. Esto no es una idea nueva.

El problema con muchos de los sistemas existentes es que estos fragmentos a menudo se almacenan en archivos de texto u otros sistemas de archivos y deben copiarse y pegarse manualmente donde sea necesario.

Esto fue excelente para fragmentos de código grandes. Pero las frases de una sola línea solían ser más rápidas de escribir que de buscar el archivo, copiarlo y pegarlo.

El siguiente paso fueron herramientas como TextExpander o AutoHotKeys, donde se podían configurar secuencias de teclas especiales para pegar fragmentos de código en cualquier lugar donde estuviera escribiendo. Son geniales y pueden ahorrarle mucho tiempo ... pero podemos dar un paso más.

Fragmentos de código VS

VS Code tiene un sistema que es más poderoso incluso que TextExpander o AutoHotKeys. Sus fragmentos de código incorporados se pueden configurar para hacer mucho más que simplemente pegar el código.

Antes de hablar sobre las funciones sofisticadas, aprenderemos a crear un fragmento.

En VS Code, presione ctrl + shift + P para abrir la paleta de comandos y buscar un fragmento. Al seleccionar 'Configurar fragmentos de usuario' se presenta una lista de idiomas de codificación para los que puede crear un fragmento. Vamos a utilizar JavaScript.

Esto abre el editor de fragmentos. Hay un comentario que le muestra cómo crear un fragmento básico, pero vamos a crear el nuestro.

Este fragmento es mi línea de código favorita. Es un buen patrón para el manejo de promesas.

const handle = prom => prom.then(res => [null, res]).catch(err => [err, null]);

Para crear nuestro fragmento, necesitamos crear una nueva clave en el objeto. Esta clave apunta a un objeto con a prefix, bodyy description.

"insert handle function": { "prefix": "", "body": [], "description": ""}

El prefijo es el texto que queremos ingresar para activar este fragmento. Debe asegurarse de que sea único. Llamarlo handleactivaría el fragmento cada vez que llame a la función para que podamos ir con algo como promHandle.

El cuerpo es una matriz de las líneas del fragmento. Si tiene varias líneas de código, tendrá varias cadenas en la matriz del cuerpo. La descripción es lo que se mostrará cuando vea la sugerencia en VS Code.

Cuando todo esto se completa, obtienes algo como esto:

"insert handlefunction": { "prefix": "promHandle", "body": [ "const handle = prom => prom.then(res => [null, res]).catch(err => [err, null]);" ], "description": "inserting a 'handle' function"}

Con su archivo de fragmentos guardado, cuando comienza a escribir promhandle, obtiene una nueva sugerencia. Al escribir eso, se muestra la descripción del fragmento, así como la primera línea del código.

Ahora puedes ahorrarte cientos de personajes creando tus propios fragmentos. ¡Pero hay algunas características aún más poderosas!

Puntos de inserción de tabulación

Cuando pegas tus fragmentos, generalmente hay bits de información que necesitas agregar. Ya sea para nombrar una función o elegir las variables, puedes establecer puntos en tu código donde necesitas ingresar datos. Cuando pase estos fragmentos, puede tabular entre estos puntos de inserción.

Para agregar un punto de inserción, solo necesita agregar $1el primer punto, $2el segundo y así sucesivamente. Esto es realmente útil para funciones en las que esperan un objeto.

"sendMessage": { "prefix": "sendMessage", "body": [ "await botHelper.sendToUser({message$1, userID});" ], "description": "await sending a message using bot helper"},

Puede tener varios puntos de tabulación repartidos por todo el código, lo que significa que puede completar su fragmento de forma rápida y sencilla sin tener que hacer clic o la tecla de flecha para cada punto.

Fragmentos específicos del idioma

Cuando abrimos por primera vez el editor de fragmentos, se nos presentó una lista de idiomas. Elegimos JavaScript, pero podría haber elegido cualquiera de los otros 44 idiomas. Lo mejor de los fragmentos de código VS es que se pueden bloquear a un tipo de archivo específico.

Si está escribiendo un archivo HTML, no obtendrá todos sus fragmentos de JavaScript o Python. ¡Esto también significa que puede hacer que el mismo prefijo produzca diferentes fragmentos en función del tipo de archivo en el que está trabajando actualmente! Pero no se preocupe, aún puede agregar fragmentos globales si desea poder usarlos en cualquier tipo de archivo.

Fragmentos específicos de ubicaciones

De manera similar a los fragmentos específicos de un idioma, también puede crear fragmentos específicos de carpetas. Esto puede ser genial cuando la misma función nombrada hace algo diferente en dos proyectos diferentes.

Simplemente seleccione New Snippet file for '...'al elegir su idioma.

Creando más fragmentos

Ahora que conoce las poderosas formas en que los fragmentos de código VS pueden mejorar su productividad, probablemente desee generar cargas. Desafortunadamente, su creación puede resultar frustrante. Afortunadamente existen dos soluciones:

Generador de fragmentos

Snippet Generator es un sitio que le permite pegar algún código y convertirlo fácilmente en formato de fragmento.

Es realmente fácil de usar y le permite crear rápidamente fragmentos que puede copiar y pegar directamente en sus archivos de fragmentos. Funcionará con cualquier idioma y es completamente gratuito.

Extensiones de fragmentos

Si usa un marco, como React o Angular, hay muchos fragmentos que querrá crear. Afortunadamente, este es un problema que otras personas han tenido antes, por lo que han creado bibliotecas de fragmentos comunes para cada marco.

Searching for snippets in the VS Code extension marketplace produces hundreds of results that you can install. Everything from React, Angular and Vue to ES6 JS, C# and PHP. These often have a full range of snippets to dramatically cut down you time spent typing.

The one disadvantage of these extensions is that you’ll have to learn what the prefixes (triggers) are, but you’ll quickly memorise the ones you use most.

Thanks for reading this post on increasing your coding productivity with VS Code Snippets. If you’ve learnt something then hit that clap ?button, and follow me for more tips, tricks and tutorials!