Crear un Snippet en VSCode para Azure

Hace un tiempo que vengo utilizando Visual Studio Code y la verdad es, que cada día que pasa, le voy tomando más cariño. Es ágil, tiene una interfaz muy cuidada, está repleto de extensiones (a nivel de lenguajes o tecnologías) y es super customizable. En referencia a esto último es que he decidido armar esta entrada en el blog.

A diario utilizo PowerShell para realizar mis tareas, sin importar que es lo que tenga que hacer. Últimamente estoy trabajando bastante con Azure y hay veces que, al utilizar PowerShell en vez de Azure CLI, completar algunas tareas se torna más extenso en el tiempo a la hora ejecutar comandos para tal fin. Por ello se me ocurrió indagar sobre el tema Snippets en VSCode para intentar ser más eficiente al momento de escribir scripts en PowerShell.

¿Qué es un Snippet?

Los Code snippets son templates que facilitan la tarea de escribir patrones de código repetitivos, como sentencias condicionales o loops.

Snippets aparecen en IntelliSense (Ctrl+Space) mezclados con otras sugerencias, así como también es posible acceder a ellos mediante un selector dedicado dentro de la Command Palette (Insert Snippet). Adicional a lo anterior es posible utilizar el soporte de la funcionalidad tab-completion; que básicamente permite al escribir el prefijo del Snippet y, al pulsar la tecla Tab, inserta el Snippet en el código.

Procedimiento

Lo primero que tenemos que tener en cuenta es que para escribir nuestro primer script basta realizar un procedimiento muy simple, que paso a detallar:

Dentro de Visual Studio Code, acceder al menú File y luego seleccionar Preferences, para seleccionar del nuevo menú la opción User Snippets.

Seleccionar la opción New Global Snippets file…

Luego de seleccionar la opción se despliega una ventana en la que se debe definir el archivo donde vamos a registrar nuestro código. La ruta donde se alojan los Snippets del usuario es:

~\AppData\Roaming\Code\User\snippets

Ya con el archivo creado, vamos a encontrarnos con el siguiente panorama en Visual Studio Code:

Primer Snippet

Ahora que tenemos lo requerido, vamos a comenzar a definir nuestro primer Snippet. Antes, quiero definir la estructura del mismo con lo siguiente:

  {
    "Write host": {
      "prefix": "print",
      "body": "Write-Host \"${1:Hola mundo!}\"",
      "description": "Write-Host Snippet"
    },
  }

Tomando ejemplo anterior tenemos los siguientes puntos:

• Write host es el nombre del snippet.
• prefix define como el snippet es seleccionado desde IntelliSense, así como para insertarlo usando la tecla Tab. Para este ejemplo es print.
• body es el contenido donde según sea un simple string o varios, se considerarán como diferentes líneas de código.
• description es la descripción que aparece como información en IntelliSense.

Ahora que tenemos clara la estructura, vamos a tomar una tarea de Azure donde podamos simplificar la generación de código y ser más eficientes a la hora de escribir código.

La tarea en cuestión es crear una VM, donde usamos al menos 2 comandos para aprovisionar la misma: generar el grupo de recursos y desplegar la VM. Si bien es cierto que se puede simplificar la idea es tomar un ejemplo para poder tener una referencia en cómo resolver cierta situación.

El siguiente Snippet resuelve mi tarea de una forma muy simple:

  {
    "New VM": {
      "prefix": "newvm",
      "body": [
        "#New Azure Resource Group",
        "New-AzureRmResourceGroup -ResourceGroupName \"${1:ResourceGroup}\" -Location \"${2:EastUS}\"",
        
        "#New VM",
        "New-AzureRmVm `",
        "\t-ResourceGroupName \"${1:ResourceGroup}\" `",
        "\t-Name \"${3:VM}\" `",
        "\t-Location \"${2:EastUS}\" `",
        "\t-VirtualNetworkName \"${4:vNET}\" `",
        "\t-SubnetName \"${5:Subnet}\" `",
        "\t-SecurityGroupName \"${6:NetworkSecurityGroup}\" `",
        "\t-PublicIpAddressName \"${7:PublicIpAddress}\" `",
        "\t-Credential ${8:$cred}",
      ],
      "description": "Crear una VM en Azure"
    }
  }

Como se puede observar, otra cosa que nos permiten los Snippets es utilizar placeholders como por ejemplo ${1:ResourceGroup}, en donde se definen ciertos valores inicialmente que pueden ser modificados luego de ser insertado el Snippet. Adicional a lo anterior es posible navegar entre ellos, tomando el orden definido en el código, utilizando la tecla Tab.

Happy scripting!