Preparación del entorno

VS Code: tu editor de código

Visual Studio Code es el editor más usado en el mundo por desarrolladores web. Es gratuito, tiene extensiones para todo y es lo que verás en todos los tutoriales y trabajos.

# Verifica desde la terminal (opcional)
code --version
# Debería mostrar algo como: 1.87.2

Extensiones esenciales

Las extensiones son plugins que añaden funcionalidad al editor. Estas son las que usarás en todo el bootcamp:

Configuración recomendada

Abre las Settings con Ctrl+Shift+P → Open User Settings (JSON) y añade estas configuraciones:

{
  "editor.formatOnSave": true,
  "editor.tabSize": 2,
  "editor.fontSize": 14,
  "editor.lineHeight": 1.6,
  "editor.wordWrap": "on",
  "editor.minimap.enabled": false,
  "editor.bracketPairColorization.enabled": true,
  "files.autoSave": "onFocusChange",
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.fontFamily": "'DM Mono', 'Fira Code', monospace",
  "editor.fontLigatures": true
}

Node.js y npm: el ecosistema JavaScript

Node.js permite ejecutar JavaScript fuera del navegador. npm es su gestor de paquetes — la tienda de herramientas de JavaScript. Los necesitas para instalar frameworks, herramientas de build y librerías.

# Instalar nvm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash

# Reinicia tu terminal, luego:
nvm install --lts
nvm use --lts

# Instala nvm-windows desde:
# github.com/coreybutler/nvm-windows
# Descarga nvm-setup.exe y ejecuta

# Luego en PowerShell:
nvm install lts
nvm use lts

node --version    # v20.x.x o superior
npm --version     # 10.x.x o superior

Git: control de versiones

Git guarda el historial de tu código. Es indispensable. Lo verás en detalle en la Sesión 5, pero necesitas tenerlo instalado desde ahora.

# Opción 1: Xcode Command Line Tools
xcode-select --install

# Opción 2: Homebrew (recomendado)
brew install git

# Windows: descarga Git for Windows
# gitforwindows.org → Git Setup

# Linux (Ubuntu/Debian):
sudo apt update && sudo apt install git

git config --global user.name "Tu Nombre"
git config --global user.email "tu@email.com"
git config --global init.defaultBranch main
git config --global core.editor "code --wait"

# Verificar:
git --version       # git version 2.x.x
git config --list

Google Chrome: tu herramienta de desarrollo

Chrome tiene las DevTools más completas del mercado. Es el estándar de la industria para desarrollo web. Si ya lo tienes, asegúrate de tener la versión actualizada.

Extensiones útiles para desarrollo

IA como copiloto, no como muleta

Los asistentes de IA aceleran el trabajo de todos los desarrolladores del mundo. La clave es usarlos correctamente: para aprender, no para sustituir el entendimiento.

La terminal: abrirla y no tenerle miedo

Usarás la terminal a diario. No es difícil — es un vocabulario de 10 comandos que se repiten. Aquí cómo abrirla en cada sistema.

Comandos esenciales

pwd              # ¿Dónde estoy? (print working directory)
ls               # ¿Qué hay aquí? (list files)
ls -la           # Lista con detalles y archivos ocultos

cd nombre/       # Entrar en una carpeta
cd ..            # Subir un nivel
cd ~             # Ir al directorio home

mkdir mi-proyecto    # Crear una carpeta
touch index.html     # Crear un archivo vacío
rm archivo.txt       # Borrar un archivo
rm -rf carpeta/      # Borrar carpeta con todo su contenido (¡cuidado!)

code .           # Abrir VS Code en la carpeta actual

Checklist: todo instalado y funcionando

Verifica cada punto antes de pasar a la Sesión 1. Si algo falla, el mensaje de error en la terminal te dirá exactamente qué pasó.

• VS Code abierto y funcionando (code --version en terminal)
• Extensión Prettier instalada y formatOnSave activo
• Extensión Live Server instalada
• Node.js instalado (node --version muestra v18 o superior)
• npm instalado (npm --version muestra 9 o superior)
• Git instalado (git --version)
• Git configurado con tu nombre y email (git config --list)
• Google Chrome instalado y actualizado
• Claude Code o Cursor instalado y funcionando
• Puedes abrir la terminal y navegar con cd y ls
• Creaste una carpeta 'proyectos' y la abriste con VS Code (code .)

Recursos de esta sesión