VS Code para principiantes: configuración completa 2026

Cuando empiezas a programar, nadie te explica que el editor que uses importa. Instalas VS Code porque todo el mundo lo usa, lo abres, ves un montón de iconos y paneles, y no sabes por dónde empezar. Y encima hay gente que lo tiene todo personalizado y parece que vuela escribiendo código.

Este tutorial es para que no pierdas tiempo con eso. Vamos a instalarlo, configurarlo con lo que realmente necesitas, y dejarlo listo para que puedas ponerte a programar sin distracciones.

Por qué VS Code y no otra cosa

La respuesta corta: porque es gratuito, funciona en Windows, Mac y Linux, y lo usa la mayoría de desarrolladores profesionales según el Stack Overflow Developer Survey 2024. Eso significa que si tienes un problema, hay miles de respuestas en internet.

Las alternativas tienen pegas concretas. Notepad++ se queda corto para cualquier cosa seria. WebStorm es de pago y bastante pesado. Atom lo cerraron en 2022. Sublime Text también es de pago pasado el período de prueba. VS Code cubre todo lo que necesitas siendo gratis.

Instalación paso a paso

Windows

Ve a code.visualstudio.com y haz clic en "Download for Windows". Ejecuta el instalador como administrador (clic derecho → "Ejecutar como administrador").

Durante la instalación hay cuatro casillas que la mayoría salta sin leer. No las saltes:

Linux (Ubuntu/Debian)

En Linux el proceso es un poco más largo que en los otros sistemas, pero no te asustes — es básicamente copiar y pegar en la terminal. Lo haces una vez y ya está:

# Añadir repositorio de Microsoft
wget -qO- https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor > packages.microsoft.gpg

sudo install -o root -g root -m 644 packages.microsoft.gpg /etc/apt/trusted.gpg.d/

sudo sh -c 'echo "deb [arch=amd64,arm64,armhf signed-by=/etc/apt/trusted.gpg.d/packages.microsoft.gpg] https://packages.microsoft.com/repos/code stable main" > /etc/apt/sources.list.d/vscode.list'

# Instalar
sudo apt update
sudo apt install code

macOS

Descarga desde code.visualstudio.com, abre el .zip y arrastra "Visual Studio Code" a tu carpeta Aplicaciones. Nada más.

Verificar que funciona

Abre la terminal (en Windows busca "cmd" o "PowerShell") y escribe:

code --version

Si ves un número de versión, está bien instalado. Si da error en Windows, es que no marcaste "Add to PATH" — reinstala y esta vez márcalo.

Configuración esencial

Abre VS Code y presiona Ctrl+, en Windows/Linux o Cmd+, en Mac. Esto abre la configuración. Busca y cambia estas opciones:

Para el tema visual, presiona Ctrl+K Ctrl+T y elige el que más te guste. Dark+ es el más popular, pero es cuestión de gusto. No pierdas mucho tiempo aquí al principio.

Las extensiones que realmente necesitas

Abre el panel de extensiones con Ctrl+Shift+X. Aquí es donde la mayoría comete el error de instalar veinte extensiones de golpe porque las vio en un vídeo de YouTube. VS Code se vuelve lento y encima no sabes para qué sirve cada una.

Instala estas, que son las que vas a usar desde el primer día:

Imprescindibles para empezar

Para cuando ya tienes algo de rodaje

Shortcuts que usarás todos los días

No intentes aprendértelos todos de golpe. Cuando empecé, intenté memorizar una lista de veinte shortcuts y al día siguiente no recordaba ninguno. Aprende dos o tres esta semana y el resto ya vendrán solos con el uso. El que más cambia el día a día cuando lo descubres es Ctrl+P — búscate un momento para usarlo hoy mismo:

Navegación

// Abrir archivo rápido (el más útil con diferencia)
Ctrl+P (Windows/Linux) / Cmd+P (Mac)

// Buscar texto en todos los archivos del proyecto
Ctrl+Shift+F (Windows/Linux) / Cmd+Shift+F (Mac)

// Ir a una línea específica
Ctrl+G (Windows/Linux) / Cmd+G (Mac)

Edición

// Duplicar línea hacia abajo
Shift+Alt+Down (Windows/Linux) / Shift+Option+Down (Mac)

// Mover línea arriba o abajo
Alt+Up/Down (Windows/Linux) / Option+Up/Down (Mac)

// Comentar o descomentar línea
Ctrl+/ (Windows/Linux) / Cmd+/ (Mac)

// Seleccionar la siguiente ocurrencia de la palabra seleccionada
Ctrl+D (Windows/Linux) / Cmd+D (Mac)

Terminal

// Abrir o cerrar el terminal integrado
Ctrl+` (Windows/Linux) / Cmd+` (Mac)

// Nueva terminal
Ctrl+Shift+` (Windows/Linux) / Cmd+Shift+` (Mac)

Tu primer proyecto configurado

La configuración que tienes ya es suficiente para empezar. Vamos a comprobarlo creando algo real en lugar de quedarnos en teoría.

Paso 1: Crear la carpeta

Crea una carpeta nueva en tu escritorio llamada mi-primer-proyecto. Haz clic derecho sobre ella y selecciona "Open with Code" (si instalaste con las casillas marcadas). Si no aparece esa opción, abre VS Code y usa File > Open Folder.

Paso 2: Crear los archivos

En el explorador de la izquierda, haz clic derecho y crea estos archivos:

mi-primer-proyecto/
├── index.html
├── style.css
└── script.js

Paso 3: Configurar Prettier para este proyecto

Crea un archivo .prettierrc en la raíz del proyecto con este contenido:

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "printWidth": 80
}

Paso 4: Probar Live Server

Escribe esto en index.html:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Mi Primer Proyecto</title>
</head>
<body>
    <h1>Hola VS Code</h1>
    <p>Mi primer proyecto configurado correctamente.</p>
</body>
</html>

Haz clic derecho sobre index.html en el explorador y selecciona "Open with Live Server". Tu navegador debería abrirse automáticamente con la página. Cambia el texto, guarda, y verás cómo el navegador se actualiza solo.

Configuración JSON avanzada

Si quieres aplicar la misma configuración en todos tus proyectos, presiona Ctrl+Shift+P y busca "Preferences: Open User Settings (JSON)". Pega esto:

{
  "editor.fontSize": 14,
  "editor.tabSize": 2,
  "editor.wordWrap": "on",
  "files.autoSave": "afterDelay",
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

Con esto Prettier formateará el código al guardar en cualquier proyecto, sin tener que configurarlo cada vez.