Entorno de trabajo · Sin licencias

VS Code + OpenCode

El entorno completo de VibeCoding del curso. Visual Studio Code como editor, OpenCode como interfaz de prompts y Ollama como motor de IA local. Todo gratuito, todo offline.

Filosofía del entorno: el curso funciona con herramientas completamente gratuitas y de código abierto. No se necesita cuenta en ningún servicio de pago, ni suscripción, ni API key. El modelo de IA corre localmente en el ordenador del alumno.

Las tres piezas

El stack del entorno

💻
Visual Studio Code
Editor de código donde se abre, edita y visualiza el proyecto. El estándar de facto del desarrollo web. Gratuito, de Microsoft, disponible en Windows, Mac y Linux.
🤖
OpenCode
Interfaz de VibeCoding que corre en el terminal integrado de VS Code. Aquí es donde el alumno escribe los prompts. Conecta con el modelo de Ollama y genera el código directamente en los archivos del proyecto.
🦙
Ollama
Motor que ejecuta el modelo de lenguaje localmente. Una vez descargado el modelo, funciona sin conexión a internet. Soporta múltiples modelos de código abierto optimizados para programación.
🌐
Navegador web
Para previsualizar la web o la PWA en tiempo real tras cada prompt. El navegador es el segundo ojo del VibeCoder: confirma que el resultado es el esperado.
📱
Expo Go
App gratuita para iOS y Android que permite previsualizar las apps de React Native en el móvil físico en tiempo real, sin compilar ni instalar nada adicional.
🔧
KiloCode (alternativa)
Extensión de VS Code alternativa a OpenCode. Proporciona una interfaz de chat integrada en el propio editor. Compatible con Ollama. Útil si se prefiere no salir de VS Code para escribir prompts.

Puesta en marcha

Instalación paso a paso

01
Instalar Visual Studio Code
Descargar desde code.visualstudio.com e instalar para el sistema operativo correspondiente. Activar el Language Pack en español si se desea.
02
Instalar Ollama
Descargar desde ollama.com. El instalador deja Ollama corriendo como servicio en segundo plano automáticamente.
03
Descargar el modelo de IA
Abrir el terminal y ejecutar:
ollama pull qwen2.5-coder:7b
# Modelo recomendado para el curso. ~4 GB.
# Otros compatibles: deepseek-coder, codellama, phi3
04
Instalar OpenCode
Requiere Node.js (nodejs.org). En el terminal de VS Code:
npm install -g opencode-ai
# Configurar el modelo:
opencode configure --model ollama:qwen2.5-coder:7b
05
Lanzar OpenCode en un proyecto
Crear una carpeta de proyecto, abrirla en VS Code, abrir el terminal integrado y ejecutar:
opencode
# El prompt de VibeCoding está listo.
# Escribe tu primera petición en lenguaje natural.

VS Code · Extensiones

Extensiones recomendadas

Live Preview
Previsualiza HTML directamente en VS Code sin salir al navegador.
Live Server
Servidor local con recarga automática al guardar el archivo.
Open in Browser
Abre el archivo actual en el navegador por defecto con un clic.
Prettier
Formatea el código automáticamente al guardar.
Material Icon Theme
Iconos visuales para cada tipo de archivo en el explorador.
Spanish Language Pack
Interfaz de VS Code en español.
ES7+ React Snippets
Snippets para React y React Native (a partir del curso de React).
Tailwind IntelliSense
Autocompletado de clases Tailwind (cursos avanzados).
Error Lens
Muestra los errores directamente en la línea de código afectada.

Ollama · Modelos

Modelos recomendados para el curso

RECOMENDADO
qwen2.5-coder:7b
Modelo de Alibaba optimizado para generación de código. Excelente rendimiento en HTML, CSS, JavaScript, TypeScript y React Native. Tamaño: ~4 GB.
ollama pull qwen2.5-coder:7b
ALTERNATIVA
deepseek-coder:6.7b
Muy buena opción para máquinas con menos RAM. Buen rendimiento en JavaScript y Python. Ligeramente menor en React Native que qwen2.5-coder.
ollama pull deepseek-coder:6.7b
Tip: los modelos con más parámetros (13b, 34b) producen mejores resultados pero requieren más RAM y VRAM. Para el curso es suficiente con un modelo de 7B en un ordenador con 16 GB de RAM.