Rino Tree - Explorador de código inteligente para VS Code

Descripción

Rino Tree es una extensión avanzada para Visual Studio Code que genera representaciones estructuradas de tu código con niveles personalizables de detalle. Visualiza y comparte la estructura de tus proyectos con un control preciso sobre qué se muestra y cómo.

Características principales

🌳 Visualización de estructura - Genera árboles jerárquicos de tus archivos y carpetas
📝 Contenido inteligente - Muestra el código dentro de los archivos con niveles ajustables de detalle
🔍 Filtrado potente - Incluye/excluye archivos por extensión, patrón, o directorio
📊 Balance personalizable - Controla el porcentaje dedicado a estructura vs. contenido (0-90%)
🚀 Rendimiento optimizado - Maneja proyectos grandes eficientemente con límites de tokens configurables
📋 Exportación sencilla - Comparte la visualización como texto o guárdala como archivo

Casos de uso

Documentación de proyectos - Genera rápidamente vistas de la estructura de tu código para documentación
Onboarding de desarrolladores - Ayuda a nuevos miembros del equipo a entender la organización del proyecto
Revisiones de código - Comparte estructuras relevantes durante las revisiones
Explicación de arquitectura - Visualiza la arquitectura de tu aplicación para presentaciones
Tutoriales y educación - Crea ejemplos claros de estructura de proyectos para enseñanza

Configuración flexible

{
  "rino.includes": ["src", "package.json"],
  "rino.excludes": ["*.test.js", "node_modules"],
  "rino.explicitly": [".ts", ".js", ".json"],
  "rino.tokens": 4000,
  "rino.summary": true,
  "rino.content": 50,
  "rino.showFiles": true
}

Comandos

Rino: Generar árbol de estructura - Crea y muestra el árbol del proyecto
Rino: Exportar árbol a archivo - Guarda el árbol generado como archivo de texto
Rino: Configurar - Abre el menú de configuración rápida

Ejemplos de salida

proyecto/
├─ src/
│  ├─ components/
│  │  ├─ Button.jsx import React from 'react';↵export const Button = ({ text, onClick }) => {↵  return (↵    <button className="primary-button" onClick={onClick}>{text}</button>↵  );↵};
│  │  └─ Header.jsx import React from 'react';↵import { Button } from './Button';↵export const Header = ({ title }) => {↵  return (↵    <header>↵      <h1>{title}</h1>↵      <Button text="Login" onClick={() => console.log('login')} />↵    </header>↵  );↵};
│  └─ App.js import React from 'react';↵import { Header } from './components/Header';↵function App() {↵  return (↵    <div className="App">↵      <Header title="Mi Aplicación" />↵      <main>Contenido principal</main>↵    </div>↵  );↵}↵export default App;
├─ package.json {↵  "name": "mi-proyecto",↵  "version": "1.0.0",↵  "dependencies": {↵    "react": "^18.2.0",↵    "react-dom": "^18.2.0"↵  }↵}
└─ README.md # Mi Proyecto↵Este es un ejemplo de proyecto React.

Etiquetas

code-structure, project-explorer, code-visualization, documentation-tool, code-overview, project-structure, code-organization, developer-tools, productivity, code-navigation

Pruébalo ahora

Instala Rino Tree y descubre una nueva forma de visualizar y entender la estructura de tu código. ¡Tu proyecto nunca ha sido tan fácil de explicar!

Rino

mig8at