Editor y herramientas: VS Code, Emmet y DevTools

Para escribir HTML basta con el Bloc de notas, pero nadie trabaja así. Un buen editor de código te avisa de errores, cierra etiquetas por ti y te ahorra miles de pulsaciones; las herramientas para desarrolladores del navegador te dejan ver por dentro cualquier página y averiguar por qué algo no funciona. En esta lección vas a instalar y configurar Visual Studio Code, aprender los atajos de Emmet y manejar lo básico de las DevTools. Son las herramientas que usarás todos los días, en este curso y en tu trabajo.

El editor: Visual Studio Code

Visual Studio Code (VS Code) es un editor de código gratuito para Windows, macOS y Linux. Es, con diferencia, el más usado en desarrollo web. Hay alternativas (WebStorm, Zed, Sublime Text), y lo que aprendas aquí te sirve en casi todas, pero si empiezas, empieza por VS Code.

Descárgalo desde su web oficial, code.visualstudio.com. Al abrirlo por primera vez:

1. Si lo quieres en español, instala la extensión Spanish Language Pack y reinicia.
2. Crea una carpeta para tu proyecto (por ejemplo, mi-web) y ábrela con Archivo > Abrir carpeta. Trabaja siempre con la carpeta entera abierta, no con archivos sueltos: así el editor conoce todos tus archivos y puede autocompletar rutas.
3. En el panel de la izquierda (el Explorador) crea tu index.html.

Ajustes recomendados

Abre la configuración con Ctrl + , (Cmd + , en Mac) y busca estas opciones:

Ajuste	Valor	Por qué
Files: Auto Save	onFocusChange	Guarda solo al cambiar de ventana. Olvidarse de guardar es el error número uno
Editor: Tab Size	2	La sangría más habitual en HTML y CSS
Editor: Word Wrap	on	Las líneas largas se ven enteras, sin barra horizontal
Editor: Linked Editing	activado	Al cambiar <div> por <section>, la etiqueta de cierre cambia también
Editor: Format On Save	activado	Ordena la sangría al guardar (necesita un formateador, mira abajo)

Extensiones útiles

Las extensiones añaden funciones al editor. Se instalan desde el icono de los cuadraditos de la barra lateral (Ctrl + Mayús + X). Para empezar, no necesitas más que estas:

• Live Server: abre tu página en el navegador a través de un pequeño servidor local y la recarga sola cada vez que guardas. La explicamos más abajo.
• Prettier: formatea el código (sangría, comillas, saltos de línea) siempre igual. Tras instalarla, elígela como formateador por defecto en el ajuste Editor: Default Formatter.
• HTMLHint o un validador similar: marca en rojo errores de HTML mientras escribes, como atributos repetidos o etiquetas sin cerrar.
• Error Lens: muestra el mensaje de error al final de la propia línea, en lugar de esconderlo en un panel.

Consejo: no instales veinte extensiones el primer día. Cada una consume memoria y algunas se pisan entre sí. Añade una solo cuando sepas qué problema te resuelve.

Atajos que vas a usar a diario

Windows	Mac	Qué hace
Ctrl + S	Cmd + S	Guardar
Ctrl + /	Cmd + /	Comentar o descomentar la línea
Alt + ↑ / Alt + ↓	Option + ↑ / ↓	Mover la línea arriba o abajo
Mayús + Alt + ↓	Mayús + Option + ↓	Duplicar la línea
Ctrl + D	Cmd + D	Seleccionar la siguiente aparición de la palabra (para editar varias a la vez)
Alt + clic	Option + clic	Añadir más cursores
Mayús + Alt + F	Mayús + Option + F	Formatear el documento
Ctrl + P	Cmd + P	Abrir un archivo por su nombre
Ctrl + Mayús + P	Cmd + Mayús + P	Paleta de comandos: busca cualquier acción del editor

En Linux casi todos son iguales que en Windows. Si alguno no funciona, búscalo en Archivo > Preferencias > Métodos abreviados de teclado.

Live Server: tu web en localhost

Si abres un .html con doble clic, el navegador lo carga con una dirección file:///..., sin servidor. Como viste en cómo funciona la web, algunas cosas no funcionan así: las rutas que empiezan por /, los módulos de JavaScript o fetch.

Con Live Server instalado, haz clic derecho sobre tu index.html y elige Open with Live Server (o pulsa Go Live en la barra inferior). Se abrirá el navegador con una dirección como http://127.0.0.1:5500/index.html. A partir de ahí:

• Cada vez que guardes, la página se recarga sola.
• Tu web se sirve por HTTP, igual que en un servidor real.

Para pararlo, pulsa otra vez en la barra inferior, donde ahora pone el número de puerto.

Nota: si alguna vez trabajas sin VS Code, puedes lanzar un servidor local desde la terminal, dentro de la carpeta del proyecto, con python3 -m http.server (si tienes Python) o npx serve (si tienes Node.js).

Emmet: escribe HTML con abreviaturas

Emmet es un sistema de abreviaturas que viene incluido en VS Code. Escribes una expresión corta, pulsas Tab (o Intro cuando aparece la sugerencia) y se convierte en HTML completo.

El esqueleto de la página

Escribe ! en un archivo .html vacío y pulsa Tab:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

</body>
</html>

Cambia lang="en" por lang="es" y escribe un título de verdad. Si no quieres cambiarlo cada vez, añade en la configuración de VS Code (en formato JSON) "emmet.variables": { "lang": "es" }.

Las reglas básicas

Símbolo	Significado	Abreviatura	Resultado
nombre	Etiqueta	p	<p></p>
.	Clase	p.aviso	<p class="aviso"></p>
#	id	section#contacto	<section id="contacto"></section>
>	Hijo (dentro de)	nav>a	<nav><a href=""></a></nav>
+	Hermano (a continuación)	h2+p	<h2></h2><p></p>
*	Repetir	li*3	Tres <li></li>
$	Número de la repetición	li.paso$*3	class="paso1", paso2, paso3
{}	Texto dentro	h2{Horarios}	<h2>Horarios</h2>
[]	Atributos	input[name=email]	<input type="text" name="email">
()	Agrupar	(header>h1)+main	Un <header> con su <h1> y, al lado, un <main>

Si no pones etiqueta, Emmet usa div: .tarjeta produce <div class="tarjeta"></div>.

Ejemplos que ahorran tiempo

Una lista de navegación con tres enlaces:

ul.menu>li*3>a{Enlace $}

<ul class="menu">
  <li><a href="">Enlace 1</a></li>
  <li><a href="">Enlace 2</a></li>
  <li><a href="">Enlace 3</a></li>
</ul>

La estructura de una página:

header>nav^main>h1{Rutas por Cantabria}+p^footer

El símbolo ^ sube un nivel: después de nav, en lugar de seguir dentro del header, el main se coloca a su lado.

<header>
  <nav></nav>
</header>
<main>
  <h1>Rutas por Cantabria</h1>
  <p></p>
</main>
<footer></footer>

Y algunos atajos sueltos muy prácticos:

Abreviatura	Resultado
img	<img src="" alt="">
link:css	<link rel="stylesheet" href="style.css">
script:src	<script src=""></script>
input:email	<input type="email" name="" id="">
a:mail	<a href="mailto:"></a>
lorem20	20 palabras de texto de relleno

Emmet también funciona en CSS: m10 se convierte en margin: 10px; y df en display: flex;.

Consejo: Emmet es para escribir rápido, no para pensar menos. Sigue revisando que el resultado sea semántico y que las imágenes lleven un alt con contenido.

Las herramientas del navegador (DevTools)

Todos los navegadores modernos traen un panel para desarrolladores. Se abre con:

• F12 o Ctrl + Mayús + I en Windows y Linux.
• Cmd + Option + I en Mac. En Safari, antes hay que activar Ajustes > Avanzado > Mostrar funciones para desarrolladores web.
• O clic derecho sobre cualquier parte de la página y Inspeccionar.

Los nombres cambian un poco entre Chrome, Edge y Firefox, pero las pestañas principales son las mismas.

Elementos: el HTML en vivo

La pestaña Elementos (Elements; en Firefox, Inspector) muestra el árbol del DOM de la página: el HTML tal y como lo tiene el navegador ahora mismo.

• Pasa el ratón por las etiquetas y verás qué zona de la página ocupan.
• Haz doble clic en un texto o un atributo para cambiarlo. El cambio es temporal: desaparece al recargar.
• A la derecha, el panel Estilos muestra qué reglas CSS se aplican a ese elemento, de qué archivo vienen y cuáles están tachadas porque otra las anula. Puedes activarlas, desactivarlas y probar valores nuevos.
• El dibujo de cajas de colores (pestaña Calculado o Computed) muestra el modelo de caja: contenido, relleno, borde y margen.

Nota: “Ver código fuente” (Ctrl + U) no es lo mismo que Elementos. El código fuente es el HTML que envió el servidor. Elementos muestra el DOM actual, que incluye lo que el navegador ha corregido (por ejemplo, etiquetas que no cerraste) y lo que JavaScript ha añadido o cambiado.

Consola: mensajes y errores

La Consola (Console) muestra los errores de la página en rojo y los avisos en amarillo. Si una imagen no carga o un script falla, el motivo suele aparecer aquí, con el nombre del archivo y la línea.

También puedes escribir JavaScript directamente y ver el resultado al pulsar Intro. Prueba en cualquier página:

document.title

Te devolverá el texto del <title>. Cuando empieces con JavaScript, console.log() será tu herramienta principal para ver qué está pasando; lo verás a fondo en depuración.

Red: todas las peticiones

La pestaña Red (Network) lista cada archivo que pide la página. Ábrela antes de recargar, porque solo registra lo que ocurre mientras está abierta. Para cada petición verás:

• El nombre del archivo y su código de estado: un 404 en rojo es una ruta mal escrita.
• El tipo (documento, hoja de estilos, script, imagen, fuente).
• El tamaño y el tiempo que ha tardado.

Dos casillas muy útiles en la parte superior:

• Desactivar caché (Disable cache): obliga a descargar todo de nuevo mientras las DevTools estén abiertas. Úsala cuando cambies un CSS y “no se vea el cambio”.
• Limitación (Throttling): simula una conexión lenta, como un móvil con poca cobertura. Así ves lo que sufre tu usuario real. Lo aprovecharás en rendimiento.

Modo dispositivo: probar en tamaño móvil

Pulsa el icono del móvil y la tableta en la barra de las DevTools (o Ctrl + Mayús + M). La página se mostrará con el tamaño de un teléfono. Arriba puedes elegir un modelo concreto, escribir un ancho a mano o girar la pantalla.

Es imprescindible para el diseño responsive, con dos límites que conviene conocer: simula el tamaño, pero no la velocidad real ni el navegador real del móvil. Antes de dar por terminada una web, pruébala también en un teléfono de verdad.

Otras pestañas que irás descubriendo

• Aplicación (Application; en Firefox, Almacenamiento): cookies, localStorage y el manifiesto de la web.
• Lighthouse: genera un informe de rendimiento, accesibilidad, buenas prácticas y SEO. Solo está en Chrome y Edge.
• Fuentes (Sources; en Firefox, Depurador): para detener el JavaScript línea a línea.

El validador de HTML

Los navegadores corrigen tus errores en silencio, así que una página puede “verse bien” y estar mal escrita. El validador del W3C (validator.w3.org) revisa tu código y te dice qué no cumple el estándar, en qué línea y por qué. Puedes pegarle el código, subir el archivo o darle la dirección de una página publicada.

Cómo leer sus mensajes, qué errores detecta y qué no, y cómo usar Lighthouse lo tienes explicado en buenas prácticas. La idea clave: valida antes de dar un trabajo por terminado y busca cero errores.

Un flujo de trabajo típico

1. Abres la carpeta del proyecto en VS Code.
2. Lanzas Live Server y colocas el navegador al lado del editor.
3. Escribes con ayuda de Emmet; al guardar, la página se recarga.
4. Si algo no se ve como esperas, abres Elementos para ver el HTML y el CSS reales.
5. Si algo no aparece, miras la Consola y la pestaña Red.
6. Pruebas en modo dispositivo y, al final, pasas el validador y Lighthouse.

Errores frecuentes

• Editar y no guardar. El navegador muestra el archivo guardado, no lo que ves en el editor. Un punto blanco en la pestaña del archivo indica que hay cambios sin guardar.
• Hacer cambios en DevTools y esperar que se queden. Lo que editas en Elementos o Estilos se pierde al recargar. Cópialo a tus archivos.
• “He cambiado el CSS y no se nota”. Suele ser la caché: recarga forzada con Ctrl + F5 (o Cmd + Mayús + R) o marca Desactivar caché.
• Abrir la pestaña Red después de cargar. Sale vacía. Ábrela y recarga.
• Abrir un archivo suelto en lugar de la carpeta. Pierdes el autocompletado de rutas y Live Server puede no funcionar.
• Fiarse solo del modo dispositivo. Prueba al menos una vez en un móvil real.

Resumen

Herramienta	Para qué
VS Code	Escribir código, con ayuda y atajos
Live Server	Servir la web en localhost y recargar al guardar
Prettier	Formatear el código siempre igual
Emmet	Escribir HTML con abreviaturas: !, ., #, >, +, *, {}
Elementos	Ver y probar cambios en el HTML y el CSS en vivo
Consola	Ver errores y probar JavaScript
Red	Ver cada petición, su código de estado, peso y tiempo
Modo dispositivo	Probar la página con tamaño de móvil
Validador W3C	Encontrar errores de HTML

Con el entorno listo, en la siguiente lección escribirás tu primera página completa: la estructura básica de un documento HTML.