Maestro de Fragmentos de Código de VS Code para una Codificación Eficiente

Al escribir el último fragmento de código en Visual Studio Code (VS Code), ¿alguna vez te has sorprendido a ti mismo escribiendo lo mismo una y otra vez? Quizás hayas escrito una declaración de función diez veces hoy o hayas definido el mismo conjunto de parámetros en comando por vigésima vez. ¿Sabías que puedes recuperar tu tiempo y tu cordura utilizando los fragmentos de Visual Studio Code?

Los fragmentos de Visual Studio Code son pequeños pedazos de texto almacenados en VS Code. Puedes invocar estos fragmentos a través de un menú o secuencia de teclas y pueden ahorrar mucho tiempo cuando te encuentras repitiendo bloques de texto con pocas diferencias entre cada ocurrencia.

Por ejemplo, a continuación puedes ver que simplemente escribiendo wvb en VS Code, tienes la opción de expandir mucho más texto, como indica el texto Write-Verbose en el cuadro. ¡Este es el poder de los fragmentos!

En este artículo, vas a aprender cómo trabajar con los fragmentos de VS Code, incluyendo el uso de fragmentos predeterminados, fragmentos de extensión, ¡e incluso cómo crear los tuyos propios!

Prerrequisitos

Este va a ser un artículo práctico para que te ensucies las manos. Si planeas seguir aprendiendo cómo trabajar con los fragmentos de VS Code, necesitarás la versión 1.17 de VS Code o superior. Para ser completamente transparente, estaré usando VS Code 1.38.1 en Windows.

Puedes descargar la última versión de VS Code para tu plataforma particular aquí.

Encontrando los Fragmentos de VS Code

Antes de que puedas comenzar a construir tus propios fragmentos (lo cual harás), es importante aprender cómo encontrar los fragmentos integrados disponibles para ti.

Puedes encontrar todos los fragmentos en la interfaz del menú. La interfaz del menú te permite revisar y usar fragmentos. Para acceder al menú, puedes presionar F1 o Ctrl-Shift-P, escribir “fragmento” y presionar Enter. Verás un menú emergente similar a lo que ves a continuación.

Cuando presionas Enter en Insertar Fragmento, verás un menú desplegable de fragmentos disponibles, como se muestra a continuación. Puedes ver que hay bastantes fragmentos disponibles de forma predeterminada y ver más desplazándote hacia abajo.

El menú desplegable de fragmentos disponibles te permite revisar los fragmentos integrados que están disponibles mediante la adición de una extensión de lenguaje en VS Code.

Extensiones de Lenguaje

Puedes usar VS Code para trabajar con muchos lenguajes diferentes. Cada lenguaje tiene sus propias particularidades. Para respaldar estas diferencias, VS Code admite extensiones de lenguaje.

Las extensiones de lenguaje proporcionan a VS Code funciones inteligentes de edición para diferentes lenguajes de programación. Las extensiones de lenguaje brindan soporte adicional al lenguaje de programación, como:

• Resaltado de sintaxis
• IntelliSense
• Formateo
• Verificación de errores
• Completado de fragmentos

Las extensiones se instalan a través del menú de Extensiones de VS Code.

Puedes revisar la definición de estos fragmentos proporcionados por las extensiones de lenguaje abriendo el archivo JSON en Windows ubicado en C:\Users\\.vscode\extensions\ms-code.-\snippets.

Las extensiones, en sí mismas, no tienen nada que ver con los fragmentos, pero encontrarás que muchas extensiones vienen con fragmentos incorporados de los que debes estar al tanto.

Expandiendo fragmentos

Cuando seleccionas un fragmento a través de la interfaz del menú, verás el contenido del fragmento en el archivo. Este proceso de convertir las definiciones de fragmento en código útil se llama expansión.

Cuando llamas al prefijo, VS Code lee ese prefijo específico y ejecuta las instrucciones que defines en el fragmento. Estas instrucciones pueden variar de un fragmento a otro. Todo este proceso de llamar, convertir e insertar el fragmento se llama expansión.

Usando fragmentos de extensiones de VS Code

Algunos fragmentos vienen, por defecto, en VS Code, pero cuando instalas una extensión, a veces vienen con sus propios fragmentos. Ejemplos de extensiones con fragmentos incluidos son la extensión de Python de Microsoft, la extensión de PowerShell de Microsoft y la extensión de C# de Microsoft.

Dónde se almacenan los fragmentos de las extensiones.

Estas extensiones se instalan normalmente en Windows en el directorio C:\Users<UserName>.vscode\extensions de tu computadora como puedes ver a continuación.

Las carpetas para las extensiones siguen la convención de nombres ms-vscode.-. Cada una de estas carpetas contiene una carpeta snippet que tiene los fragmentos de código incluidos con la extensión.

Ejemplo de Fragmento de Código de Extensión

Para demostrar el uso de un fragmento de código de extensión, tomemos como ejemplo la extensión de PowerShell. Esta extensión viene con un par de fragmentos útiles llamados region y for para agilizar la creación de bloques de región de PowerShell y bucles *for*.

Digamos que necesitas crear un bucle for en un script de PowerShell encerrado en un bloque de región. El código para hacer esto se muestra a continuación. El código en la captura de pantalla a continuación tiene 50 caracteres de longitud y crea un bucle for dentro de un bloque de región que itera sobre los números del 1 al 10.

En lugar de escribir cada carácter en este ejemplo, puedes usar dos fragmentos de código que vienen instalados con la extensión de PowerShell de Microsoft llamados region y for.

¡Mira a continuación lo fácil que es usar cada uno de estos fragmentos para ahorrar un montón de escritura!

Crear fragmentos de código personalizados en Visual Studio Code

No tienes que limitarte a los fragmentos de código que vienen con VS Code o con las extensiones. Tal vez las extensiones existentes no contienen el diseño de código que necesitas o quieres formatear estos fragmentos tú mismo. ¡Tienes suerte, porque puedes crear tus propios fragmentos! En esta sección, verás cómo hacerlo.

Para crear un fragmento personalizado, abre tus fragmentos de usuario en VS Code haciendo clic en Archivos → Preferencias → Fragmentos de usuario. Esto abrirá el ámbito de selección de lenguaje de fragmentos para ti. Aquí es donde puedes especificar un lenguaje en el que deseas crear el fragmento. Puedes ver un ejemplo de cómo se ve esto en la captura de pantalla a continuación.

Al elegir un lenguaje, VS Code creará un archivo language.json en C:\Users<NombreUsuario>\AppData\Roaming\Code\User\snippets en Windows. Todos los fragmentos de usuario creados para diferentes lenguajes tendrán un archivo en este directorio.

Los lenguajes que ves disponibles pueden diferir de lo que ves arriba. En la instalación de VS Code anterior, muchas extensiones de lenguaje ya están instaladas.

Encuentra el lenguaje para el cual deseas crear el fragmento y presiona Enter para abrir el archivo JSON del lenguaje. Este archivo es donde se almacenarán tus fragmentos de código personalizados, y aquí es donde puedes crear tus fragmentos personalizados.

Hay cuatro elementos de datos que debes especificar para un fragmento personalizado:

1. A snippet name (line 9 below)
2. A prefix, which is what you’ll use to call your snippet (line 8 below)
3. A body, which is your snippet code that is loaded into your scripts (lines 7 to 3 below)
4. A description, which will show up in your IntelliSense (line 2 below)

Creando un fragmento personalizado de Python

Veamos qué se necesita para crear un fragmento personalizado para el lenguaje de programación Python. En este ejemplo, el prefijo dt invocará un fragmento de Python personalizado. Este fragmento imprimirá un mensaje con la hora actual predefinida.

Crea el archivo JSON

Primero abre el selector de lenguaje del fragmento, escribe Python y presiona Enter para crear un archivo python.json. Esto mostrará un archivo python.json en la carpeta C:\Users\\AppData\Roaming\Code\User\snippets de Windows.

Puedes ver su estado predeterminado en la imagen de abajo.

Asignar un nombre y prefijo

Ahora es el momento de comenzar a editar el archivo JSON. Primero, define el nombre y prefijo (dt). Los prefijos de los fragmentos son cortos y claros ya que son el valor que se escribe para llamar al fragmento. Cuanto más corto sea el prefijo del fragmento, menos caracteres tendrás que escribir cuando quieras llamarlo.

Puedes ver un ejemplo de cómo se ve esto a continuación.

Definir el cuerpo

El cuerpo contiene el código que se expandirá cuando se llame al fragmento. Este código puede ser texto simple y comentarios. También puede tener otras funciones que verás en secciones posteriores. Si el cuerpo tiene muchas líneas, hay algunas cosas que debes tener en cuenta.

• Cada línea debe estar entre comillas dobles
• Cada línea debe terminar con una coma
• Todas las líneas deben estar entre corchetes (“[” y “]”)

Puedes ver un ejemplo de cómo se ve el cuerpo del fragmento de ejemplo a continuación.

Definir la descripción

La descripción es un mensaje que describe el prefijo como se muestra a continuación y está definido debajo del cuerpo.

La descripción se mostrará debajo del prefijo en la lista de fragmentos y proporciona más información sobre lo que hace el fragmento. También ayuda a diferenciar el fragmento de otros similares creados.

A continuación se muestra una captura de pantalla de ejemplos de fragmentos que identifican prefijos y descripciones.

Si aún no tienes ningún fragmento personalizado de Python definido, cuando hayas terminado de crear el fragmento, deberías tener un archivo python.json que se vea como el siguiente fragmento de código.

{
    "DateTime Snippet": {
        "prefix": "dt",
        "body": [
            "import datetime",
            "dt = datetime.datetime.now()",
            "print(f\"The time is {dt} and this is a message\")"
        ],
        "description": "Prints a message with current time"
    }
}

Guarda este archivo JSON y ahora el fragmento personalizado estará disponible en cualquier archivo de Python en VS Code.

Ahora, cuando abras una pestaña de Python y escribas el prefijo dt, aparecerá el fragmento personalizado a continuación. Al presionar Enter, el cuerpo del fragmento se expandirá en la pestaña de Python.

Crear un fragmento personalizado de JavaScript usando texto incluido.

Los fragmentos no se limitan a las palabras que defines en el cuerpo del fragmento. Los fragmentos también pueden incluir texto del archivo desde el que los llamas.

VS Code tiene variables internas que puedes usar. Estos son marcadores de posición que toman el texto actualmente resaltado e lo inserta en el fragmento. Por ejemplo, al colocar la variable $TM_SELECTED_TEXT en el fragmento, puedes mostrar el texto seleccionado. Consulta la página de Referencia de Variables de VS Code para obtener una descripción completa de todas las variables internas de VS Code.

Para demostrar, creemos un fragmento que simplemente crea una línea para imprimir el texto seleccionado en la consola llamado log-it.

Abre el selector de lenguaje del fragmento, escribe JavaScript, y presiona Enter para crear un archivo javascript.json. Este archivo será similar al archivo python.json creado en la sección anterior. Aunque esta vez, contendrá código de ejemplo en Javascript en lugar de código de Python. Puedes ver su estado predeterminado en la captura de pantalla a continuación.

Ahora crea un fragmento usando el siguiente JSON:

{
	"Print selected line to console": {
		"prefix": "log-it",
		"body": [
			"console.log('$TM_SELECTED_TEXT');"
		],
		"description": "Log highlighted text output to console"
	}
}

Guarda este archivo JSON y ahora podrás usar este fragmento en tus archivos JavaScript.

Cuando llames a este fragmento con texto resaltado, reemplazará $TM_SELECTED_TEXT con el texto que hayas resaltado. Cuando llames a este fragmento sin texto resaltado, $TM_SELECTED_TEXT estará vacío. Puedes ver esto en acción en la captura de pantalla a continuación.

Creando un Fragmento Personalizado de PowerShell Con Puntos de Parada

Hasta ahora, los ejemplos que has visto están completos al llamarlos. Incluso el JavaScript asume que has resaltado texto antes. Pero, ¿qué pasa en los casos en los que necesitas escribir valores en el fragmento después de llamarlo?

¿Y si quieres escribir el valor en el console.log() en lugar de usar el texto resaltado? ¿Qué pasa si quieres escribir en varios lugares en el fragmento?

En esta sección, aprenderás cómo utilizar paradas de tabulación para permitirte escribir texto en el código producido por el fragmento expandido. Las paradas de tabulación son lugares predefinidos en tu fragmento a los que se desplazará el cursor. Estos lugares se visitan en orden cada vez que presionas tab. Con estas paradas de tabulación, puedes ingresar valores en el fragmento después de que se haya expandido.

Las paradas de tabulación, definidas mediante el uso de las variables del fragmento $0, $1, $2 y así sucesivamente en el cuerpo del fragmento, indican al fragmento hacia dónde se moverá tu cursor cuando llames al fragmento y presiones tab.

Las paradas de tabulación siguen un orden normal (1 sigue a 2 sigue a 3, etc.), con una excepción: la parada de tabulación 0 es el lugar donde estará el cursor después de todas las demás paradas de tabulación. Para demostrar esto, el fragmento a continuación se expande a un mensaje de Write-Output con la fecha actual y un espacio para más texto.

Este cuerpo con dos paradas de tabulación

• $1 al final del mensaje de Write-Output
• $0 en la siguiente línea para que el fragmento termine en una línea en blanco

{
    "DateTime Snippet PS": {
        "prefix": "dtPS",
        "body" : [
            "Write-Output -Message "The time is $((Get-Date).ToLocalTime()) and $1"","$0"
        ]
        "description": "PSCustomObject with 3 lines"
    }
}

Guarda este fragmento y llámalo escribiendo el prefijo dtPS en un archivo de PowerShell.

Cuando el fragmento se expanda, tu cursor saltará a la posición de la parada de tabulación 1. Desde aquí, agrega el valor o código que desees y presiona tab para pasar el cursor a la siguiente parada de tabulación. Esto continuará hasta que hayas pasado por todas las paradas de tabulación que hayas especificado.

Puedes ver esto en acción en la captura de pantalla a continuación.

Agregar valores predeterminados a las paradas de tabulación

Si bien las paradas de tabulación son excelentes para comenzar, ¿qué pasa si necesitas valores específicos generalmente en esos lugares pero deseas tener la capacidad de cambiarlos, si es necesario? Ahora es el momento de incluir valores predeterminados.

El ejemplo anterior tenía una parada de tabulación, pero cuando se expandió el fragmento, no había texto en su lugar. El cursor saltó a la ubicación de la parada de tabulación y luego el usuario tuvo que intervenir.

Si solo hubiera una manera de que un valor pudiera estar donde está la parada de tabulación, de esa manera, el fragmento podría expandirse y ese valor se expandiría con él. Cuando la parada de tabulación llega a esa ubicación, el valor predeterminado puede ser sobrescrito o se puede pasar por alto.

Vamos a ver cómo agregar valores predeterminados a fragmentos personalizados. Lo harás editando el archivo JSON del fragmento de PowerShell anterior.

Para empezar, abre el selector de lenguaje del fragmento, elige PowerShell y cambia las paradas de tabulación de $1 a ${1:este es mi mensaje predeterminado}. El valor después de los dos puntos se convierte en el valor predeterminado. Este valor se expande con el fragmento.

Cuando se alcanza esa parada de tabulación, pueden ocurrir dos cosas. El valor predeterminado puede ser sobrescrito, o se puede pasar por alto y conservará su valor predeterminado.

A continuación, puedes ver el cambio en el cuerpo.

{
	"DateTime Snippet PS" {
		"prefix": "dtPS",
		"body" : [
			"Write-Output -Message \"The time is $((Get-Date).ToLocalTime()) and $1{1:this is my default message}\"",
			"$0"
		],
		"description": "PSCustomObject with 3 lines"
	}
}

Una vez actualizados y guardados, estos valores predeterminados se expanden y también aparecen en la ventana de IntelliSense cuando se llaman, como se muestra en la captura de pantalla a continuación.

Los mensajes predeterminados son buenos ejemplos de lo que se puede hacer con las paradas de tabulación. Las paradas de tabulación también te dan la opción de elección. En la siguiente sección, verás un ejemplo de cómo añadir opciones a tus paradas de tabulación.

Añadiendo opciones a las paradas de tabulación

Las paradas de tabulación no se limitan a tener un valor predeterminado o ningún valor en absoluto. También se pueden definir en la definición de fragmento de código de VS Code para dar opciones al usuario cuando se expanda el fragmento de código.

Tal vez tengas una situación en la que quieras elegir un valor o comando diferente en un fragmento de código. En lugar de crear tres fragmentos de código diferentes con opciones distintas, puedes editar el fragmento de código para presentar una elección con una parada de tabulación, como se muestra en la captura de pantalla a continuación.

Las paradas de tabulación presentarán una elección cuando se utilice la siguiente sintaxis en el cuerpo del fragmento de código:

${N|Choice1,Choice2,Choice3[,Choice]|}

La parada de tabulación mostrada arriba ha sido modificada para dar la opción de:

• Write-Output
• Write-Warning
• Write-Error

Esto se hizo colocando dos caracteres de tubería (|) después de la parada de tabulación. Las opciones se colocan dentro de los caracteres de tubería, separados por comas. Puedes ver esto en el bloque de código a continuación.

${1|
    Write-Output -Message \"The time is $((Get-Date).ToLocalTime()) and this is my default message\", // <-- Elección 1
    Write-Warning -Message \"The time is $((Get-Date).ToLocalTime()) and this is my default message\", // <-- Elección 2
    Write-Error -Message \"The time is $((Get-Date).ToLocalTime()) and this is my default message\" // <-- Elección 3
|}

A continuación, puedes ver el ejemplo de fragmento de código.

{
    "DateTime Snippet PS" {
        "prefix": "dtPS",
        "body" : [
            "Write-Output -Message \"The time is $((Get-Date).ToLocalTime()) and this is my default message\", Write-Warning -Message \"The time is $(Get-Date).ToLocalTime()) and this is my default message\", Write-Error -Message \"The time is $(Get-Date).ToLocalTime()) and this is my default message\"|}",
            "$0"
        ],
        "description": "PSCustomObject with 3 lines"
    }
}

Cuando el fragmento de código personalizado se expanda ahora, la elección de qué opción elegir aparecerá en una ventana de IntelliSense, como se ve en la captura de pantalla a continuación.

Desde aquí, puedes seleccionar la opción que desees y ver cómo se expande en esa elección. En nuestra captura de pantalla de ejemplo que se muestra a continuación, toda la línea de código se reemplaza con la opción de elegir entre tres comandos de escritura diferentes, y muestra que cada uno puede ser llamado y ejecutado sin problemas.

Resumen

Los fragmentos personalizados pueden ser texto o código simple. Pueden tener paradas de tabulación para que puedas incluir mensajes, valores predeterminados o opciones, así como texto resaltado.

No tiene que ser una tarea ardua escribir cada carácter de cada bloque de código. Con los fragmentos, no tienes que recordar la sintaxis exacta para un bucle for, un foreach o una declaración switch cada vez. Los fragmentos son perfectos para esta situación específica.

I’ve shown Python, JavaScript, and PowerShell snippets in this post. VS Code snippets are available for many, many more languages. Your limits are only what you use and what you can think of!

Lectura adicional

• Introducción a las funciones de PowerShell