VS Code para Principiantes: Configuración y Extensiones Esenciales 2025

¿Has abierto VS Code por primera vez y te has sentido completamente perdido? ¿No sabes qué extensiones instalar o cómo configurarlo para ser productivo? Tranquilo, el 87% de desarrolladores principiantes usan VS Code mal configurado y pierden horas de productividad innecesariamente.

VS Code puede ser tu mejor aliado o tu peor enemigo, dependiendo de cómo lo configures. Con la configuración correcta, puedes ser 5 veces más productivo desde tu primer día programando.

🤔 ¿Qué vamos a aprender?

Por qué VS Code es la opción #1 (y por qué otros editores no)

Instalación correcta paso a paso

Configuración esencial que todo principiante necesita

Las 12 extensiones que realmente importan

Shortcuts que te harán parecer un profesional

Tu primer proyecto configurado correctamente

🎯 ¿Por qué VS Code y no otra cosa?

Antes de empezar, ¿por qué elegir VS Code cuando existen otros editores?

74% De developers profesionales lo usan

100% Gratuito para siempre

30,000+ Extensiones disponibles

5 min Para tener un setup funcional

VS Code vs Otras Opciones

                ✅ VS Code:
                Gratuito y open source - Microsoft lo mantiene gratis
Súper liviano - Se abre en segundos
Todo integrado - Terminal, Git, debugger en un lugar
Enorme comunidad - Extensión para cualquier cosa

            

❌ Otras opciones:

Notepad++: Básico, sin extensiones modernas
WebStorm: De pago, pesado para principiantes
Atom: Descontinuado en 2022
Sublime Text: De pago, menos extensiones

💻 Instalación paso a paso

Vamos a instalarlo correctamente desde cero:

🪟 Windows

Paso 1: Ve a code.visualstudio.com y haz clic en "Download for Windows"

Paso 2: Ejecuta el instalador descargado como administrador

Paso 3: Durante la instalación, asegúrate de marcar estas opciones:

                ⚠️ Importante - Marca estas casillas:
                ☑️ "Add to PATH" (muy importante)
☑️ "Create a desktop icon"
☑️ "Add Open with Code action to Windows Explorer file context menu"
☑️ "Add Open with Code action to Windows Explorer directory context menu"

            

Paso 4: Finaliza la instalación y abre VS Code

🐧 Linux (Ubuntu/Debian)

Abre tu terminal y ejecuta:

# Descargar e instalar el paquete .deb
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 VS Code
sudo apt update
sudo apt install code

🍎 macOS

Paso 1: Descarga desde code.visualstudio.com

Paso 2: Abre el archivo .zip descargado

Paso 3: Arrastra "Visual Studio Code" a tu carpeta "Aplicaciones"

Paso 4: Abre VS Code desde Aplicaciones

✅ Verificar instalación

Abre tu terminal/CMD y ejecuta:

code --version

Si ves la versión, ¡está instalado correctamente!

🔧 Configuración esencial

Ahora viene lo importante: configurar VS Code para ser productivo desde el primer momento.

Paso 1: Abrir configuración

Presiona Ctrl+, (Windows/Linux) o Cmd+, (Mac)

Paso 2: Configuraciones importantes

Busca y configura estas opciones:

                🎯 Configuraciones obligatorias:
                Auto Save: Busca "Auto Save" y ponlo en "afterDelay"
Font Size: Busca "Font Size" y ponlo en 14 (más legible)
Word Wrap: Busca "Word Wrap" y ponlo en "on"
Tab Size: Busca "Tab Size" y ponlo en 2 (estándar web)
Insert Spaces: Asegúrate que esté marcado

            

Paso 3: Tema visual

Presiona Ctrl+K Ctrl+T y elige un tema:

                🎨 Temas recomendados para principiantes:
                Dark+ (default dark): El más popular
Light+ (default light): Si prefieres fondo blanco
Monokai: Colores vibrantes, muy legible

            

🔌 Las 12 extensiones esenciales

Estas extensiones convertirán VS Code en una herramienta profesional. Instálalas presionando Ctrl+Shift+X:

Para TODOS los principiantes:

1. 🤖 GitHub Copilot

¿Qué hace? IA que escribe código contigo

Por qué la necesitas: Acelera tu aprendizaje 10x sugiriendo código mientras escribes

2. 🎨 Prettier - Code formatter

¿Qué hace? Formatea tu código automáticamente

Por qué la necesitas: Tu código siempre se verá profesional y limpio

3. 🔍 ESLint

¿Qué hace? Encuentra errores en tu código JavaScript

Por qué la necesitas: Evita bugs antes de que sucedan

4. 🌐 Live Server

¿Qué hace? Servidor local que actualiza tu página automáticamente

Por qué la necesitas: Ve cambios instantáneos sin recargar manualmente

Para desarrollo web frontend:

5. 🏷️ Auto Rename Tag

¿Qué hace? Cambia automáticamente etiquetas HTML emparejadas

Por qué la necesitas: Evita errores HTML tontos

6. 🌈 Indent Rainbow

¿Qué hace? Colorea las indentaciones

Por qué la necesitas: Ve la estructura de tu código de un vistazo

7. 📸 Image Preview

¿Qué hace? Muestra preview de imágenes en tu código

Por qué la necesitas: Ve qué imagen estas usando sin abrir archivos

Para productividad:

8. 🔀 GitLens

¿Qué hace? Mejora la integración con Git

Por qué la necesitas: Ve quién cambió qué línea y cuándo

9. 📁 Project Manager

¿Qué hace? Cambia entre proyectos rápidamente

Por qué la necesitas: Organiza tus proyectos como un profesional

10. ✨ Code Spell Checker

¿Qué hace? Corrige errores ortográficos en comentarios

Por qué la necesitas: Código profesional sin errores de escritura

Para debugging:

11. 🐛 Turbo Console Log

¿Qué hace? Inserta console.log automáticamente

Por qué la necesitas: Debug más rápido con un shortcut

12. 🚀 Thunder Client

¿Qué hace? Testa APIs desde VS Code

Por qué la necesitas: No necesitas Postman por separado

⌨️ Shortcuts que todo principiante debe conocer

Estos shortcuts te harán parecer un profesional desde el primer día:

Navegación básica:

// Abrir archivo rápido
Ctrl+P (Windows/Linux) / Cmd+P (Mac)

// Buscar en archivos
Ctrl+Shift+F (Windows/Linux) / Cmd+Shift+F (Mac)

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

// Cerrar archivo actual
Ctrl+W (Windows/Linux) / Cmd+W (Mac)

Edición profesional:

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

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

// Comentar/descomentar
Ctrl+/ (Windows/Linux) / Cmd+/ (Mac)

// Selección múltiple
Ctrl+D (Windows/Linux) / Cmd+D (Mac)

Integración con terminal:

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

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

💡 Truco pro:

Para ver TODOS los shortcuts disponibles presiona Ctrl+K Ctrl+S (Windows/Linux) o Cmd+K Cmd+S (Mac)

📁 Tu primer proyecto configurado

Vamos a crear tu primer proyecto con todo configurado correctamente:

Paso 1: Crear carpeta de proyecto

Crea una carpeta nueva llamada mi-primer-proyecto en tu escritorio.

Paso 2: Abrir en VS Code

Haz clic derecho en la carpeta y selecciona "Open with Code" (si instalaste correctamente).

O desde VS Code: File > Open Folder

Paso 3: Crear estructura básica

Crea estos archivos (clic derecho en explorador > New File):

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

Paso 4: Configurar workspace

Ve a File > Preferences > Settings y busca "workspace". Configura estas opciones específicas para este proyecto:

                🔧 Configuración del proyecto:
                Default Formatter: Prettier
Format On Save: ✓ Marcado
Auto Save: afterDelay

            

Paso 5: Probar Live Server

Escribe este código en index.html:

<!DOCTYPE html>
<html>
<head>
    <title>Mi Primer Proyecto</title>
</head>
<body>
    <h1>¡Hola VS Code!</h1>
    <p>Mi primer proyecto configurado correctamente.</p>
</body>
</html>

Haz clic derecho en index.html y selecciona "Open with Live Server".

¡Tu navegador debería abrir automáticamente con tu página!

🎯 Consejos profesionales

                ✅ Hábitos que debes desarrollar:
                Usa shortcuts: Al principio es lento, pero en una semana serás mucho más rápido
Personaliza tu setup: Cambia tema, fuentes, colores a tu gusto
Aprende una extensión por semana: No instales todas de una vez
Usa el terminal integrado: Todo en un lugar
Organiza tu código: Una carpeta por proyecto

            

❌ Errores que debes evitar:

Instalar 50 extensiones: Hace VS Code lento
No usar shortcuts: Seguir haciendo todo con mouse
No guardar configuración: Perder tu setup cada vez
No usar Git integrado: Es súper conveniente
Fuentes muy pequeñas: Cansas tu vista innecesariamente

🚀 Siguientes pasos

¡Felicidades! Ya tienes VS Code configurado como un profesional. Ahora puedes:

Explorar más extensiones según tus necesidades específicas

Personalizar snippets para código repetitivo

Configurar debugging para diferentes lenguajes

Integrar con servicios cloud como GitHub Codespaces

Aprender shortcuts avanzados para edición múltiple

💡 Bonus: Configuración avanzada

Si quieres llevar tu setup al siguiente nivel, aquí tienes configuraciones adicionales:

Configurar Prettier automático

Crea un archivo .prettierrc en tu proyecto con:

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

Configuración JSON personalizada

Para configuraciones avanzadas, presiona Ctrl+Shift+P y busca "Preferences: Open Settings (JSON)":

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

🎯 ¿Listo para tu primer proyecto real?

Ahora que tienes VS Code configurado correctamente, es hora de crear algo increíble. Empieza con HTML y CSS básicos.

👉 HTML5 para Principiantes: Tu Primera Página Web

Tutorial paso a paso para crear tu primera página web con tu nuevo setup de VS Code