🌳 FileTree Pro - VS Code Extension

A powerful file tree generator for VS Code and Cursor. Generate beautiful file trees in multiple formats with smart exclusions and custom configurations.

📹 Demo Videos

Watch FileTree Pro in action below!

🧪 Demo Video

➡️ Right-click any folder → Generate file tree in seconds!

⚙️ Configuration

Quick Setup

Add this to your VS Code settings (Ctrl/Cmd + ,):

{
  "filetree-pro.exclude": [
    "**/node_modules/**",
    "**/dist/**",
    "**/.git/**",
    "**/.venv/**",
    "**/build/**",
    "**/coverage/**",
    "**/*.log",
    "**/*.tmp"
  ],
  "filetree-pro.showIcons": true,
  "filetree-pro.respectGitignore": true,
  "filetree-pro.useCopilot": false
}

Custom Exclusions

Add your own patterns to exclude files/folders:

{
  "filetree-pro.exclude": [
    "**/node_modules/**",
    "**/my-custom-folder/**",
    "**/*.test.js",
    "**/temp/**"
  ]
}

🚀 Features

📁 Smart File Tree Generation

• Right-click any folder → Generate file tree
• Select text → Convert to tree format
• 4 Output Formats: Markdown, JSON, SVG, ASCII
• Icon Support: Beautiful icons for all file types
• Smart Exclusions: Automatically excludes build files, dependencies, and temp files

🌍 Universal Language Support

• 50+ Programming Languages: JavaScript, Python, Java, C++, Go, Rust, Kotlin, Scala, C#, F#, Dart, R, MATLAB, Julia, Perl, Lua, Haskell, Clojure, Elixir, Erlang, OCaml, Nim, Zig, V, Assembly, and more
• Special Files: Dockerfile, Makefile, README, LICENSE, CHANGELOG
• Web Technologies: HTML, CSS, SCSS, Vue, Svelte
• Configuration Files: YAML, TOML, INI, XML, JSON

🎨 Multiple Export Formats

| Format | Use Case | Features | | --------------- | ----------------------- | ----------------------- | | 📄 Markdown | Documentation, GitHub | Icons, clean formatting | | 📊 JSON | APIs, Data processing | Structured data, icons | | 🎨 SVG | Presentations, diagrams | Visual, scalable | | 📝 ASCII | Universal compatibility | Plain text, portable |

🛡️ Smart Exclusions

Automatically excludes common build artifacts and respects .gitignore files:

• Respect .gitignore: Honors your project's .gitignore patterns
• node_modules, dist, build, out
• .git, .venv, venv, env
• *.log, *.tmp, *.cache
• __pycache__, *.pyc
• target, bin, obj
• .DS_Store, Thumbs.db

⚡ Performance Optimized

• Memory Management: Efficient for large projects
• Async Processing: Non-blocking tree generation
• Loading States: Visual feedback during processing
• Batch Processing: Handles 10,000+ files smoothly

🎯 Quick Start

1. Install Extension: Search "FileTree Pro" in VS Code Extensions
2. Open Project: Open any project folder in VS Code
3. Generate Tree: Right-click on any folder → "Generate File Tree"
4. Choose Format: Select Markdown, JSON, SVG, or ASCII
5. Choose Style: With or without icons
6. Save: The tree opens in an unsaved tab - save when ready!

📝 Text to Tree Conversion

New Feature! Convert any text list into a beautiful tree format:

1. Select text in any editor (file paths, folder lists, etc.)
2. Right-click → "Convert Text to Tree"
3. View the converted tree in a new tab

📹 Demo Video - How to convert text to tree

Example Input

src/
main.js
utils.js
components/
Header.js
Footer.js

Example Output

# File Tree from Text

├── 📁 src/
├── 📄 main.js
├── 📄 utils.js
├── 📁 components/
├── 📄 Header.js
└── 📄 Footer.js

*Generated by FileTree Pro Extension*

📹 Video Guide

Watch this quick demo to see FileTree Pro in action:

Video shows: Right-click on folder → Generate File Tree → Choose format → View beautiful tree output

📋 Commands

• Generate File Tree - Right-click on folder to generate tree
• Convert Text to Tree - Select text and convert to tree format
• Refresh Tree - Regenerate with current settings
• Export Tree - Export in different formats

🎨 Examples

Markdown Output

# File Tree: my-project

├── 📁 src/
│   ├── 📄 main.js
│   ├── 📄 utils.js
│   └── 📁 components/
│       ├── 📄 Header.js
│       └── 📄 Footer.js
├── 📄 package.json
├── 📄 README.md
└── 📁 node_modules/ 🚫 (auto-hidden)

JSON Output

{
  "name": "my-project",
  "type": "directory",
  "icon": "📁",
  "children": [
    {
      "name": "src",
      "type": "directory",
      "icon": "📁",
      "children": [...]
    }
  ]
}

🔧 Advanced Configuration

.gitignore Support

{
  "filetree-pro.respectGitignore": true
}

Automatically respects your project's .gitignore patterns when generating file trees. Enabled by default.

Custom Exclusions

{
  "filetree-pro.exclude": [
    "**/node_modules/**",
    "**/dist/**",
    "**/.git/**",
    "**/my-custom-folder/**",
    "**/*.test.js",
    "**/temp/**",
    "**/logs/**"
  ]
}

Icon Settings

{
  "filetree-pro.showIcons": true
}

Copilot Integration (Optional)

{
  "filetree-pro.useCopilot": false
}

🌟 Use Cases

For Developers

• Project Documentation: Generate file trees for README files
• Code Reviews: Share project structure with team
• Onboarding: Help new developers understand project layout
• Architecture Analysis: Visualize project structure

For Teams

• Documentation: Export trees for project docs
• Presentations: Use SVG format for slides
• API Documentation: JSON format for tools
• Cross-platform: ASCII format works everywhere

For Educators

• Teaching: Show project structures to students
• Examples: Demonstrate different project organizations
• Analysis: Analyze student project structures

🚀 Performance

• Small Projects (< 1,000 files): < 1 second
• Medium Projects (1,000-10,000 files): < 3 seconds
• Large Projects (10,000+ files): < 10 seconds

📄 License

MIT License - see LICENSE file for details.

☕ Support

If you find this extension helpful, consider buying me a coffee! ☕

📞 Contact & Social Media

• Email: [email protected]
• GitHub: @0xTanzim
• LinkedIn: @0xtanzim
• Facebook: @0xtanzim
• Instagram: @0xtanzim

Made with ❤️ for the VS Code community