Extensiones clave para optimizar tu setup de VS Code

Mi Setup de VS Code definitivo: Extensiones que me ahorran horas de trabajo

Tiempo estimado de lectura: 4 min

Ideas clave

• Menos es más: cada extensión debe resolver un problema real y recurrente.
• Automatiza formato y linting al guardar para evitar debates de estilo en PRs.
• Usa settings y snippets por workspace para reducir fricción entre proyectos.

Mi Setup de VS Code definitivo: Extensiones que me ahorran horas de trabajo empieza por una regla simple: menos es más, y cada extensión debe resolver un problema real. En los proyectos donde construimos agentes, pipelines y automatizaciones (Next.js + n8n), el IDE debe facilitar decisiones rápidas: encontrar código, refactorizar sin miedo y probar APIs desde la misma ventana.

A continuación tienes la selección curada, el porqué técnico y ajustes listos para copiar en tu workspace.

Resumen rápido (lectores con prisa)

Configuración mínima: extensiones que aportan visibilidad del historial, snippets, formato automático, detección de errores inline y pruebas HTTP desde el IDE. Usa settings por workspace y automatiza formateo/linting al guardar para reducir debates en PRs. Incluye iconos, tema y fuente para reducir fatiga visual.

Mi Setup de VS Code definitivo: extensiones clave y por qué importan

GitLens — historial y contexto dentro del editor

GitLens reduce drásticamente el coste de entender cambios. Ver quién tocó una línea y por qué evita abrir la terminal y decodificar commits. Útil para revertir merges o entender regresiones. GitLens

ES7+ React/Redux/React-Native snippets — velocidad para componentes

Genera componentes, hooks y patrones en un par de teclas. Cuando estás creando muchos componentes o tests, el ahorro se cuenta en horas. ES7+ React/Redux/React-Native snippets

Prettier + ESLint + Error Lens — formato y calidad sin decisión manual

Prettier ESLint Error Lens

Prettier unifica estilo; ESLint evita bugs y Error Lens muestra problemas inline. Automatizar esto al guardar elimina discusiones de estilo y errores triviales en code review.

Import Cost — conciencia del bundle en tiempo real

Ver el tamaño estimado de cada import al lado de la línea cambia decisiones arquitectónicas (¿otra dependencia para una función pequeña? Piensa dos veces). Import Cost

Thunder Client — pruebas HTTP sin salir del IDE

Perfecto para probar endpoints en pipelines y para desarrollar triggers de n8n o endpoints de automations sin abrir Postman. Thunder Client

Material Icon Theme, Tokyo Night y JetBrains Mono — ergonomía visual

Iconos: Material Icon Theme. Tema: Tokyo Night. Fuente JetBrains Mono: JetBrains Mono. Un tema legible, iconos claros y una fuente con ligaduras reducen el ruido visual. Menos fatiga = menos errores.

GitHub Copilot (opcional) — acelerador de boilerplate

GitHub Copilot Útil para tests, docs y plantillas de workflows; no para reemplazar criterio.

Settings críticos para ahorrar tiempo (copia y pega)

Coloca esto en .vscode/settings.json o en tu User Settings:

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "files.trimTrailingWhitespace": true,
  "editor.fontFamily": "'JetBrains Mono', Consolas, monospace",
  "editor.fontLigatures": true,
  "editor.fontSize": 14,
  "workbench.iconTheme": "material-icon-theme",
  "workbench.colorTheme": "Tokyo Night",
  "editor.minimap.enabled": false,
  "editor.renderWhitespace": "selection",
  "editor.smoothScrolling": true,
  "breadcrumbs.enabled": true,
  "eslint.validate": ["javascript", "typescript", "typescriptreact"]
}

Explicación rápida

• formatOnSave + codeActionsOnSave: cero debates en PRs sobre formato.
• minimap.disabled y renderWhitespace: selection: menos ruido visual.
• eslint.validate: garantiza que TS/JS se analicen correctamente.

Atajos imprescindibles (practica diaria)

• Cmd/Ctrl + P — abrir archivo por nombre.
• Cmd/Ctrl + Shift + F — búsqueda global.
• F2 — rename symbol (refactor seguro en TypeScript).
• Cmd/Ctrl + D — multi-cursor para cambios masivos.
• Alt/Option + ↑/↓ — mover línea.
• Cmd/Ctrl + B — ocultar/mostrar sidebar.

Si usas snippets o tareas repetitivas de n8n, crea tus atajos personalizados en keybindings.json.

Criterio para añadir (o eliminar) una extensión

1. Limita el workspace a < 15 extensiones activas.
2. Prueba nuevas extensiones en un workspace aislado.
3. Si el editor se ralentiza, mira Help > Toggle Developer Tools y desactiva la extensión culpable.
4. Usa workspace settings por proyecto (no globales) para evitar conflictos entre stacks.

Integraciones prácticas para equipos que automatizan

• Añade Thunder Client collections al repo para compartir contratos API con el equipo.
• Exporta config ESLint/Prettier en el repo y obliga formateo en CI (evita “mi VS Code vs tu VS Code”).
• Snippets para n8n — crea plantillas de nodes/credentials para acelerar creación de workflows.

Conclusión

Un buen setup de VS Code no te hará mejor desarrollador, pero te liberará del trabajo tonto. Menos fricción cognitiva, menos context switching, más tiempo para diseñar arquitecturas, automatizar procesos y escribir código que realmente importa. Copia la configuración, prueba lo esencial y afina según tu flujo. Si una extensión no te ahorra minutos diarios, elimínala. Tu tiempo es la métrica.

Para equipos que automatizan y construyen workflows (n8n, agentes o pipelines), considera como continuación práctica explorar Dominicode Labs para recursos y ejemplos centrados en automatización y agentes. Integra collections, snippets y configuraciones compartidas para reducir la fricción entre desarrolladores.

FAQ

• ¿Por qué limitar las extensiones a menos de 15?
• ¿Cómo comparto Thunder Client collections en el equipo?
• ¿Debo usar GitHub Copilot en producción?
• ¿Dónde pongo los settings del proyecto?
• ¿Qué hago si VS Code se vuelve lento?
• ¿Cómo evito debates de formato en PRs?