Tree Structure Customizer
Generate beautiful, customizable project tree structures with just a few clicks.
Features
- 🚀 Lightning Fast: Smart scanning with minimal delay, even for large projects
- ⚡ Quick Generation: One-click tree generation with sensible defaults
- 🎨 Multiple Formats: Choose from Markdown, Plain Text, JSON, Interactive HTML, and ASCII
- 🧠 Smart Defaults: Common folders like
node_modules and .git pre-selected for exclusion
- ⚙️ Customizable: Detailed options for power users who need fine control
- 🔍 Interactive HTML: Generate beautiful, interactive tree views with search and expand/collapse
Usage
Quick Start
- Right-click on any folder in the Explorer or anywhere in the editor
- Select "Generate Project Tree…"
- Choose folders to exclude
- Select "Quick Generation" for instant results with default settings
- Done! Your tree structure appears in a new file
Custom Generation
For more control over the output:
- Follow steps 1-3 above
- Select "Full Customization"
- Choose your preferred output format and options
- Configure details like file sizes, dates, styling, etc.
- View your custom tree structure
| Format |
Description |
Best For |
| Markdown |
GitHub-compatible tree |
READMEs, documentation |
| Plain Text |
Simple text tree |
Universal compatibility |
| JSON |
Structured data format |
Data processing, APIs |
| HTML |
Interactive page |
Sharing, navigation |
| ASCII |
Plain ASCII characters |
Terminal viewing |
Example Outputs
📁 src
├── 📁 components
│ ├── 📄 Button.tsx
│ ├── 📄 Header.tsx
│ └── 📄 Sidebar.tsx
├── 📁 utils
│ ├── 📄 helpers.ts
│ └── 📄 api.ts
├── 📄 App.tsx
└── 📄 index.tsx
Interactive HTML
The HTML output creates an interactive tree where you can:
- Expand/collapse folders
- Search for files and folders
- Choose from multiple themes
Commands
- Generate Project Tree…: Create a tree structure (right-click menu)
- Tree Customizer: Settings: Open extension settings
Configuration
Customize default behavior in VS Code settings:
- Default Format: Choose preferred output format (default: markdown)
- Skip Directories: Directories to exclude by default
- Max Scan Depth: Limit scanning depth for better performance
- Directories First: List directories before files
- Use Icons: Show icons for files and folders
- Include Details: Add file sizes and dates
Installation
From VS Code Marketplace
- Open VS Code
- Go to Extensions (Ctrl+Shift+X / ⌘+Shift+X)
- Search for "Tree Structure Customizer"
- Click Install
From VSIX File
- Download the .vsix file from Releases
- In VS Code, go to Extensions view
- Click "..." at the top and select "Install from VSIX..."
- Choose the downloaded file
Tips and Tricks
- For faster results, reduce "Max Scan Depth" in settings
- Set up your default excludes in settings to speed up your workflow
- For large projects, use the "Quick Generation" option
- Use HTML format when sharing tree structures with non-technical team members
Requirements
Privacy
This extension doesn't collect any data or connect to the internet. It only reads your project directory structure to generate the tree.
Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature)
- Commit your changes (
git commit -m 'Add some feature')
- Push to the branch (
git push origin feature/amazing-feature)
- Open a Pull Request
License
This project is licensed under the MIT License - see the LICENSE file for details.
Enjoy organizing your projects with Tree Structure Customizer!
Markdown (Default)
| |
