Ejemplos Prácticos
Ejemplos Prácticos de OpenCode
Section titled “Ejemplos Prácticos de OpenCode”Aquí encontrarás ejemplos reales de cómo usar OpenCode en tu día a día como desarrollador.
🐛 Depuración y Bugs
Section titled “🐛 Depuración y Bugs”Encontrar y corregir un bug
Section titled “Encontrar y corregir un bug”# Inicia en tu proyectoopencode .
# Describe el problema[Plan] Hay un error en la función de login que no puedo identificar
# Analiza el código para entender el problemaRevisa @src/auth/login.ts y dime qué podría estar causando timeouts
# Implementa la corrección[Build] Corrige el timeout en la línea 45Debug con Stack Traces
Section titled “Debug con Stack Traces”# Pega el stack trace directamente[Plan] Este error ocurre cuando subo archivos grandes:
Error: RangeError: Maximum call stack exceeded at compressImage (utils/image.js:234) at processImage (utils/image.js:189) at uploadHandler (handlers/upload.js:45)
¿Cuál es la causa y cómo lo soluciono?🧪 Testing
Section titled “🧪 Testing”Escribir tests para una función
Section titled “Escribir tests para una función”# Genera tests unitarios[Build] Crea tests unitarios para @utils/validation.js usando Vitest
# El resultado incluirá:# - Tests para casos válidos# - Tests para casos edge# - Tests para casos de errorEjecutar y analizar resultados de tests
Section titled “Ejecutar y analizar resultados de tests”# Ejecuta tests y analiza!npm test
# Ahora pregunta sobre los fallos[Plan] Hay 3 tests fallando. ¿Cuál es la causa raíz de cada uno?📝 Refactoring
Section titled “📝 Refactoring”Mejorar código existente
Section titled “Mejorar código existente”# Solicita análisis de mejoras[Plan] ¿Cómo puedo refactorizar @src/components/Table.jsx para ser más performante?
# Revisa el plan y ejecuta[Build] Aplica las mejoras sugeridas, manteniendo la API existenteModernizar código legacy
Section titled “Modernizar código legacy”# Conversión a patrones modernos[Plan] Convierte este componente de class component a functional component con hooks:
@src/components/UserProfile.jsx
# Incluye:# - useState para estado# - useEffect para efectos# - PropTypes o TypeScript🆕 Nuevas Funcionalidades
Section titled “🆕 Nuevas Funcionalidades”Crear una API REST completa
Section titled “Crear una API REST completa”# Solicita la implementación[Build] Crea una API REST para gestión de usuarios con:
- GET /api/users - Listar usuarios- POST /api/users - Crear usuario- GET /api/users/:id - Obtener usuario- PUT /api/users/:id - Actualizar usuario- DELETE /api/users/:id - Eliminar usuario
Usa Express.js y sigue las rutas en @src/routes/Crear componente UI
Section titled “Crear componente UI”# Componente con especificaciones[Build] Crea un componente Modal en @src/components/Modal.tsx que:- Acepta props: isOpen, title, children, onClose- Usa React Portal- Incluye animación de fade- Es accesible (WAI-ARIA)🔍 Exploración de Código
Section titled “🔍 Exploración de Código”Entender un codebase nuevo
Section titled “Entender un codebase nuevo”# Análisis completo del proyecto[Explore] Analiza este proyecto y dime:- ¿Qué tecnología usa?- ¿Cuál es la estructura de carpetas?- ¿Dónde está la lógica de autenticación?- ¿Cómo se estructura la base de datos?Buscar código específico
Section titled “Buscar código específico”# Encontrar dónde se usa algo[Explore] ¿Dónde se define y usa la función `parseToken` en este proyecto?
# Encontrar patrones[Explore] Encuentra todos los archivos que usan `useEffect` y no tienen cleanup⚙️ Configuración y Mantenimiento
Section titled “⚙️ Configuración y Mantenimiento”Actualizar dependencias
Section titled “Actualizar dependencias”# Revisar y actualizar paquetes[Plan] ¿Cuáles son las dependencias desactualizadas en package.json?Sugiere cómo actualizarlas sin romper nadaConfigurar CI/CD
Section titled “Configurar CI/CD”# Crear pipeline[Build] Crea un workflow de GitHub Actions en .github/workflows/ci.yml que:- Ejecute tests en Node 18 y 20- Corra lint y typecheck- Suba coverage a Codecov- Use caching para npm🧹 Limpieza y Organización
Section titled “🧹 Limpieza y Organización”Eliminar código no usado
Section titled “Eliminar código no usado”# Encontrar código muerto[Explore] Encuentra funciones que están definidas pero nunca usadas en @src/
# Luego elimínalas[Build] Elimina las funciones no usadas que identificasteOrganizar imports
Section titled “Organizar imports”# Reordenar y limpiar[Build] Organiza los imports en @src/App.tsx:- Imports de Node.js primero- Luego de terceros- Finalmente locales- Elimina los no usados🚀 Tips Avanzados
Section titled “🚀 Tips Avanzados”Chaining de comandos
Section titled “Chaining de comandos”# Combina análisis + implementación!git diff --name-only | xargs -I {} echo "Analizando {}" && [Plan] ¿Qué cambios hay en estos archivos?
# Usar resultado anteriorEl código que analizamos antes, ¿cómo lo haríamos más performante?Usar el modo correto
Section titled “Usar el modo correto”| Modo | Cuándo usarlo |
|---|---|
| Plan | Analizar, planificar, entender, explorar |
| Build | Escribir código, crear archivos, modificar |
💡 Tip: Cambia entre modos con
Tab. Plan es más rápido y barato porque solo lee. Build hace cambios reales.