VS Code

Post image

Pagina oficial: https://code.visualstudio.com

Que es VS Code?

VS Code es un editor de codigo multiplataforma desarrollado por Microsoft que se ha convertido en una referencia por una razon muy simple: ofrece una buena base desde el primer arranque y permite crecer casi sin limite mediante extensiones, perfiles y automatizaciones.

No intenta ser un IDE monolitico en todo momento. Su enfoque es mas practico: partir de un editor rapido, con terminal, Git, depuracion y una enorme biblioteca de extensiones para adaptar el entorno al lenguaje, al proyecto y a la forma de trabajar de cada desarrollador.

Por que sigue siendo una opcion fuerte

  • Tiene un ecosistema de extensiones enorme para lenguajes, linters, formateadores, bases de datos, contenedores y herramientas de IA.
  • Integra terminal, control de versiones, depuracion y busqueda global sin obligar a cambiar constantemente de aplicacion.
  • Permite crear perfiles separados para frontend, Python, markdown, DevOps o cualquier otro flujo de trabajo.
  • Funciona bien con desarrollo remoto mediante SSH, WSL, Dev Containers y Codespaces.
  • La integracion con GitHub Copilot y otras herramientas de IA encaja de forma natural en el propio editor.

Funciones que marcan diferencia

1. Perfiles y ajustes por proyecto

Los perfiles permiten separar contextos y evitar el tipico editor saturado de extensiones que no hacen falta en todos los proyectos. Si ademas se combina con ajustes del area de trabajo, es facil mantener una configuracion distinta para cada repositorio.

2. Terminal, tareas y depuracion

La terminal integrada ahorra friccion. Si se suma Tasks, launch.json y los paneles de problemas y depuracion, el flujo diario queda bastante compacto: editar, ejecutar, revisar errores y depurar sin salir del mismo sitio.

3. IA dentro del flujo de trabajo

VS Code se ha convertido tambien en una plataforma natural para asistentes de codigo. GitHub Copilot, chat contextual, edicion asistida y herramientas agenticas pueden convivir con el codigo, el terminal y el control de cambios, lo que reduce bastante el salto entre pedir ayuda y aplicar una solucion real.

Donde encaja mejor

VS Code encaja especialmente bien si buscas un equilibrio entre ligereza, ecosistema y capacidad de personalizacion. Es una opcion muy solida para:

  • desarrollo web
  • Python
  • scripting y automatizacion
  • edicion tecnica de markdown
  • trabajo remoto sobre servidores o contenedores

Extensiones

Algunas extensiones que me gustan, y que no son las típicas que todo el mundo menciona.

Una extensión para crear diagramas de flujo y otros tipos de gráficos a partir de texto, usando la sintaxis de Mermaid. Es ideal para documentar procesos, arquitecturas o cualquier cosa que se beneficie de una representación visual rápida.

Mermaid

Mermaid es una herramienta de diagramación que permite crear gráficos a partir de texto. Es especialmente útil para generar diagramas de flujo, diagramas de Gantt, diagramas de secuencia y más, directamente desde el código. La extensión Mermaid Markdown Syntax Highlighting en VS Code facilita la creación y visualización de estos diagramas dentro del editor.


graph TD
    A[Inicio] --> B{¿Está buen tiempo?}
    B -- Sí --> C[Salir a pasear]
    B -- No --> D[Quedarse en casa]
    C --> E[¡Disfruta del día!]
    D --> E

Ejemplo de diagrama
Draw.io Integration

Draw.io es una herramienta de diagramación que permite crear diagramas de flujo, diagramas de red, diagramas UML y más. La extensión Draw.io Integration en VS Code facilita la creación y edición de estos diagramas directamente desde el editor, lo que es especialmente útil para proyectos que requieren documentación visual detallada.


```mermaid
graph LR
    A[Idea] --> B{¿Es compleja?}
    B -- Sí --> C[Usa Draw.io]
    B -- No --> D[Usa Mermaid]
    C --> E[Resultado Final]
    D --> E
```

Ejemplo de diagrama Draw.io
Excalidraw

Excalidraw es una herramienta de dibujo colaborativa que permite crear diagramas y bocetos de forma rápida y sencilla. La extensión Excalidraw en VS Code facilita la creación de diagramas a mano alzada directamente desde el editor, lo que es ideal para brainstorming, diagramas de arquitectura o cualquier situación donde se prefiera un enfoque más visual y menos estructurado.

Acceso a la web de Excalidraw: https://excalidraw.com/

Ejmplo de diagrama creado con Excalidraw:

Ejemplo de diagrama Excalidraw

Ejemplo de diagrama Excalidraw

Reveal.js

Reveal.js es una biblioteca de JavaScript para crear presentaciones interactivas y atractivas. La extensión Reveal.js en VS Code permite crear y editar presentaciones directamente desde el editor, utilizando una sintaxis sencilla basada en Markdown. Es ideal para desarrolladores que desean crear presentaciones técnicas o compartir conocimientos de manera visual.

Ejemplo de presentación creada con Reveal.js:

Ejemplo de presentación Reveal.js

Interfaz de usuario de una presentación creada con Reveal.js

Una vez realizadas las diapositivas, se pueden exportar a HTML o PDF para compartirlas fácilmente con otros.

Si se abre en el navegador, se puede navegar por las diapositivas usando las flechas del teclado, lo que hace que la presentación sea dinámica y atractiva. Las transiciones pueden realizarse con las flechas derecha e izquierda, pero también con las flechas arriba y abajo, lo que permite crear una estructura de presentación más compleja y no lineal. Esto es especialmente útil para presentaciones técnicas donde se pueden tener secciones anidadas o temas relacionados que se quieren abordar de manera flexible.

También te puede interesar:

Antigravity

Antigravity

Pagina oficial: https://antigravity.dev Que es Antigravity? Antigravity es una propuesta de editor con IA orientada a reducir la friccion entre idea, …