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

Node.js (v18 or higher)
pnpm package manager
VS Code

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

Bug Reports: GitHub Issues
Feature Requests: GitHub Issues
Discussions: GitHub Discussions

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! 🌳