Gestiona múltiples proyectos desde VS Code

Si eres de los que trabaja con diferentes proyectos a la vez y utilizas el VS Code, tal vez te interesa este artículo. Así que… ¡Gestiona múltiples proyectos desde VS Code!

Si te has visto en incontables ocasiones con varios VS Code abiertos porque tienes que moverte entre varios proyectos, seguramente habrás usado mucho el menú «File» (o «Archivo») seguido de «New Window» para abrir una nueva ventana y/o «Open Folder» para abrir una nueva carpeta o quizás «Open Recent» si es que ya la habías abierto una con anterioridad (teniendo en cuenta que tiene una limitación en el número de recientes).

Hay varias maneras de gestionar varios proyectos a la vez para que sea más fácil pasar de uno a otro de una forma fácil. ¡Te lo explicamos!

Workspaces

Quizás solemos trabajar con una instancia de VS Code por proyecto, llegando a tener varias ventanas del editor abiertas dificultando la gestión. El «workspace» (espacio de trabajo) viene a rescatarnos: Se trata de una colección de una o más carpetas que son abiertas desde una única ventana (instancia) de VS Code.

Las ventajas tal y como comentan desde su web oficial son las siguientes:

• Configura ajustes para que solo se apliquen a una o varias carpetas específicas, pero no a otras.
• Persiste tareas y configuraciones de la ejecución del depurador que solo sean válidas en el contexto de ese workspace.
• Almacena y restaura el estado de la interfaz de usuario asociado con ese workspace (por ejemplo, los archivos que están abiertos).
• Habilita o deshabilita selectivamente extensiones solo para ese workspace.

La creación y configuración de un workspace, es muy sencilla: cuando quieras abrir una carpeta nueva que pertenece a un proyecto, basta con abrirla yendo a la opción de menú «File -> Add Folder to Workspace…» y verás automáticamente como en tu explorador de archivos agrupa esas carpetas bajo el título «UNTITLED (WORKSPACE)». Puedes ir añadiendo tantos proyectos/carpetas como necesites a tu workspace y al final guardar ese espacio de trabajo mediante la opción «File -> Save Workspace As…» bajo la extensión «.code-workspace».

Cuando necesites trabajar con ese workspace basta con ir al menú «File -> Open Workspace From File…» y seleccionar el archivo que contiene su configuración «*.code-workspace».

Si vas «Settings» y tienes un workspace abierto, verás las pestañas «User» y «Workspace» más una tercera conteniendo cada proyecto de ese espacio. De esa forma puedes configurar cada uno de forma separada dentro del espacio de trabajo.

Casos de uso

Lo lógico es trabajar con un workspace que contenga proyectos relacionados entre ellos (aunque no es estrictamente necesario), y aquí te damos algunos ejemplos:

• Proyectos de librerías de componentes y aplicaciones: Se podrían hacer dos cosas con los monorepos:
  • Cada proyecto del workspace es un monorepo.
  • Dentro de un monorepo, separar las librerías de las aplicaciones.
• Proyectos de cliente/servidor.
• Proyectos de microfronteds y shell (host)

Hay muchísimas posibilidades pero aquí ya entra tu forma de trabajar, qué quieres que contenga, de cómo te sientas a gusto, intentando facilitar la productividad.

Extensiones

Las extensiones nos ayudan a vitaminar el VS Code dotándolo de más funcionalides. Es aquí donde te vamos a presentar un par para ayudarnos.

Project Manager

Pueden haber bastantes extensiones sobre la gestión de proyectos pero ésta nos resulta la más apropiada, se trata de la extensión «Project Manager«. Es muy utilizada y valorada además de incluirse en múltiples «Extension Packs».

Una vez instalada, aparece un nuevo icono simbolizando unas carpetas apiladas, con su propio «Side Bar» desde donde podremos acceder y configurar.

Está dividido en tres secciones:

• Favoritos: Es una lista creada según nuestros requerimientos
• Git: Lista de proyectos de git
• Ayuda y feedback: Links a la ayuda y feedback

En la sección de favoritos podemos añadir o bien carpetas ó workspaces. Se puede configurar mediante un JSON que contendrá una lista de proyectos (sea una carpeta o workspace). Además cada proyecto puede ser etiquetado para una clasificación y/o filtrado.

Como colofón, puede crear una lista de proyectos de git buscando a partir de una o varias carpetas.

Finalmente tenemos un ejemplo de su visualización en árbol clasificado por etiquetas. Nada más nos queda hacer clic sobre el proyecto sobre el cual trabajar «et voilà», ya nos lo abre.

Peacock

Aunque un workspace nos agrupe los proyectos, aún es posible tener varias instancias de VS Code. Navegar entre varias ventanas con una UI prácticamente idéntica puede ser un dolor de cabeza. Para eso podemos asignar un «color» a cada proyecto para una mejor identificación. Eso es lo que hace «Peacock«.

De un vistazo, sabremos qué instancia de VS Code tiene el proyecto que buscamos. Al principio costará aprenderse el color asociado al proyecto e incluso trabajar con VS Code sin estar acostumbrados a ver ese color en nuestras barras. Peacock tiene una paleta inicial de colores pero se puede asignar el color que queramos incluso colorear solo alguna sección del VS Code.

Resumen

Hemos visto que mediante la creación de workspaces y extensiones de VS Code, podemos aumentar la productividad en el manejo de proyectos. No solo se pueden usar individualmente, sino también en conjunto.

Si sabes de alguna extensión más que pueda ayudar en esta gestión, no dudes en comentar y proponer.