Mejora tu productividad automatizando tareas en Visual Studio Code

Introducción

Visual Studio Code(VSCode) cuenta con una función que nos permitirá mejorar nuestra productividad y así enfocarnos en programar.

Al configurar tu entorno de desarrollo, puedes crear comandos personalizados que ejecuten múltiples tareas de forma secuencial. Por ejemplo, puedes definir un comando que inicie automáticamente el servidor de tu proyecto al abrirlo en VSCode. Del mismo modo, puedes crear un comando que ejecute las pruebas, genere el paquete de despliegue y lo suba a producción en un solo paso.

Nota
Este tutorial te guiará a través de los conceptos básicos y te preparará para profundizar en la documentación oficial.

Preparación

1. Abrimos nuestro proyecto con VSCode.
2. En la raíz del proyecto buscamos el directorio(oculto) .vscode(si no existe lo creamos).
3. Dentro del mismo creamos(si no existe) un archivo bajo el nombre de tasks.json

Tipo de tarea

Existen dos tipos de tareas:

• Tarea simple: Solo ejecuta una única acción, ejemplo: iniciar servidor
• Tarea compuesta: Ejecuta más de una acción, ejemplo: Iniciar tests, realizar build y hacer deploy.

Estructura

{
  "version": "2.0.0",
  "tasks": [
    {
    "label": "nombre de la tarea",
    "type": "shell","typescript"
    "command": "comando a ejecutar",
    "args": ["argumento1", "argumento2"], 
    "group": {
        "kind": "build",
        "isDefault": true 
    },
    "problemMatcher": [], 
    "detail": "Descripción de la tarea",
    "presentation": {
        "echo": true, // opcional
        "reveal": "always", 
        "focus": false, 
        "panel": "shared" 
    },
    "runOptions": {
        "runOn": "folderOpen" 
    }
    }
  ]
}

• label: Nombre de la tarea.
• type: Tipo de tarea (shell, process, npm, gulp, grunt, typescript).
• command: Comando a ejecutar.
• args: Argumentos para el comando (opcional).
• group: Agrupación de la tarea (opcional).
• kind: Tipo de grupo (build, test, none).
• isDefault: Si es la tarea predeterminada del grupo (opcional).
• problemMatcher: Configuración para detectar problemas en la salida del comando (opcional).
• detail: Descripción de la tarea (opcional).
• presentation: Configuración de presentación de la tarea (opcional).
• echo: Si se debe mostrar el comando en la salida (opcional).
• reveal: Cuándo mostrar la salida (always, silent, never).
• focus: Si se debe enfocar la salida (opcional).
• panel: Panel de salida (shared, dedicated, new).
• runOptions: Opciones de ejecución de la tarea (opcional).
• runOn: Cuándo ejecutar la tarea (folderOpen, default).

Ejemplos

Tarea simple

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Ionic serve",
      "type": "shell",
      "command": "ionic serve --external",
      "group": {
        "kind": "test",
        "isDefault": true
      },
      "problemMatcher": [],
      "detail": "Tarea para iniciar el servidor de desarrollo de Ionic",
      "presentation": {
        "echo": true,
        "reveal": "always",
        "focus": false,
        "panel": "shared"
      },
      "runOptions": {
        "runOn": "folderOpen"
      }
    }
  ]
}

El ejemplo anterior inicia el servidor para un proyecto de Ionic.

Tarea compuesta

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Run Tests",
      "type": "shell",
      "command": "npm run test",
      "problemMatcher": [],
      "detail": "Tarea para ejecutar los tests de la aplicación"
    },
    {
      "label": "Build App",
      "type": "shell",
      "command": "npm run build",
      "problemMatcher": [],
      "detail": "Tarea para construir la aplicación"
    },
    {
      "label": "Deploy via SSH",
      "type": "shell",
      "command": "scp -r ./dist/* user@remote:/path/to/deploy",
      "problemMatcher": [],
      "detail": "Tarea para mandar los archivos por SSH"
    },
    {
      "label": "Full Deploy",
      "dependsOn": ["Run Tests", "Build App", "Deploy via SSH"],
      "problemMatcher": [],
      "detail": "Tarea para ejecutar tests, construir y desplegar la aplicación"
    }
  ]
}

Con esto se logrará ejecutar los tests, el build y finalmente el deploy usando Full Deploy.

Ejecución

Tarea simple

1. Iniciamos la paleta de comandos(Ctrl+Shift+P)
2. Ingresamos Run Task
3. Seleccionamos la tarea de nuestra preferencia(nombre asignado en label)

Nota
Gracias a la propiedad runOn con el valor asignado folderOpen en el ejemplo de la tarea simple no sera necesario ejecutarla mediante la paleta de comandos ya que tener esta propiedad definida le indica que debe ejecutarse tan pronto se inice el proyecto.

Tarea compuesta

Si se analiza detenidamente se podrá observar que el ejemplo de la tarea simple y compuesta comparten varias similitudes en su estructura, exceptuando por lo siguiente:

{
      "label": "Full Deploy",
      "dependsOn": ["Run Tests", "Build App", "Deploy via SSH"],
      "problemMatcher": [],
      "detail": "Tarea para ejecutar tests, construir y desplegar la aplicación"
    }

Lo que nos permite este fragmento es ejecutar varias tareas usando un único comando bajo el nombre definido en label(Full Deploy), esto lo hace gracias a la propiedad dependsOn en donde se pasa como argumento el nombre de las tareas que ejecutara. De ser requerido se podrá ejecutar las tareas de forma individual usando el nombre definido en el label, en este caso: Run Tests, Build App, Deploy via SSH.

Nota
Si una tarea falla la siguiente no se ejecutara a no ser que especifiquemos la propiedad dependsOrder en sequence o parallel

Para ejecutar la tarea compuesta se hace de la misma forma que una tarea simple

1. Abrimos la paleta de comandos(Ctrl+Shift+P)
2. Ingresamos Run Task
3. Seleccionamos la tarea de nuestra preferencia(en esta caso Full Deploy)

Resumen

Hagamos un resumen rápido

1. Creamos un tasks.json en.vscode`
2. Definimos las tareas que usaremos en nuestro proyecto
3. Ejecutamos Ctrl+Shift+P y en la paleta de comandos ingresamos Run Task.
4. Seleccionamos la tarea deseada.

Post original: https://dowar.xyz/blog/post/55