DEV Community

DowarDev
DowarDev

Posted on

1

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" 
    }
    }
  ]
}
Enter fullscreen mode Exit fullscreen mode
  • 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"
      }
    }
  ]
}
Enter fullscreen mode Exit fullscreen mode

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"
    }
  ]
}
Enter fullscreen mode Exit fullscreen mode

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"
    }
Enter fullscreen mode Exit fullscreen mode

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

Reinvent your career. Join DEV.

It takes one minute and is worth it for your career.

Get started

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay