Visual Studio Code (VS Code) es el editor de código más usado en desarrollo web.
Abre siempre la carpeta del proyecto.
Ctrl + Mayús + P (paleta) y Ctrl + P (ir a fichero) son los atajos clave.
Emmet escribe HTML y CSS por ti con abreviaturas.
Formato al guardar, pocas extensiones y de confianza.
Visual Studio Code (VS Code) es el editor de código más usado en desarrollo web. Es gratuito, funciona en Windows, macOS y Linux, y se amplía con extensiones. Vas a pasar muchas horas en él: diez minutos aprendiendo a usarlo bien te ahorran días.
Descárgalo de code.visualstudio.com. Ábrelo, pulsa Ctrl + Mayús + P (en Mac, Cmd + Mayús + P), escribe Configure Display Language y elige Español. (Instala el paquete de idioma si te lo pide.) Abre siempre una carpeta, no un fichero suelto: Archivo → Abrir carpeta. Así VS Code conoce todo el proyecto (rutas, búsqueda, Git).
ZonaPara qué Barra de actividad (izquierda)Cambiar de panel: explorador, búsqueda, control de código fuente (Git), extensiones ExploradorLos ficheros y carpetas del proyecto: crear, renombrar, mover EditorDonde escribes; puedes dividirlo para ver dos ficheros a la vez Panel inferiorTerminal, problemas (errores) y salida Barra de estado (abajo)Idioma del fichero, rama de Git, errores
Ctrl + Mayús + P abre la paleta de comandos: escribe lo que quieras hacer ("formatear", "tema", "terminal") y VS Code lo busca. Si solo recuerdas un atajo, que sea este. Con Ctrl + P (sin Mayús) saltas a cualquier fichero escribiendo su nombre.
Atajo (Windows/Linux)MacQué hace Ctrl + SCmd + SGuardar Ctrl + /Cmd + /Comentar o descomentar la línea Alt + ↑ / ↓Opción + ↑ / ↓Mover la línea arriba o abajo Mayús + Alt + ↓Mayús + Opción + ↓Duplicar la línea Ctrl + DCmd + DSeleccionar la siguiente aparición de lo seleccionado (editar varias a la vez) Alt + clicOpción + clicPoner varios cursores Mayús + Alt + FMayús + Opción + FDar formato al documento Ctrl + ñCtrl + ñAbrir o cerrar la terminal (teclado español) Ctrl + BCmd + BMostrar u ocultar el panel lateral
VS Code trae Emmet, que convierte abreviaturas en código. Escribe y pulsa Tab:
EscribesObtienes !El esqueleto completo de un documento HTML ul>li*3Una lista con tres elementos nav>a[href=#]*4Un nav con cuatro enlaces .tarjeta>h3+p<div class="tarjeta"><h3></h3><p></p></div> m1r (en CSS)margin: 1rem;
Abre los ajustes con Ctrl + , y busca:
Format On Save (formatear al guardar): activado. Auto Save (guardado automático): afterDelay, para no perder cambios. Word Wrap (ajuste de línea): on, para no desplazarte en horizontal. Font Size y Tab Size: 2 espacios de sangría, la convención más habitual en web.
Se instalan desde el panel de Extensiones (Ctrl + Mayús + X). Instala pocas y de autores conocidos (mira las descargas y quién la publica):
Live Preview (Microsoft): vista previa de tu web que se actualiza al guardar. Prettier: da un formato uniforme a HTML, CSS y JavaScript. Error Lens: muestra los errores en la misma línea. Tailwind CSS IntelliSense: autocompleta clases de Tailwind. Spanish - Code Spell Checker (con Code Spell Checker): corrige la ortografía de tus textos.
📌 Nota. VS Code trae integrado GitHub Copilot (asistente de IA). Mientras aprendes lo básico, desactiva las sugerencias automáticas (icono de Copilot en la barra de estado → desactivar las sugerencias) y aprende a escribir el código tú. Lo verás a fondo en la lección IA para programar: herramientas, contexto, tokens y MCP y en la lección Programar con un copiloto de IA.
El panel Control de código fuente muestra qué ficheros has cambiado, y permite hacer commit y sincronizar con GitHub. La terminal integrada se abre en la carpeta del proyecto: la usarás con npm.
Configura VS Code en español, con formato al guardar y guardado automático. Abre la carpeta de tu portfolio. Con Emmet, crea en diez segundos el esqueleto de index.html y un menú de cuatro enlaces. Con Ctrl + D, cambia a la vez las cuatro apariciones de una misma clase. Instala Live Preview y comprueba que la página se actualiza al guardar.
Abrir ficheros sueltos en lugar de la carpeta del proyecto: las rutas y la búsqueda fallan. No guardar (el punto blanco en la pestaña indica cambios sin guardar). Llenar el editor de extensiones: lo ralentizan y algunas no son de fiar. Editar el fichero equivocado (mira la ruta en la parte de arriba del editor).
Visual Studio Code (VS Code) es el editor de código más usado en desarrollo web.
Código del tema: ul>li*3
Visual Studio Code (VS Code) es el editor de código más usado en desarrollo web. Es gratuito, funciona en Windows, macOS y Linux, y se amplía con extensiones. Vas a pasar muchas horas en él: diez minutos aprendiendo a usarlo bien te ahorran días.
Ctrl + Mayús + P (en Mac, Cmd + Mayús + P), escribe Configure Display Language y elige Español. (Instala el paquete de idioma si te lo pide.)| Zona | Para qué |
|---|---|
| Barra de actividad (izquierda) | Cambiar de panel: explorador, búsqueda, control de código fuente (Git), extensiones |
| Explorador | Los ficheros y carpetas del proyecto: crear, renombrar, mover |
| Editor | Donde escribes; puedes dividirlo para ver dos ficheros a la vez |
| Panel inferior | Terminal, problemas (errores) y salida |
| Barra de estado (abajo) | Idioma del fichero, rama de Git, errores |
Ctrl + Mayús + P abre la paleta de comandos: escribe lo que quieras hacer ("formatear", "tema", "terminal") y VS Code lo busca. Si solo recuerdas un atajo, que sea este. Con Ctrl + P (sin Mayús) saltas a cualquier fichero escribiendo su nombre.
| Atajo (Windows/Linux) | Mac | Qué hace |
|---|---|---|
Ctrl + S | Cmd + S | Guardar |
Ctrl + / | Cmd + / | Comentar o descomentar la línea |
Alt + ↑ / ↓ | Opción + ↑ / ↓ | Mover la línea arriba o abajo |
Mayús + Alt + ↓ | Mayús + Opción + ↓ | Duplicar la línea |
Ctrl + D | Cmd + D | Seleccionar la siguiente aparición de lo seleccionado (editar varias a la vez) |
Alt + clic | Opción + clic | Poner varios cursores |
Mayús + Alt + F | Mayús + Opción + F | Dar formato al documento |
Ctrl + ñ | Ctrl + ñ | Abrir o cerrar la terminal (teclado español) |
Ctrl + B | Cmd + B | Mostrar u ocultar el panel lateral |
VS Code trae Emmet, que convierte abreviaturas en código. Escribe y pulsa Tab:
| Escribes | Obtienes |
|---|---|
! | El esqueleto completo de un documento HTML |
ul>li*3 | Una lista con tres elementos |
nav>a[href=#]*4 | Un nav con cuatro enlaces |
.tarjeta>h3+p | <div class="tarjeta"><h3></h3><p></p></div> |
m1r (en CSS) | margin: 1rem; |
Abre los ajustes con Ctrl + , y busca:
afterDelay, para no perder cambios.on, para no desplazarte en horizontal.Se instalan desde el panel de Extensiones (Ctrl + Mayús + X). Instala pocas y de autores conocidos (mira las descargas y quién la publica):
📌 Nota. VS Code trae integrado GitHub Copilot (asistente de IA). Mientras aprendes lo básico, desactiva las sugerencias automáticas (icono de Copilot en la barra de estado → desactivar las sugerencias) y aprende a escribir el código tú. Lo verás a fondo en la lección IA para programar: herramientas, contexto, tokens y MCP y en la lección Programar con un copiloto de IA.
index.html y un menú de cuatro enlaces.Ctrl + D, cambia a la vez las cuatro apariciones de una misma clase.