El blog de Deska

Workspaces Multi-Root en VS Code

Aprende a usar workspaces multi-root en VS Code para gestionar varios proyectos y descubre cómo herramientas espaciales como Deska ofrecen otro enfoque.

· 10 min de lectura

La gestión de múltiples repositorios o carpetas de proyectos dentro de una misma ventana es un requisito común en el desarrollo de software moderno. Los workspaces multi-root en VS Code proporcionan una forma nativa de agrupar varias carpetas distintas en una sola unidad lógica. Esto permite a los desarrolladores buscar en todos los archivos y ejecutar tareas de forma global sin tener que cambiar entre múltiples ventanas de la aplicación. Esta funcionalidad es especialmente útil cuando se trabaja con microservicios, monorepos o proyectos de frontend y backend que residen en directorios separados pero pertenecen al mismo flujo de trabajo.

Entendiendo la Arquitectura Multi-Root

VS Code opera por defecto en un modo de carpeta única. Cuando abres una carpeta, esta se convierte en la raíz de tu explorador. Los workspaces multi-root rompen esta limitación al introducir un archivo .code-workspace. Este archivo JSON actúa como un manifiesto que indica al editor qué rutas absolutas o relativas debe incluir en la barra lateral.

Cuando pasas a una configuración multi-root, la interfaz cambia ligeramente para mostrar el nombre del espacio de trabajo en el nivel superior. Las extensiones también se adaptan a este modo. Muchas extensiones pueden configurarse para comportarse de manera diferente en cada carpeta raíz, lo cual es esencial si tienes un backend en Python y un frontend en TypeScript en el mismo espacio de trabajo. Cada carpeta puede tener su propia carpeta de configuración .vscode, proporcionando un control granular sobre las reglas de linting, depuración y formateo.

Configurando tu Primer Espacio de Trabajo

Crear un entorno multi-root es un proceso sencillo. Puedes comenzar abriendo una sola carpeta y luego seleccionando la opción para añadir otra carpeta al espacio de trabajo desde el menú de archivos. Una vez que tengas múltiples carpetas, debes guardar la configuración del espacio de trabajo.

  1. Abre VS Code y la carpeta principal de tu proyecto.
  2. Ve a Archivo y luego a Add Folder to Workspace.
  3. Selecciona el directorio del segundo proyecto.
  4. Ve a Archivo y luego a Save Workspace As.
  5. Nombra tu archivo .code-workspace y guárdalo en una ubicación conveniente.

Este archivo puede incluirse en el control de versiones, permitiendo que los miembros del equipo compartan la misma estructura organizativa. Es importante notar que las rutas en este archivo pueden ser relativas, lo que hace que el espacio de trabajo sea portátil entre diferentes máquinas siempre que la estructura de directorios se mantenga consistente.

Características y Limitaciones de los Workspaces en VS Code

El beneficio principal de este enfoque es la funcionalidad de búsqueda unificada. Puedes presionar Cmd+Shift+F o Ctrl+Shift+F para buscar en todos los archivos de todas las raíces incluidas simultáneamente. Esto supone un gran impulso de productividad cuando estás refactorizando interfaces compartidas o buscando usos específicos de variables de entorno en diferentes servicios.

Sin embargo, la interfaz sigue ligada a una barra lateral tradicional y a un editor con pestañas. A medida que añades más carpetas, la barra lateral puede volverse desordenada y difícil de navegar. Aunque puedes colapsar carpetas, sigues estando restringido por la vista de lista vertical. Aquí es donde surgen diferentes filosofías en la gestión de espacios de trabajo. Algunos desarrolladores prefieren la lista estricta de VS Code, mientras que otros encuentran que una representación espacial les ayuda a mantener el contexto mental de manera más efectiva.

Un Enfoque Alternativo con Deska

Herramientas como Deska toman un camino diferente al proporcionar un espacio de trabajo en un lienzo infinito. En lugar de una lista de carpetas en una barra lateral, colocas paneles en cualquier lugar de un gran plano bidimensional. Esto te permite agrupar visualmente diferentes partes de tu proyecto. Por ejemplo, podrías tener el código de tu API en un área y el código de tu frontend en otra, con terminales y vistas previas del navegador posicionadas exactamente donde tengan más sentido para tu tarea actual.

En Deska, el concepto de espacio de trabajo trata menos sobre un archivo de configuración y más sobre la disposición espacial de tus herramientas. Puedes alejar el zoom para ver toda la arquitectura del proyecto o acercarlo en un panel específico para concentrarte. Debido a que Deska es local-first, tus archivos y datos de sesión permanecen en tu máquina, al igual que en un editor tradicional. Puedes aprender más sobre cómo funcionan estos paneles en la sección de docs/panels.

Comparando Entornos Integrados y Espaciales

Tanto VS Code como Deska ofrecen ventajas únicas para gestionar proyectos complejos. La elección correcta depende de cómo proceses la información y de cuántas herramientas necesites ver a la vez.

CaracterísticaVS Code Multi-RootLienzo de Deska
Navegación de ArchivosBarra lateral verticalPaneles espaciales
Cambio de ContextoBasado en pestañasZoom y desplazamiento
Agrupación de ProyectosArchivo .code-workspaceLienzo infinito
Herramientas IntegradasTerminal integradaMúltiples terminales

VS Code destaca en la edición profunda de código y tiene un ecosistema enorme de extensiones. Es el estándar de la industria por una razón. Deska, por otro lado, está diseñado para albergar no solo el código, sino todo tu flujo de trabajo. Puedes ejecutar terminals junto a un browser y tus notas. Esta organización espacial puede reducir la carga cognitiva de recordar qué pestaña corresponde a qué proyecto.

Configuración Avanzada del Espacio de Trabajo

Dentro de una configuración multi-root de VS Code, puedes personalizar los ajustes en tres niveles: Usuario, Workspace y Carpeta. Los ajustes de Carpeta anulan los de Workspace, y los de Workspace anulan los de Usuario. Esta jerarquía es poderosa. Por ejemplo, podrías querer ocultar la carpeta node_modules en una raíz de proyecto específica pero mantenerla visible en otra para fines de depuración.

Para editar estos ajustes, abres el archivo .code-workspace. El objeto settings dentro de este archivo se aplica a todo el espacio de trabajo. Por ejemplo:

{
  "folders": [
    { "path": "backend" },
    { "path": "frontend" }
  ],
  "settings": {
    "editor.formatOnSave": true
  }
}

Esto asegura que cada proyecto dentro de este espacio de trabajo siga las mismas reglas de formateo, independientemente de los ajustes globales del editor de cada desarrollador.

Integración de Agentes de IA en tu Flujo de Trabajo

Los espacios de trabajo modernos incorporan cada vez más la IA para asistir en tareas repetitivas. En VS Code, esto suele ocurrir a través de extensiones que viven en un panel lateral. En Deska, la integración de la IA es más central en la experiencia espacial. Deska te permite ejecutar coding agents como Claude Code y OpenCode lado a lado como paneles individuales.

En lugar de una única ventana de chat, puedes tener varios agent threads activos a la vez. Un agente podría estar analizando tus logs en una terminal mientras otro sugiere cambios en un panel del editor de código Monaco. Incluso puedes usar Ask Deska, un asistente de voz y chat, para manejar el espacio de trabajo abriendo nuevos paneles o ejecutando comandos. Este nivel de orquestación es una evolución significativa respecto a la experiencia del editor tradicional.

Flujos de Trabajo Colaborativos y Móviles

Un desafío común con los espacios de trabajo complejos es mantener la productividad cuando estás lejos de tu estación de trabajo principal. VS Code ofrece algunas opciones de desarrollo remoto mediante extensiones. Deska proporciona una aplicación mobile dedicada que te permite monitorizar y continuar tu trabajo a través de un túnel seguro. Como los dispositivos se emparejan directamente sin exponer puertos, se mantiene la seguridad de un entorno local-first.

Ya sea que elijas el enfoque de lista estructurada de VS Code o el lienzo infinito de Deska, el objetivo es el mismo: reducir la fricción entre tus ideas y el código. Para aquellos que se sienten abrumados por demasiadas pestañas y ventanas, explorar un canvas espacial podría proporcionar la claridad necesaria para el desarrollo complejo de múltiples proyectos.

Preguntas Frecuentes

¿Cómo abrir varios proyectos en VS Code?

Puedes usar la función de espacios de trabajo multi-root seleccionando Add Folder to Workspace en el menú Archivo. Esto te permite ver y editar varios directorios dentro de una sola barra lateral y buscar en todos ellos al mismo tiempo.

¿Puedo tener diferentes configuraciones para cada carpeta en VS Code?

Sí, cada carpeta en un espacio de trabajo multi-root puede contener su propio archivo .vscode/settings.json. Estos ajustes tendrán prioridad sobre los niveles de espacio de trabajo y de usuario para ese directorio específico.

¿Cuál es la mejor forma de gestionar un monorepo?

La gestión de un monorepo se puede hacer mediante los workspaces multi-root de VS Code para una vista centrada en archivos, o usando Deska para crear una disposición espacial donde diferentes módulos, documentación y servicios se colocan como paneles distintos en un lienzo infinito.

Comienza con Deska

Si buscas una nueva forma de organizar tus proyectos más allá de las pestañas y barras laterales tradicionales, puedes descargar Deska para Mac, Windows o Linux. El espacio de trabajo es gratuito y ofrece un entorno flexible para tu código, terminales y agentes de IA.

💡 Ideas+🐛 BugsPropón una feature o reporta un bug