VS Code para principiantes

Ve a code.visualstudio.com/download y pulsa el botón de descarga correspondiente a tu sistema operativo. En Windows y Mac es un simple instalador: doble clic y "Siguiente" hasta el final, sin necesidad de cambiar ninguna opción.

Una vez instalado, búscalo como cualquier otro programa ("Visual Studio Code" en el buscador de tu sistema) y ábrelo. Ya tienes tu editor listo — el resto de esta ruta te enseña a moverte por él.

Al abrir VS Code por primera vez verás una pantalla de bienvenida. Lo primero que necesitas es un sitio donde guardar tus archivos: en Archivo → Abrir carpeta... (File → Open Folder...), elige o crea una carpeta vacía en tu ordenador. Esa carpeta pasa a ser tu "proyecto" — todo lo que crees ahí dentro aparecerá en el editor.

Con una carpeta abierta, la pantalla se divide en unas pocas zonas fijas que vas a usar constantemente:

• Barra de actividades (columna de iconos a la izquierda del todo) — cambia entre Explorador, Buscar, Control de versiones (Git) y Extensiones. Es tu menú principal.
• Explorador — el árbol de archivos de tu carpeta. Un clic abre un archivo; clic derecho crea archivos y carpetas nuevas.
• Editor — la zona central, donde escribes. Cada archivo abierto tiene su propia pestaña arriba, como en un navegador.
• Terminal integrada — se abre con Ctrl + ñ (o desde el menú Ver → Terminal). Es una terminal normal, pero ya situada dentro de tu carpeta de proyecto — la usarás en la ruta de Servidor.

Hay un atajo que merece la pena aprender desde el primer día: la paleta de comandos, con Ctrl + Mayús + P. Abre un buscador desde el que puedes ejecutar cualquier acción del editor escribiendo su nombre, sin tener que recordar en qué menú vive.

VS Code hace mucho de fábrica, pero unas pocas extensiones lo hacen bastante más cómodo desde el primer día. Esto es lo que uso yo mismo para trabajar — nada de más, para no complicarte. Para instalar cualquiera: pulsa el icono de piezas de puzle en la barra de actividades (Extensiones), busca el nombre y pulsa Install.

En la lección 2 viste el icono de Control de versiones en la barra de actividades, sin entrar en detalle. Ahora toca: es el icono de Git, y es lo que te permite guardar el historial de cambios de tu proyecto — no solo el archivo tal y como está ahora, sino cada versión anterior, con la posibilidad de volver atrás si algo se rompe.

Git es el sistema que lleva ese historial. Piensa en él como un "guardar partida" para tu código: en vez de tener un único estado (el archivo tal cual está ahora), guardas fotos con nombre en los momentos que tú decidas, y puedes volver a cualquiera de ellas.

Para empezar a llevar el historial de una carpeta, se inicializa un repositorio una sola vez, desde la terminal integrada (Ctrl + Ñ, de la lección 2):

A partir de ahí, cada vez que modificas un archivo, VS Code lo marca automáticamente en el panel de Control de versiones — verás el número de cambios pendientes junto al icono. El flujo de trabajo tiene siempre estos tres pasos:

• Preparar (stage) — eliges qué cambios quieres incluir en esta "foto", pulsando el + junto a cada archivo. Puedes preparar todos o solo algunos.
• Confirmar (commit) — escribes un mensaje corto que describe el cambio y pulsas el ✓ (o Ctrl + Enter en el cuadro de mensaje). Eso guarda la foto en el historial, con fecha y mensaje.
• Repetir — sigues trabajando, y cuando tengas otro cambio con sentido propio, vuelves a preparar y confirmar.

Antes de preparar un cambio, merece la pena mirar el diff: haz clic en cualquier archivo modificado de la lista y VS Code te muestra, línea a línea, qué se ha borrado (en rojo) y qué se ha añadido (en verde), comparado con la última foto guardada. Es la forma más rápida de detectar un cambio que no querías.

Ctrl + P (lección 2) busca un archivo por su nombre, pero muchas veces lo que buscas es un texto dentro de tus archivos — dónde se usa una clase CSS, dónde aparece un texto que quieres cambiar. Para eso está la búsqueda global, con Ctrl + Mayús + F: busca en todos los archivos de la carpeta abierta a la vez, y te muestra cada coincidencia agrupada por archivo.

Al lado del campo de búsqueda hay un icono de flecha (⌄) que despliega un campo de reemplazar: escribes el texto nuevo, y puedes sustituir una coincidencia concreta o todas de golpe con un solo clic. Es mucho más seguro que un buscar-y-reemplazar a ciegas, porque antes de tocar nada ves la lista completa de dónde vas a hacer el cambio.

Dentro de un mismo archivo, el multi-cursor te deja escribir el mismo cambio en varios sitios a la vez, en vez de repetir la edición uno a uno. La forma más rápida: coloca el cursor sobre una palabra y pulsa Ctrl + D — selecciona esa palabra y, cada vez que repites el atajo, añade la siguiente aparición a la selección. Escribes una sola vez y el cambio se aplica en todas a la vez.

Si en cambio quieres cursores en sitios concretos que no comparten texto, Alt + Clic añade un cursor extra en cada punto donde hagas clic — útil, por ejemplo, para añadir ; al final de varias líneas distintas de una sola vez.