Construir Build

Hacer build en vscode

Visual Studio Code ofrece un sistema de tareas integrado que permite automatizar procesos de construcción directamente desde el editor. Las Tasks son comandos configurables que ejecutan scripts, herramientas de build o cualquier proceso que necesites repetir frecuentemente durante el desarrollo.

Qué son las Tasks y para qué sirven

Las Tasks en VS Code son configuraciones que definen cómo ejecutar comandos específicos en tu proyecto. Pueden automatizar desde simples compilaciones hasta procesos complejos de build, testing o deployment. Su principal ventaja es la integración nativa con el editor: capturas errores directamente en el panel de problemas, ejecutas con atajos de teclado y mantienes todo centralizado.

Las tasks más comunes incluyen:

• Compilación de código (TypeScript, Sass, Less)
• Bundling y minificación (Webpack, Rollup, Vite)
• Ejecución de scripts npm automatizada
• Procesamiento de assets (imágenes, CSS)
• Linting y formateo de código

Crear tu primer tasks.json

Para configurar tasks en tu proyecto, accede a Terminal > Configure Tasks desde el menú. VS Code te ofrecerá crear un archivo tasks.json en la carpeta .vscode de tu proyecto.

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Build proyecto",
      "type": "shell",
      "command": "npm",
      "args": ["run", "build"],
      "group": {
        "kind": "build",
        "isDefault": true
      }
    }
  ]
}

Este ejemplo básico ejecuta npm run build cuando seleccionas la task. El grupo "build" permite ejecutarla rápidamente con Ctrl+Shift+P > "Tasks: Run Build Task".

Tipos de tasks disponibles

VS Code soporta diferentes tipos de tasks según tus necesidades:

Shell commands ejecutan comandos directamente en el terminal:

{
  "label": "Compilar Sass",
  "type": "shell",
  "command": "sass",
  "args": ["src/styles.scss", "dist/styles.css", "--watch"]
}

Process tasks ejecutan programas específicos con mayor control:

{
  "label": "TypeScript Build",
  "type": "process",
  "command": "tsc",
  "args": ["-p", "tsconfig.json"],
  "group": "build"
}

Auto-detección de tasks

VS Code detecta automáticamente tasks comunes en proyectos JavaScript y TypeScript. Si tu proyecto contiene un package.json con scripts, aparecerán disponibles en Terminal > Run Task sin configuración adicional.

Para proyectos con package.json:

{
  "scripts": {
    "build": "webpack --mode production",
    "dev": "webpack serve --mode development",
    "test": "jest"
  }
}

VS Code creará automáticamente tasks para cada script. Puedes personalizar estas tasks creando configuraciones específicas en tasks.json:

{
  "label": "npm: build",
  "type": "npm",
  "script": "build",
  "group": {
    "kind": "build",
    "isDefault": true
  },
  "presentation": {
    "echo": true,
    "reveal": "always",
    "focus": false,
    "panel": "shared"
  }
}

Build automático con watchers

Para automatizar el build cuando guardas archivos, configura tasks con watchers. Esto es especialmente útil para desarrollo con recarga en caliente:

{
  "label": "Watch Build",
  "type": "shell",
  "command": "npm",
  "args": ["run", "dev"],
  "group": "build",
  "isBackground": true,
  "presentation": {
    "reveal": "always",
    "panel": "new"
  },
  "problemMatcher": "$tsc-watch"
}

La propiedad "isBackground": true indica que la task continuará ejecutándose. El problem matcher $tsc-watch captura errores de TypeScript en tiempo real.

Problem Matchers para capturar errores

Los Problem Matchers analizan la salida de tus tasks y extraen errores, warnings y información de diagnóstico que aparece en el panel de problemas de VS Code.

Para errores de TypeScript:

{
  "label": "TypeScript Build",
  "type": "shell",
  "command": "tsc",
  "group": "build",
  "problemMatcher": "$tsc"
}

Para ESLint:

{
  "label": "Lint código",
  "type": "shell",
  "command": "eslint",
  "args": ["src/**/*.js", "--format", "unix"],
  "problemMatcher": "$eslint-compact"
}

También puedes crear problem matchers personalizados para herramientas específicas:

{
  "label": "Custom Build",
  "type": "shell",
  "command": "my-build-tool",
  "problemMatcher": {
    "pattern": {
      "regexp": "^(.*):(\\d+):(\\d+):\\s+(warning|error):\\s+(.*)$",
      "file": 1,
      "line": 2,
      "column": 3,
      "severity": 4,
      "message": 5
    }
  }
}

Ejecutar tasks eficientemente

VS Code ofrece múltiples formas de ejecutar tasks:

• Terminal > Run Task: Muestra lista de todas las tasks disponibles
• Terminal > Run Build Task (Ctrl+Shift+P): Ejecuta la task de build por defecto
• Command Palette: Busca "Tasks: Run Task" para acceso rápido
• Atajos personalizados: Configura keybindings para tasks específicas

Para configurar un atajo personalizado, añade en keybindings.json:

{
  "key": "ctrl+shift+b",
  "command": "workbench.action.tasks.runTask",
  "args": "Build proyecto"
}

Las tasks también se pueden ejecutar automáticamente al abrir el workspace configurando:

{
  "label": "Setup Development",
  "type": "shell",
  "command": "npm",
  "args": ["install"],
  "runOptions": {
    "runOn": "folderOpen"
  }
}

Esta configuración ejecutará npm install automáticamente cada vez que abras el proyecto, asegurando que las dependencias estén siempre actualizadas.