Skip to content
| Marketplace
Sign in
Visual Studio Code>Visualization>Tree Structure CustomizerNew to Visual Studio Code? Get it now.
Tree Structure Customizer

Tree Structure Customizer

Indraneel Shinde

|
5 installs
| (0) | Free
Generate project tree with fast, customizable options
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Tree Structure Customizer

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

Demo

Usage

Quick Start

  1. Right-click on any folder in the Explorer or anywhere in the editor
  2. Select "Generate Project Tree…"
  3. Choose folders to exclude
  4. Select "Quick Generation" for instant results with default settings
  5. Done! Your tree structure appears in a new file

Custom Generation

For more control over the output:

  1. Follow steps 1-3 above
  2. Select "Full Customization"
  3. Choose your preferred output format and options
  4. Configure details like file sizes, dates, styling, etc.
  5. View your custom tree structure

Output Formats

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

HTML Tree

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

  1. Open VS Code
  2. Go to Extensions (Ctrl+Shift+X / ⌘+Shift+X)
  3. Search for "Tree Structure Customizer"
  4. Click Install

From VSIX File

  1. Download the .vsix file from Releases
  2. In VS Code, go to Extensions view
  3. Click "..." at the top and select "Install from VSIX..."
  4. 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

  • VS Code 1.60.0 or later

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.

  1. Fork the repository
  2. Create your feature branch (git checkout -b feature/amazing-feature)
  3. Commit your changes (git commit -m 'Add some feature')
  4. Push to the branch (git push origin feature/amazing-feature)
  5. 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)

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft