Tu entorno de desarrollo profesional

Visual Studio Code es un editor de texto potente, ligero y completamente gratuito, desarrollado por Microsoft.

🎨

Resaltado de sintaxis

HTML, CSS y JavaScript se colorean automáticamente para que leer código sea mucho más fácil.

Autocompletado inteligente

IntelliSense sugiere etiquetas, propiedades y valores mientras escribís, ahorrando tiempo y errores.

🔌

Extensiones

Miles de plugins gratuitos para frameworks, linters, iconos, temas y herramientas de diseño.

📂

Explorador de archivos

Navegá y editá todos los archivos de tu proyecto desde el panel lateral sin salir del editor.

index.html
1<!-- Mi primer sitio web -->
2<!DOCTYPE html>
3<html lang="es">
4<head>
5  <meta charset="UTF-8">
6  <title>Mi sitio</title>
7  <link rel="stylesheet" href="style.css">
8</head>
9<body>
10  <h1>¡Hola mundo!</h1>
11  <p>Mi primer proyecto.</p>
12</body>
13</html>

Cómo instalar y configurar VS Code

1

Descargar VS Code

Visitá code.visualstudio.com y descargá el instalador para tu sistema operativo: Windows, macOS o Linux. Es completamente gratuito.

🔗 code.visualstudio.com
2

Instalar el programa

Ejecutá el instalador y seguí los pasos. Se recomienda marcar la opción "Agregar al PATH" para poder abrir VS Code desde la terminal.

⏱ 2-3 minutos
3

Abrir tu carpeta de proyecto

Usá Archivo → Abrir Carpeta para cargar tu proyecto. VS Code mostrará todos tus archivos en el panel lateral izquierdo.

📁 Archivo → Abrir Carpeta
4

Instalar Live Server

Esta extensión lanza un servidor local que actualiza el navegador automáticamente cada vez que guardás tu archivo HTML o CSS.

⚡ Extensión recomendada #1

Extensiones esenciales

Estas extensiones gratuitas mejoran enormemente tu experiencia de desarrollo web.

Imprescindible

Live Server

Previsualiza tu sitio en el navegador con recarga automática al guardar cambios.

ritwickdey.liveserver
Imprescindible

Prettier

Formatea automáticamente tu código HTML, CSS y JS para mantenerlo limpio y legible.

esbenp.prettier-vscode
Imprescindible

Auto Rename Tag

Al renombrar una etiqueta HTML de apertura, la de cierre se actualiza sola.

formulahendry.auto-rename-tag
Recomendada

CSS Peek

Permite ver la definición CSS de una clase al pasar el mouse sobre ella en el HTML.

pranaygp.vscode-css-peek
Recomendada

Color Highlight

Muestra un pequeño cuadrado del color real al escribir un valor hexadecimal en CSS.

naumovs.color-highlight
Recomendada

Material Icon Theme

Iconos coloridos para cada tipo de archivo en el explorador lateral. Más fácil de navegar.

pkief.material-icon-theme
⌨️

Atajo de teclado clave

Presioná Alt + Shift + F (Windows) o Option + Shift + F (Mac) para formatear automáticamente cualquier archivo con Prettier instalado. Con el tiempo, mantener el código ordenado se vuelve un hábito automático.

¿Listo para escribir tu primer código?

Descargá VS Code y seguí los pasos de esta guía para crear tu primer archivo HTML.