Project Structure MD

Project Structure MD es una extensión de VS Code que genera automáticamente un archivo Markdown con la estructura de tu proyecto. Cada vez que agregas, eliminas o cambias un archivo o carpeta, el árbol se actualiza, facilitando la documentación y la navegación de proyectos grandes.

Características

🔹 Generación automática de árbol de archivos en Markdown (structure.md por defecto)
🔹 Actualización automática al crear, eliminar o modificar archivos
🔹 Ignora carpetas o archivos específicos configurables (por ejemplo node_modules, .git)
🔹 Opciones de respaldo para no perder versiones previas del archivo
🔹 Fácil de usar, solo abre tu proyecto y deja que la extensión haga el resto
🔹 Perfecto para documentación, onboarding de nuevos devs y revisión rápida de proyectos

Instalación

Instala desde VS Code Marketplace o desde el archivo .vsix descargable.
Abre tu proyecto en VS Code.
La extensión detectará automáticamente tu estructura y generará structure.md en la raíz.
Configura las carpetas a ignorar o cambia el nombre del archivo de salida desde settings.

Configuración

{
  "projectStructure-md.rootFolder": "",
  "projectStructure-md.outputFile": "structure.md",
  "projectStructure-md.ignore": ["node_modules", ".git"]
}

rootFolder: Carpeta raíz a partir de la cual generar el árbol (vacío = proyecto completo)
outputFile: Nombre del archivo Markdown de salida
ignore: Lista de archivos o carpetas a ignorar

Uso

Abre tu proyecto en VS Code.
La extensión generará automáticamente el archivo structure.md en la raíz del proyecto.
Cada vez que agregues, elimines o modifiques archivos, el Markdown se actualizará automáticamente.
Para ver una visualización más bonita y con colores, usa el comando de paleta:
- Project Structure MD: Mostrar Estructura del Proyecto

Mejoras futuras

Colorear carpetas y archivos según tipo (TypeScript, JavaScript, Markdown, etc.)
Expandir/colapsar carpetas directamente en el Markdown (HTML embebido o emojis)
Integración con documentación de equipo y repositorios
Webview interactivo para explorar la estructura con colores y expand/collapse

Ejemplo de visualización Markdown

📁 src/
├── 📄 extension.ts
├── 📄 config.ts
└── 📁 test/
    └── 📄 extension.test.ts
📁 out/
├── 📄 extension.js
└── 📄 treeGenerator.js
📄 package.json
📄 README.md

Visualización interactiva

Además del archivo Markdown generado (structure.md), puedes abrir un visor interactivo con colores y expand/collapse:

Abre la paleta de comandos: Ctrl+Shift+P (o Cmd+Shift+P en Mac)
Ejecuta el comando: Project Structure MD: Mostrar Estructura del Proyecto
Aparecerá un Webview dentro de VS Code con tu proyecto visualmente estructurado.

Este visor es solo visual; el archivo Markdown sigue siendo limpio y portable.

Sobre el desarrollador

nesterdev - Full Stack Developer con experiencia en proyectos de desarrollo web y plataformas SaaS:

Café Orgánico: Desarrollo de plataforma web para comercialización de café orgánico, con enfoque en UX, rendimiento y escalabilidad (cafeorganico.co)
GestoRes: Plataforma híbrida para gestión de restaurantes, operando local y en la nube
Masibot - CM: Automatización avanzada de marketing y ventas vía WhatsApp Web con integración AI y CRM
Envios CM: Plataforma de envíos masivos y comunicación automatizada para empresas

También creador de proyectos y librerías como SVGL, Variedades SantiDanna, MsgTip, con experiencia en tecnologías como Next.js, Tailwind, React, y desarrollo de herramientas interactivas para mejorar productividad y visualización de proyectos.

project-structure-md

nesterdev