Herramientas

Tutorial de VS Code, Git, OpenSpec y Claude Code para desarrolladores del DTI.

Kit de herramientas — Configuración y uso de herramientas para desarrollo con IA

VS Code

Extensiones esenciales

Instalar desde VS Code Marketplace:

ExtensiónPropósito
GitLensVisualizar historial y authorship de código
Git HistoryVer commits, diferencias, comparar ramas
PythonSyntax highlighting, IntelliSense, linting
PylanceType checking para Python
DockerSoporte para Dockerfiles y Docker Compose
Thunder ClientProbar APIs REST (alternativa a Postman)

Configuración de Git

// settings.json (Cmd+, en mac)
{
  "git.autofetch": true,
  "git.confirmSync": false,
  "git.enableSmartCommit": true,
  "git.enableCommitSigning": false,
  "git.decorations.colors": true
}

Gestión de ramas desde VS Code

  1. Click en icono de rama en barra inferior (ej: main)
  2. Opciones: Checkout, Create, Merge, Rename, Delete
  3. Para nueva rama: Create new branch → nombre descriptivo

Resolución de merge conflicts

  1. Cuando hay conflicto, VS Code marca archivo en rojo
  2. Abrir archivo: se muestran diferencias con opciones:
    • Accept Incoming — usar cambios del otro branch
    • Accept Current — mantener cambios actuales
    • Accept Both — combinar ambas versiones
    • Manually edit — editar directamente
  3. Resolver todos los conflictos
  4. Guardar archivo
  5. git add <archivo> y git commit

Git

Comandos básicos

# Clonar repositorio
git clone [email protected]:dti/proyecto.git
cd proyecto

# Ver estado
git status

# Ver diferencias
git diff                    # cambios no staged
git diff --staged          # cambios staged
git diff rama1..rama2      # diff entre ramas

# Agregar y commit
git add .                   # todos los cambios
git add archivo.md          # archivo específico
git commit -m "feat: descripción"

# Ramas
git branch                          # listar ramas
git checkout -b feature/nueva       # crear y cambiar
git checkout main                   # cambiar a main
git branch -d feature/nueva         # eliminar local

# Sincronización
git fetch origin        # descargar cambios sin aplicar
git pull origin main    # fetch + merge
git push origin feature # subir branch

Commits convencionales

TipoUso
feat:Nueva funcionalidad
fix:Corrección de bug
docs:Documentación
chore:Mantenimiento (deps, config)
style:Formato, sin lógica
refactor:Reestructuración sin cambios funcionales
git commit -m "feat: agregar endpoint de usuarios"
git commit -m "fix: corregir validación de email"
git commit -m "docs: actualizar README con nuevas instrucciones"

Operaciones avanzadas

# Guardar trabajo temporalmente
git stash                   # guardar cambios actuales
git stash pop               # recuperar cambios

# Deshacer
git reset --soft HEAD~1     # deshacer último commit (mantener cambios)
git reset --hard HEAD~1     # deshacer commit y cambios
git revert HEAD             # crear nuevo commit que revierte anterior

# Squash commits (combinar varios)
git rebase -i HEAD~3        # interactive rebase
# Cambiar 'pick' a 'squash' en commits a combinar

# Ver historial
git log --oneline --graph --all   # historial visual
git log --author="nombre"        # filtrar por autor
git log --since="2 weeks ago"    # filtrar por fecha

OpenSpec

OpenSpec gestiona cambios con artifacts: proposal, design, specs, tasks.

Comandos principales

# Nuevo cambio
openspec new change "nombre-cambio"

# Ver estado
openspec status --change "nombre-cambio"

# Ver instrucciones de artifact
openspec instructions tasks --change "nombre-cambio"

# Aplicar cambio (modo implementación)
openspec apply "nombre-cambio"

# Sync specs a main
openspec sync

# Archivar cambio completado
openspec archive "nombre-cambio"

Flujo completo

openspec new change "mi-cambio"     → crear directorio y scaffold
openspec status --change "mi-cambio" → ver artifacts pendientes
# crear proposal.md, design.md, specs/*.md, tasks.md
openspec apply "mi-cambio"           → empezar implementación
# trabajar en tasks, marcar completadas
openspec verify "mi-cambio"          → verificar contra specs
openspec archive "mi-cambio"         → cerrar cambio

Claude Code

Inicio de sesión

# En terminal, dentro del proyecto
claude

# Carga automáticamente:
# - AGENTS.md del proyecto
# - .claude/skills/ si existen
# - Contexto del directorio actual

Comandos útiles

ComandoDescripción
/helpLista de comandos disponibles
/mcpVer herramientas MCP configuradas
/toolsVer herramientas disponibles

Integración con workflow

  1. Exploración: Pedir análisis de código

    Explora la estructura del proyecto y resume la arquitectura
  2. Propuestas: Usar para generar proposals

    Analiza el problema y genera una propuesta de solución
  3. Implementación: Trabajar en tasks específicas

    Implementa la funcionalidad X según los specs del cambio Y
  4. Revisión: Verificar adherencia a guidelines

    Revisa este código contra los lineamientos DTI

Configuración inicial de ambiente

1. Instalar herramientas

# Git (ya viene con macOS/Linux)
git --version

# VS Code
# Descargar de https://code.visualstudio.com/

# Python (si no está)
python3 --version

# Docker
docker --version

2. Configurar SSH para GitLab

# Generar clave SSH
ssh-keygen -t ed25519 -C "[email protected]"

# Copiar clave
cat ~/.ssh/id_ed25519.pub
# Pegar en GitLab: Settings → SSH Keys

# Probar conexión
ssh -T [email protected]

3. Configurar Git local

git config --global user.name "Tu Nombre"
git config --global user.email "[email protected]"
git config --global core.editor "code --wait"
git config --global init.defaultBranch main

Referencias