[Guía de VSCode] Operaciones Básicas: Gestión de Archivos, Explorador y Pestañas

¡Hola! Si estás leyendo este artículo, probablemente acabas de empezar tu viaje en el desarrollo web y sientes que "usar este editor es un poco difícil...", ¿verdad? Créeme, yo estaba exactamente en la misma situación hace solo unos meses. No tenía ningún conocimiento de programación. Empecé desde un nivel de "¿Qué es HTML?".

Pero con la ayuda de la IA, pasé por mucho ensayo y error, y en un mes y medio, pude lanzar dos sitios web por mi cuenta (buyonjapan.com, copicode.com). A través de esta experiencia, me di cuenta de que "la habilidad de dominar tus herramientas es tan importante como la habilidad de escribir código."

En particular, el editor amado por muchos profesionales, "VSCode (Visual Studio Code)," es tan rico en funciones que puede parecer un poco complejo para los principiantes. En este artículo, basado en mi experiencia real, me centraré en el núcleo del desarrollo web: las "operaciones de archivo." Desglosaré cómo manejar la UI (Interfaz de Usuario) básica de VSCode, como el "Explorador" y la gestión eficiente de "Pestañas", junto con "operaciones básicas" útiles. Evitaré la jerga tanto como sea posible y explicaré todo a fondo, compartiendo los puntos en los que realmente me quedé atascado.

Para cuando termines este artículo, tu vaga ansiedad sobre la gestión de archivos en VSCode debería haber desaparecido, y podrás abordar tus proyectos con confianza. ¡Ahora, demos juntos el primer paso hacia una vida de codificación cómoda!

¿Por qué las "Operaciones de Archivo" en VSCode son la Base de Todo?

Cuando recién comenzaba a aprender, guardaba mis archivos HTML en el escritorio y los abría arrastrándolos y soltándolos directamente en el icono de VSCode. A primera vista, esto parece estar bien, ¿verdad? Sin embargo, cuando quería editar el CSS, tenía que buscar y abrir otro archivo CSS, y cuando quería agregar una imagen, tenía que abrir otra carpeta... mi flujo de trabajo se volvió extremadamente engorroso.

Esta "edición de un solo archivo" es la primera trampa en la que suelen caer los principiantes. Un sitio web solo toma forma cuando numerosos archivos (HTML, CSS, JavaScript, imágenes, etc.) trabajan juntos en coordinación. El verdadero poder de VSCode radica en su capacidad para gestionar todo el proyecto como una sola "unidad", en lugar de tratar estos archivos por separado.

La operación básica más crucial para esto es "Abrir Carpeta." Esto es completamente diferente a simplemente abrir un archivo. Al abrir toda la carpeta principal de tu proyecto en VSCode, toda la estructura de archivos del proyecto se muestra en el "Explorador" en la barra lateral izquierda, lo que permite una gestión centralizada.

Esta filosofía de "gestionar todo el proyecto" es la piedra angular del diseño de la UI de VSCode. El diseño —todo el proyecto a la izquierda (Explorador), los archivos individuales en el centro (Editor) y diversa información en la parte inferior (Terminal o panel de Problemas)— está optimizado para un desarrollo eficiente.

Conquista el Explorador: El Centro de Mando de tu Proyecto

Una vez que hayas "Abierto una Carpeta" con éxito, es hora de dominar el corazón de VSCode, la vista "Explorador". Es el icono en la Barra de Actividades del extremo izquierdo que parece dos documentos superpuestos. Aquí es donde se muestran los contenidos de tu carpeta abierta en una estructura de árbol.

Cuando pasas el cursor del ratón a la derecha del nombre de la carpeta (en el ejemplo, "MI-PROYECTO"), aparecerán varios iconos pequeños. Estos elementos de la UI se convertirán en tus poderosas armas.

• Nuevo Archivo: Crea un nuevo archivo (p. ej., .html o .css).
• Nueva Carpeta: Crea una nueva carpeta (p. ej., images o scripts).
• Actualizar Explorador: Actualiza la vista al estado más reciente si los archivos han sido cambiados fuera de VSCode.
• Contraer Carpetas en el Explorador: Cierra todas las carpetas abiertas para limpiar la vista de árbol.

Crear Archivos y Carpetas: El Primer Paso para la Organización

A medida que tu proyecto crece, organizar tus archivos se vuelve esencial. Por ejemplo, es una práctica común agrupar los archivos CSS en una carpeta css y los archivos JavaScript en una carpeta js.

Intentemos crear un archivo style.css dentro de una carpeta css. Primero, crea la carpeta css con el icono "Nueva Carpeta". A continuación, con la carpeta css creada seleccionada, haz clic en el icono "Nuevo Archivo", escribe style.css y presiona la tecla Enter.

1. Haz clic en el icono "Nueva Carpeta" → escribe `css` y presiona Enter
2. Selecciona la carpeta `css` creada
3. Haz clic en el icono "Nuevo Archivo" → escribe `style.css` y presiona Enter

A qué prestar atención: La estrecha relación entre las operaciones de archivo y las "rutas"

Cambiar el nombre de archivos y carpetas (selecciona el archivo y presiona F2), moverlos (arrastrar y soltar) y eliminarlos (tecla Supr) se puede hacer de forma intuitiva. Sin embargo, hay un punto muy importante a tener en cuenta aquí: las "rutas rotas".

Por ejemplo, digamos que estás cargando logo.png desde una carpeta images en tu index.html. El código HTML se vería así:

<img src="images/logo.png" alt="Logo de la Compañía">

En este estado, ¿qué pasaría si cambiaras el nombre de la carpeta images a assets? El código HTML todavía tiene la ruta antigua, por lo que el navegador no podrá encontrar la imagen y la visualización se romperá.

Mi historia de fracaso: Mientras construía un sitio, una vez cambié el nombre de una carpeta para organizar mejor mis imágenes. VSCode fue lo suficientemente inteligente como para sugerir la actualización automática de las rutas, pero me salté algunas, y cometí el error de que varias imágenes del sitio no se mostraran. A partir de esa experiencia, desarrollé el hábito de comprobar siempre las rutas de los archivos relevantes después de mover archivos o carpetas.

Debes corregirlo manualmente a la ruta correcta.

<!-- Corregido a la ruta correcta -->
<img src="assets/logo.png" alt="Logo de la Compañía">

Quien domina las pestañas, domina la codificación

Cuando abres un archivo desde el Explorador, aparece como una "pestaña" en la parte superior del editor. Comprender el comportamiento de estas pestañas es la clave para navegar sin problemas entre múltiples archivos.

¡El obstáculo del principiante! Entender el "Modo de Vista Previa"

"¿Eh? ¡Acabo de hacer clic en el archivo, pero la pestaña que tenía abierta antes desapareció!" Este es un fenómeno que el 100% de los principiantes de VSCode experimentan. Yo, por supuesto, también lo experimenté. El culpable detrás de este fenómeno es el "Modo de Vista Previa".

• Modo de Vista Previa: Cuando haces un solo clic en un archivo en el Explorador, se abre en este modo. Se caracteriza porque el nombre del archivo en la pestaña está en cursiva. Este es un modo para "solo echar un vistazo rápido adentro". Cuando haces un solo clic en otro archivo, esta pestaña se cerrará automáticamente y el nuevo archivo se previsualizará en la misma pestaña.
• Modo Normal: Cuando haces doble clic en un archivo, o haces doble clic en una pestaña que está en modo de vista previa, cambia a este modo. El nombre de la pestaña se vuelve normal (no en cursiva), y la pestaña permanecerá abierta hasta que la cierres explícitamente.

Desde que entendí esta diferencia, he podido distinguir entre "archivos que quiero editar con cuidado, haré doble clic" y "archivos que solo quiero revisar rápidamente, haré un solo clic", y ya no me confundo con un número infinito de pestañas.

¡Aumenta tu eficiencia de trabajo al 200% con la pantalla dividida!

Para un creador web, una característica que es casi fatal no conocer es la "Pantalla Dividida". Puedes mostrar y editar el CSS que define el estilo mientras escribes el HTML al mismo tiempo.

Es fácil de hacer. Simplemente haz clic derecho en una pestaña y elige "Dividir a la Derecha" o "Dividir hacia Abajo". Alternativamente, también puedes dividir arrastrando y soltando una pestaña en el borde derecho, izquierdo, superior o inferior del área del editor. También son posibles diseños complejos, como una división en cuatro partes.

Gracias a esta función, el tiempo perdido cambiando de un archivo a otro se reduce a cero. Si cambias un nombre de clase en el HTML, puedes corregir inmediatamente el selector en el CSS en la pantalla adyacente. Una vez que experimentas este flujo de trabajo fluido, no puedes volver atrás.

Llevándolo un paso más allá: Acelera la productividad con los Espacios de Trabajo

Una vez que te acostumbres a las operaciones básicas, definitivamente deberías intentar abordar el concepto de un "Espacio de Trabajo" (Workspace). Esta es una característica que puede considerarse el primer paso para convertirse en un usuario intermedio.

Por ejemplo, digamos que el sitio que estás construyendo está dividido en carpetas separadas para la parte "frontend" que ve el usuario y la parte "backend" del lado del servidor. Es un fastidio abrirlas por separado cada vez, ¿verdad? Ahí es cuando un espacio de trabajo es útil.

1. Primero, abre la primera carpeta (p. ej., frontend-project) en VSCode.
2. A continuación, desde el menú "Archivo", elige "Agregar Carpeta al Espacio de Trabajo..." y selecciona la segunda carpeta (p. ej., backend-project).
3. Una vez que ambas carpetas del proyecto se muestren en el Explorador, haz clic en "Guardar Espacio de Trabajo como..." en el menú "Archivo".

Esto creará un archivo con una extensión .code-workspace, como my-project.code-workspace. Este es un "archivo de configuración" que registra cómo abrir tu proyecto. A partir de la próxima vez, con solo abrir este único archivo .code-workspace, puedes reproducir instantáneamente el estado con múltiples carpetas configuradas.

Por cierto, el contenido de este archivo de configuración se ve algo así.

{
    "folders": [
        {
            "path": "frontend-project"
        },
        {
            "path": "backend-project"
        }
    ],
    "settings": {}
}

Como puedes ver, solo registra qué carpetas abrir. No es una caja negra, y entender cómo funciona te permitirá aplicarlo de manera más efectiva.

Conclusión: Haz de las herramientas tu aliado y despliega tus alas creativas

Este ha sido un artículo largo, pero si comprendes firmemente el contenido explicado aquí, tendrás un conocimiento suficiente de las operaciones básicas para la gestión de archivos en VSCode. Finalmente, repasemos los puntos importantes una vez más.

• Abrir una "Carpeta" en lugar de archivos individuales es el comienzo de todo.
• Domina la UI (iconos) del Explorador para organizar tus archivos.
• Ten cuidado con las "rutas rotas" en las operaciones de archivo (especialmente al mover y cambiar el nombre).
• Usa conscientemente el "Modo de Vista Previa (un solo clic)" y el "Modo Normal (doble clic)" para las pestañas.
• Mejora drásticamente la eficiencia del desarrollo abriendo HTML y CSS simultáneamente con la "Pantalla Dividida".

Una vez que aprendas estas operaciones, podrás hacerlas sin pensar. Como dice el refrán, "la práctica hace al maestro". Usando este artículo como referencia, por favor intenta crear y eliminar muchos archivos y carpetas en tu propio PC. Una vez que tu ansiedad por las herramientas desaparezca, podrás concentrarte más en la codificación en sí, y tanto el aprendizaje como la creación serán mucho más agradables de lo que son ahora. ¡Te estoy animando!