Primary side bar

Opciones de sidebar primaria

La barra lateral primaria de Visual Studio Code se compone de diferentes vistas que se activan mediante los iconos de la Activity Bar. Cada vista proporciona funcionalidades específicas para trabajar con tu proyecto, desde la navegación de archivos hasta la gestión de extensiones.

Activity Bar y navegación entre vistas

La Activity Bar es la columna vertical de iconos situada en el extremo izquierdo de la interfaz. Estos iconos actúan como interruptores que permiten cambiar entre las diferentes vistas de la barra lateral:

• Explorer (Ctrl+Shift+E): Icono de carpeta para navegación de archivos
• Search (Ctrl+Shift+F): Icono de lupa para búsqueda en el proyecto
• Source Control (Ctrl+Shift+G): Icono de ramificación para control de versiones
• Run and Debug (Ctrl+Shift+D): Icono de play para depuración
• Extensions (Ctrl+Shift+X): Icono de cuadrados para gestión de extensiones

Al hacer clic en cualquier icono, la vista correspondiente se abre en la barra lateral. Si haces clic en el mismo icono cuando su vista ya está activa, la barra lateral se ocultará completamente.

Vista Explorer

La vista Explorer es el panel principal para la navegación de archivos y carpetas. Muestra la estructura jerárquica de tu proyecto en forma de árbol expandible, donde puedes:

• Expandir y contraer carpetas haciendo clic en las flechas
• Abrir archivos con un solo clic para previsualización o doble clic para edición
• Visualizar el estado de los archivos mediante iconos y colores

Esta vista incluye diferentes secciones que se pueden expandir o contraer individualmente:

• Carpetas abiertas: Muestra todos los directorios del workspace actual
• Outline: Estructura del archivo activo (funciones, clases, variables)
• Timeline: Historial de cambios del archivo seleccionado

Vista Search

La vista Search proporciona capacidades de búsqueda a nivel de proyecto. El panel presenta varios campos de entrada que permiten localizar contenido específico:

• Campo de búsqueda principal: Introduce el texto a buscar
• Campo de archivos: Especifica patrones de archivos donde buscar
• Campo de exclusión: Define archivos o carpetas a ignorar

Los resultados de búsqueda se muestran organizados por archivo, con cada coincidencia indicando el número de línea y el contexto circundante. Puedes hacer clic en cualquier resultado para navegar directamente a esa ubicación en el editor.

Vista Source Control

La vista Source Control muestra el estado del control de versiones de tu proyecto. Aunque requiere configuración adicional para funcionar completamente, la interfaz básica incluye:

• Panel de cambios: Lista de archivos modificados, añadidos o eliminados
• Área de staging: Zona para preparar cambios antes del commit
• Campo de mensaje: Espacio para escribir descripciones de los cambios

Cuando no hay un repositorio configurado, esta vista muestra opciones para inicializar un nuevo repositorio o clonar uno existente. Los archivos aparecen con diferentes colores según su estado: verde para nuevos, amarillo para modificados.

Vista Extensions

La vista Extensions es el centro de gestión para las extensiones de Visual Studio Code. La interfaz se divide en varias secciones:

• Campo de búsqueda: Localiza extensiones específicas en el marketplace
• Extensiones instaladas: Lista de extensiones actualmente disponibles
• Extensiones recomendadas: Sugerencias basadas en tu workspace
• Extensiones populares: Las más descargadas de la comunidad

Cada extensión se presenta con su icono, nombre, descripción y botones para instalar, desinstalar o configurar. Las extensiones instaladas muestran un indicador visual y opciones adicionales de gestión.

Control de visibilidad de paneles

Visual Studio Code ofrece múltiples formas de controlar la visibilidad de la barra lateral y sus componentes:

Ocultar/mostrar la barra lateral completa:

• Usar el atajo Ctrl+B (Windows/Linux) o Cmd+B (Mac)
• Hacer clic en el icono activo de la Activity Bar
• Usar el menú View > Appearance > Primary Side Bar

Redimensionar la barra lateral:

• Arrastrar el borde derecho de la barra lateral para ajustar su ancho
• Hacer doble clic en el borde para auto-ajustar al contenido

Personalizar la Activity Bar:

• Clic derecho en la Activity Bar para acceder al menú contextual
• Ocultar iconos específicos que no uses frecuentemente
• Reordenar iconos arrastrándolos a nuevas posiciones

La configuración de visibilidad se mantiene entre sesiones, por lo que las preferencias se conservan al reiniciar Visual Studio Code.

Barra lateral secundaria

VS Code incluye una Secondary Side Bar que permite tener dos barras laterales visibles simultáneamente. Se activa desde View > Appearance > Secondary Side Bar o con el atajo Ctrl+Alt+B. Esto permite, por ejemplo, tener el Explorer en la barra izquierda y la vista de Outline o Tests en la derecha, maximizando la información visible sin cambiar entre vistas.

Contexto histórico: la barra lateral en los editores modernos

El concepto de barra lateral como contenedor de vistas auxiliares no es nuevo. Editores como Sublime Text y Atom popularizaron la idea de tener un panel izquierdo con el árbol de archivos y un conjunto de botones para cambiar entre funciones. Visual Studio Code recogió ese patrón y lo refinó separando la Activity Bar (los iconos verticales) de la propia barra lateral (el contenido), lo que permitió incorporar nuevas vistas sin saturar la interfaz. Con la llegada de la Secondary Side Bar en 2022, el editor dio un paso más al permitir mostrar dos vistas simultáneamente, una decisión inspirada en IDEs más tradicionales como IntelliJ IDEA.

Atajos de teclado adicionales

Más allá de los atajos básicos, existen combinaciones útiles para navegar rápidamente entre vistas:

• Ctrl + B: alterna la visibilidad de la barra lateral primaria.
• Ctrl + Alt + B: alterna la barra lateral secundaria.
• Ctrl + Shift + E: abre directamente el Explorer.
• Ctrl + Shift + F: abre la vista Search.
• Ctrl + Shift + G: abre Source Control.
• Ctrl + Shift + D: abre Run and Debug.
• Ctrl + Shift + X: abre Extensions.
• Ctrl + K Ctrl + B: mantiene la barra lateral oculta pero permite una vista rápida temporal del Explorer.
• Alt + Clic en un icono de la Activity Bar: abre esa vista en la barra lateral secundaria en lugar de la primaria.

Ejemplo paso a paso: configurar un workspace para desarrollo web

Imagina que trabajas en una aplicación web con frontend y backend en el mismo repositorio. El flujo recomendado sería:

1. Abre el proyecto con File > Open Folder.
2. Pulsa Ctrl + Shift + E para ver la estructura completa en el Explorer.
3. Expande solo las carpetas relevantes (frontend/src y backend/src) y contrae el resto para reducir el ruido visual.
4. Activa la Secondary Side Bar con Ctrl + Alt + B.
5. Arrastra la vista Outline desde el Explorer hacia la barra lateral secundaria.
6. Pulsa Ctrl + Shift + G para abrir Source Control en la primaria y comprobar los cambios pendientes.
7. Cuando necesites buscar texto, pulsa Ctrl + Shift + F, introduce el término y observa los resultados agrupados por archivo.
8. Al finalizar la sesión, usa Ctrl + B para ocultar la barra lateral y maximizar el área de edición durante las tareas de concentración profunda.

Tabla comparativa: barra lateral primaria, secundaria y panel inferior

| Zona | Atajo | Uso típico | Redimensionable | |------|-------|------------|-----------------| | Barra lateral primaria | Ctrl + B | Explorer, Search, Git, Extensions | Sí, arrastrando el borde | | Barra lateral secundaria | Ctrl + Alt + B | Outline, Timeline, Tests, vistas extra | Sí | | Panel inferior | Ctrl + J | Terminal, Problems, Output, Debug Console | Sí | | Barra de estado | (sin atajo) | Rama Git, errores, posición del cursor | No | | Activity Bar | (menú View) | Acceso rápido a vistas | Solo orientación |

Errores comunes al gestionar la barra lateral

Existen errores frecuentes al trabajar con las vistas:

• Ocultar accidentalmente la Activity Bar: si haces clic derecho y eliges Hide Activity Bar, puede parecer que has perdido el acceso a las vistas; basta con abrir la paleta de comandos y buscar View: Toggle Activity Bar para recuperarla.
• Saturar el Explorer con demasiadas carpetas abiertas de un monorepo, lo que ralentiza el renderizado en proyectos muy grandes; conviene usar Collapse All con el botón de la esquina superior.
• Desplazar accidentalmente vistas entre barras: al arrastrar una vista puede acabar en la barra secundaria sin querer; el comando View: Reset View Locations restaura la disposición por defecto.
• Ignorar el contador de notificaciones que aparece en los iconos de la Activity Bar (por ejemplo, número de errores en Problems o número de extensiones con actualización pendiente).
• Olvidar cerrar las vistas que no se usan: cada vista activa consume recursos mínimos, pero su acumulación puede afectar al arranque en equipos modestos.

Mejores prácticas en equipos

La disposición de la barra lateral es personal, pero hay prácticas recomendables para equipos:

• Documentar en el README.md del proyecto qué vistas conviene tener abiertas al trabajar con el repositorio (por ejemplo, Git Graph si se usa esa extensión).
• Usar Settings Sync para mantener la misma disposición entre varios equipos de cada persona.
• Evitar personalizaciones extremas de la Activity Bar cuando se comparten capturas en documentación interna, ya que pueden despistar a quien no tenga la misma configuración.
• Al iniciar sesiones de pair programming o streaming, ocultar temporalmente vistas poco relevantes con View: Hide View para que el público se centre en lo importante.
• Aprovechar la barra lateral secundaria para mostrar permanentemente el Test Explorer o la vista de Problems durante sesiones de TDD, reduciendo el número de cambios de contexto durante el ciclo rojo-verde-refactor.