VS Code + HTML y CSS: lo esencial
Las extensiones son complementos que puedes instalar en Visual Studio Code para agregar nuevas funciones o mejorar las que ya existen. Por ejemplo: ejecutar código directamente, revisar ortografía, formatear el código, conectarte a servidores remotos, entre muchas otras cosas.
¿Cómo instalar las extensiones?
Abre Visual Studio Code.
Haz clic en el ícono de extensiones en la barra lateral izquierda (el que parece una pieza de rompecabezas 🧩).
Busca la extensión por su nombre.
Haz clic en "Instalar" y listo.
Aquí verás una selección de las extensiones pensada especialmente para ti, que estás dando tus primeros pasos con HTML y CSS. Son fáciles de usar y te van a ayudar a avanzar más rápido y con menos frustraciones.
Live Server
Esta es la más importante. Abre tu archivo HTML en el navegador y se actualiza automáticamente cada vez que lo guardas. ¡Así ves en tiempo real cómo va quedando tu página!
🟢 Ideal para: practicar HTML y CSS, hacer ajustes rápidos y ver los resultados al instante.
🔧 Cómo usarla:
- Instálala desde el panel de extensiones de VS Code.
- Abre un archivo .html que esté dentro de una carpeta.
- Haz clic derecho y selecciona "Open with Live Server".
Otras extensiones útiles y comunes
Es como un organizador automático de tu código. Si pones mal los espacios, sangrías o comillas, Prettier lo arregla con solo un clic o al guardar.
🟢 Ideal para: mantener el código limpio, ordenado y profesional (aunque estés empezando).
🔧 Cómo usarla:
🟢 Ideal para: mantener el código limpio, ordenado y profesional (aunque estés empezando).
🔧 Cómo usarla:
- Instálala.
- Presiona Ctrl + Shift + P, escribe "Format Document" y dale enter.
- Activa la opción para que formatee automáticamente al guardar:
- Archivo > Preferencias > Configuración y busca "formatOnSave".
¿Te cuesta escribir en inglés? Esta extensión te avisa si escribiste mal una palabra, aunque esté dentro del código o en los comentarios.
🟢 Ideal para: evitar errores en clases, nombres de archivos, atributos o comentarios.
🔧 Cómo usarla:
🟢 Ideal para: evitar errores en clases, nombres de archivos, atributos o comentarios.
🔧 Cómo usarla:
- Solo instálala y comienza a escribir.
- Las palabras mal escritas se subrayan en azul.
- Haz clic derecho sobre la palabra para ver sugerencias.
Cuando cambias el nombre de una etiqueta HTML de apertura (<div>), automáticamente se cambia también la de cierre (</div>).
🟢 Ideal para: editar etiquetas HTML de forma segura.
Así evitas errores y te ahorra tiempo.
🟢 Ideal para: editar etiquetas HTML de forma segura.
Cada vez que escribes <div>, la extensión completa automáticamente el cierre </div> por ti.
🟢 Ideal para: escribir HTML más rápido y sin errores de cierre.
🟢 Ideal para: escribir HTML más rápido y sin errores de cierre.
Aprender a crear tus primeras páginas web es un paso enorme — ¡y ya lo estás dando! Estas extensiones no solo te ahorrarán tiempo, también te harán disfrutar más del proceso. No te preocupes por saber todo desde el principio: equivócate, prueba, rompe cosas… y vuelve a intentarlo.
Leer otros artículos de Blog
Lee otros artículos relevantes del mundo de la tecnología y el espíritu empresarial.