Project Trees - VS Code Extension

A Visual Studio Code extension that generates clean, visual representations of your project's folder structure. Perfect for documentation, code reviews, and understanding project organization at a glance.
🚀 Features
- Visual Tree Generation: Creates ASCII-style folder trees of your project structure
- Smart Filtering: Automatically ignores common build/dependency folders (node_modules, dist, .git, etc.)
- Customizable Display: Configure which folders to show, hide, or collapse
- Debug Mode: Detailed logging for troubleshooting and configuration verification
- Export Options: Save the generated tree to a file with a customizable name
- Output Channel Integration: Results displayed in VS Code's output panel for easy copying
📦 Installation
From VS Code Marketplace (Recommended)
- Open VS Code
- Go to Extensions (Ctrl+Shift+X / Cmd+Shift+X)
- Search for "Project Trees"
- Click Install
Manual Installation from VSIX
- Download the latest
.vsix
file from the releases page
- Open VS Code
- Open Command Palette (Ctrl+Shift+P / Cmd+Shift+P)
- Run
Extensions: Install from VSIX...
- Select the downloaded
.vsix
file
🛠️ Development Setup
Prerequisites
Getting Started
Clone the repository
git clone https://github.com/Glowstudent777/VSCode-Folder-Tree.git
cd VSCode-Folder-Tree
Install dependencies
pnpm install
Compile the extension
pnpm run compile
Run in development mode
- Press
F5
in VS Code to open a new Extension Development Host window
- Or use the "Run Extension" configuration in the Debug panel
Available Scripts
pnpm run compile
- Compile TypeScript to JavaScript
pnpm run watch
- Watch for changes and auto-compile
pnpm run lint
- Run ESLint on source files
pnpm run test
- Run the test suite
pnpm run vscode:package
- Create a .vsix package file
📋 Usage
- Open any folder/workspace in VS Code
- Open Command Palette (Ctrl+Shift+P / Cmd+Shift+P)
- Run the command:
Project Trees: Generate Project Tree
- Select the output method:
- Output Channel: The tree will be displayed in the "Project Tree" output channel
- File Export: The tree will be saved to a file in the workspace root
- Clipboard: The tree will be copied to your clipboard
Example Output
my-project
├── src
│ ├── components
│ │ ├── Header.tsx
│ │ └── Footer.tsx
│ ├── utils
│ │ └── helpers.ts
│ └── index.ts
├── package.json
└── README.md
⚙️ Configuration
This extension contributes the following settings that can be configured in your VS Code settings:
projectTree.rootFolderName
- Type:
boolean
- Default:
true
- Description: Whether to show the root folder name in the project tree
projectTree.ignoreFolders
- Type:
array
- Default:
["node_modules", "dist", "out", ".git", ".vscode", ".vs", "build"]
- Description: Folders to ignore when generating the project tree
projectTree.collapsedFolders
- Type:
array
- Default:
["external", "vendor", "libs"]
- Description: Folders to collapse (show name only, not contents) in the project tree
projectTree.exportName
- Type:
string
- Default:
"${project}-tree"
- Description: The name of the exported project tree file. Use
${project}
to include the workspace folder name. For example, ${project}-tree
will result in MyProject-tree.txt
if the workspace folder is named MyProject
.
projectTree.debug
- Type:
boolean
- Default:
false
- Description: Enable debug mode to show configuration details in output
Example Configuration
Add to your VS Code settings.json
:
{
"projectTree.rootFolderName": true,
"projectTree.ignoreFolders": [
"node_modules",
"dist",
".git",
"coverage",
"build"
],
"projectTree.collapsedFolders": ["vendor", "external"],
"projectTree.debug": false
}
🔧 Building Your Own Install File
Creating a VSIX Package
Ensure you have vsce installed globally
npm install -g @vscode/vsce
Build the extension
pnpm run compile
Create the VSIX package
pnpm run vscode:package
This will create a .vsix
file in the root directory (e.g., project-trees-0.0.1.vsix
)
Install your custom build
code --install-extension project-trees-0.0.1.vsix
Publishing to Marketplace (Maintainers Only)
- Get a Personal Access Token from Azure DevOps
- Login to vsce
vsce login Glowstudent
- Publish
vsce publish
🧪 Testing
Run the test suite:
pnpm run test
The extension includes:
- Unit tests for core functionality
- Integration tests with VS Code API
- Linting with ESLint and TypeScript compiler checks
📝 Release Notes
0.0.1 (Current)
- Initial release
- Basic folder tree generation
- Configurable ignore and collapse settings
- Debug mode support
- Output channel integration
🤝 Contributing
We welcome contributions! Please follow these steps:
- Fork the repository
- Create a feature branch
git checkout -b feature/amazing-feature
- Make your changes
- Run tests and linting
pnpm run lint
pnpm run test
- Commit your changes
git commit -m 'Add amazing feature'
- Push to your branch
git push origin feature/amazing-feature
- Open a Pull Request
Development Guidelines
- Follow the existing code style
- Add tests for new functionality
- Update documentation as needed
- Ensure all tests pass before submitting
🐛 Issues & Support
Before creating an issue, please:
- Check if the issue already exists
- Include VS Code version and extension version
- Provide steps to reproduce the problem
- Include relevant configuration settings
📄 License
This project is licensed under the MIT License - see the LICENSE file for details.
🙏 Acknowledgments
- Built with the VS Code Extension API
- Inspired by command-line tree utilities
- Thanks to all contributors and users
Enjoy generating beautiful project trees! 🌳