Cómo instalar y configurar Visual Studio Code para programar

Antes de escribir tu primera línea de código necesitas un sitio donde escribirla. En este artículo vas a instalar Visual Studio Code, configurarlo con lo mínimo indispensable y crear tu primer archivo HTML para verlo funcionando en el navegador en tiempo real. Es la guía pensada para quien nunca ha instalado un editor de código y quiere hacerlo bien a la primera.

Qué es Visual Studio Code y por qué es el editor recomendado

Visual Studio Code (VS Code) es un editor de código gratuito creado por Microsoft. No es un lenguaje de programación ni un programa «todo en uno»: es el sitio donde escribes y organizas tus archivos de HTML, CSS, JavaScript y prácticamente cualquier otro lenguaje.

Se ha convertido en uno de los editores más usados en desarrollo web por varios motivos:

• Es gratuito y funciona en Windows, macOS y Linux.
• Es ligero: arranca rápido incluso en ordenadores modestos.
• Tiene un sistema de extensiones que añade justo lo que necesitas, sin sobrecargar el programa.
• Incluye una terminal integrada, así que no hace falta cambiar de ventana para ejecutar comandos.

No es la única opción (existen alternativas como Sublime Text o WebStorm), pero para empezar es la más recomendable por su comunidad y por la cantidad de tutoriales y extensiones disponibles.

Descargar e instalar Visual Studio Code

1. Entra en code.visualstudio.com desde tu navegador.
2. La web detecta tu sistema operativo y te muestra un botón de descarga. Haz clic en él.
3. Abre el instalador descargado y sigue los pasos (más abajo tienes las indicaciones para cada sistema).
4. Abre Visual Studio Code. Debería aparecer una pantalla de bienvenida.

• En Windows: durante la instalación aparecen varias casillas opcionales. Marca al menos «Agregar a PATH» y las opciones «Abrir con Code» del menú contextual. Te ahorrarán pasos más adelante.
• En macOS: arrastra la aplicación Visual Studio Code a la carpeta Aplicaciones, igual que con cualquier otra app.
• En Linux: puedes usar el paquete .deb o .rpm según tu distribución, o instalarlo desde el gestor de paquetes de tu sistema si está disponible.

No hace falta crear ninguna cuenta ni pagar nada para empezar a usarlo.

Primer vistazo a la interfaz

Al abrir VS Code por primera vez, fíjate en estas tres zonas, que vas a usar en prácticamente todos los artículos de este blog:

• Explorador de archivos (el icono de hojas apiladas, a la izquierda): muestra la carpeta de tu proyecto y todos sus archivos.
• Editor (la zona central, la más grande): aquí escribes el código. Puedes tener varios archivos abiertos en pestañas.
• Terminal integrada: se abre desde el menú Terminal → Nuevo terminal. Junto a esa opción del menú verás el atajo de teclado que corresponde a tu sistema. Es una línea de comandos dentro del propio editor.

No necesitas memorizar nada más por ahora. El resto de paneles (búsqueda, control de versiones, depuración) los iremos viendo en próximos artículos.

Extensiones esenciales para empezar

Las extensiones son pequeños complementos que añaden funciones a VS Code. Instalar demasiadas de golpe solo consigue que el editor vaya más lento y resulte confuso, así que para empezar con HTML, CSS y JavaScript te recomiendo únicamente estas cuatro:

• Live Server, de Ritwick Dey: abre tu HTML en el navegador y lo recarga automáticamente cada vez que guardas un cambio. La vas a usar en este mismo artículo.
• Prettier – Code formatter: ordena automáticamente la indentación y el formato de tu código al guardar. Evita muchos errores tontos por espacios o llaves mal colocadas.
• Auto Rename Tag: si cambias una etiqueta HTML de apertura (por ejemplo, <div> por <section>), renombra sola la etiqueta de cierre correspondiente.
• Spanish Language Pack: traduce los menús y mensajes de VS Code al español. Es opcional: muchos tutoriales y foros usan capturas en inglés, así que tampoco pasa nada si prefieres dejarlo en inglés desde el principio.

Para instalarlas:

1. Haz clic en el icono de los cuadraditos en la barra lateral izquierda (Extensiones) o pulsa Ctrl + Mayús + X (Cmd + Mayús + X en macOS).
2. Escribe el nombre de la extensión en el buscador.
3. Comprueba que el autor coincide con el indicado arriba: hay extensiones con nombres parecidos de otros autores.
4. Haz clic en «Instalar».

No hace falta reiniciar VS Code después de instalar una extensión.

Crea tu primera carpeta de proyecto

Antes de crear archivos sueltos, acostúmbrate a trabajar siempre dentro de una carpeta de proyecto:

1. En tu ordenador, crea una carpeta nueva llamada, por ejemplo, mi-primer-proyecto.
2. En VS Code, ve a Archivo → Abrir carpeta… (o File → Open Folder…) y selecciona esa carpeta.
3. La carpeta aparecerá en el Explorador, en la barra lateral izquierda, todavía vacía.

Trabajar por carpetas, en lugar de con archivos sueltos, es como se organizan los proyectos en prácticamente todas las herramientas que usarás más adelante.

Crea tu primer archivo y compruébalo con Live Server

Dentro de la carpeta, crea un archivo llamado index.html (con el icono de «archivo nuevo» que aparece al pasar el ratón sobre el nombre de la carpeta en el Explorador) y escribe este contenido:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mi primer proyecto</title>
</head>
<body>
  <h1>¡Hola, mundo!</h1>
  <p>Esta es mi primera página creada con Visual Studio Code.</p>
  <script src="script.js"></script>
</body>
</html>

Es la estructura mínima de cualquier página HTML: declara el idioma, el juego de caracteres y un título para la pestaña, y muestra un contenido visible (un título <h1> y un párrafo). La última línea carga un archivo JavaScript aparte, que vas a crear ahora.

Crea un segundo archivo, script.js, en la misma carpeta:

// Este mensaje aparece en la consola del navegador (F12 > Consola)
console.log("VS Code está listo para programar");

Guarda los dos archivos (Ctrl + S, o Cmd + S en macOS). Después, haz clic derecho sobre index.html en el Explorador y elige «Open with Live Server». Se abrirá tu navegador mostrando la página, normalmente en una dirección como http://127.0.0.1:5500.

Prueba a cambiar el texto del <h1> y a guardar de nuevo: el navegador se actualizará solo, sin que tengas que recargar la página. Si abres las herramientas de desarrollador del navegador (F12) y vas a la pestaña «Consola», verás también el mensaje que imprime script.js.

Errores comunes al instalar o configurar VS Code

• No marcar «Agregar a PATH» en Windows. Si más adelante escribes code . en una terminal para abrir una carpeta y no funciona, este suele ser el motivo. Puedes solucionarlo reinstalando VS Code y marcando esa casilla.
• Abrir un archivo suelto en vez de una carpeta. Si usas Archivo → Abrir archivo… en lugar de Abrir carpeta…, el Explorador no mostrará el resto de tus archivos y Live Server puede no encontrar script.js o tus hojas de estilo. Trabaja siempre por carpetas.
• Instalar extensiones «por si acaso». Ralentizan el editor y complican encontrar la que realmente necesitas. Empieza solo con las de este artículo.
• Confundir Live Server con hacer doble clic en el HTML. Abrir el archivo directamente también muestra el resultado, pero no se recarga solo al guardar y, cuando uses JavaScript más avanzado, puede dar errores que Live Server evita.

Practica

1. Instala Visual Studio Code y las extensiones de este artículo.
2. Crea una carpeta llamada practica-vscode, ábrela desde VS Code y añade un archivo index.html. Escribe ! y pulsa la tecla Tab: VS Code generará automáticamente la estructura básica gracias a Emmet, un sistema de atajos integrado en el editor. Complétala con un título y un párrafo sobre ti.
3. Abre esa página con Live Server, cambia algo del texto y comprueba que el navegador se actualiza solo al guardar.
4. Abre la terminal integrada (Terminal → Nuevo terminal) y escribe node --version. Si tienes Node.js instalado, verás un número de versión; si no, no pasa nada: lo instalaremos cuando lo necesitemos.

Siguiente paso

Con el editor instalado, lo mejor es usarlo cuanto antes en un proyecto real. Si todavía no lo has hecho, sigue el tutorial Cómo crear tu primera página web con HTML y CSS: con Live Server verás cada cambio al instante mientras construyes tu tarjeta de presentación.

También te puede interesar

• Cómo crear tu primera página web con HTML y CSS (paso a paso)
• Cómo empezar a programar desde cero paso a paso
• Qué es JavaScript y para qué sirve