RepoTree
A VS Code extension that generates a visual tree representation of directories and files.
✨ Features
- Generate directory tree visualization with a single click
- Customizable file/folder exclusion
- Toggle file/folder icons
- Works with any project type
- Works across all platforms (Windows, macOS, Linux)
- Add comments to files and folders in the tree
- Customize comment symbols
- Support for .gitignore file exclusions
- Smart pattern matching with glob syntax
- Respect VS Code's built-in exclude settings
- Comprehensive default exclusion patterns
- Adjustable comment spacing for readability
- Customizable tree branch spacing for better visualization
Extension Settings
Setting Name |
Display Name |
Default Value |
Description |
RepoTree.exclude |
RepoTree: Exclude |
See below* |
Configure glob patterns for excluding files and folders from the generated file tree |
RepoTree.respectWorkspaceExcludeSettings |
RepoTree: Respect Workspace Exclude Settings |
false |
When enabled, files and folders excluded by VS Code's built-in files.exclude setting will also be excluded from the generated tree |
RepoTree.respectGitignore |
RepoTree: Respect .gitignore |
false |
When enabled, files and folders listed in the .gitignore file will be excluded from the generated tree |
RepoTree.addComments |
RepoTree: Add Comments |
false |
When enabled, comments will be added to the right of each file/folder in the generated tree |
RepoTree.commentSymbol |
RepoTree: Comment Symbol |
// |
Symbol to use for comments in the generated tree |
RepoTree.commentDistance |
RepoTree: Comment Distance |
4 |
The minimum distance between the file/folder name and the comment |
RepoTree.treeDistance |
RepoTree: Tree Distance |
1 |
Controls the spacing between tree branches. Higher values make the tree look more spread out, lower values make it more consolidated |
*Default exclude patterns include common files and directories like .git , node_modules , __pycache__ , .ruff_cache , .pytest_cache , dist , build , etc.
📥 Installation
- Open VS Code
- Go to Extensions (
Ctrl+Shift+X or Cmd+Shift+X on macOS )
- Search for
Sang-Buster.RepoTree
- Click
Install
From VSIX file
- Download the
.vsix file from the releases page
- Open VS Code
- Go to Command Palette (
Ctrl+Shift+P or Cmd+Shift+P on macOS)
- Search for
Extensions: Install from VSIX...
- Select the downloaded
.vsix file
🚀 Usage
- Open a folder in VS Code
- Right-click on any folder in the Explorer view
- Select
RepoTree: Generate to Tree from the context menu
- A new tab will open with the tree visualization
- (Optional) Click the
icon off/on button to toggle file icons
- (Optional) Adjust the tree spacing in settings with
RepoTree: Tree Distance to control how spread out the tree appears
🔍 Excluding Files and Folders
RepoTree supports excluding files and folders from the generated tree:
Using VSCode's built-in files.exclude settings:
- The extension can also respect VSCode's
files.exclude settings
- Any files or folders hidden in VSCode's Explorer will also be hidden in the generated tree
- You can toggle this behavior in Settings by searching for
RepoTree: Respect Workspace Exclude Settings
- Uncheck the box to ignore VSCode's built-in exclusion settings
Using .gitignore files:
- The extension can also respect
.gitignore files
- You can toggle this behavior in Settings by searching for
RepoTree: Respect .gitignore
- Uncheck the box to ignore
.gitignore files
Custom exclusion patterns:
- The extension comes with a comprehensive set of default excludes for common files and folders
- You can customize these patterns by going to Settings and searching for
RepoTree: Exclude
- Add, delete, or edit patterns by toggling them on/off:
"RepoTree.exclude": {
"**/.git": true,
"**/__pycache__": true,
"**/.ruff_cache": true,
"**/.pytest_cache": true,
"**/node_modules": true,
"**/dist": true,
"**/build": true,
"**/out": true,
"**/.vscode": true,
"**/.idea": true,
"**/.DS_Store": true,
"**/Thumbs.db": true,
"**/coverage": true,
"**/logs": true,
"**/*.log": true,
"**/.env": true,
"**/.venv": true,
"**/bower_components": true,
"**/jspm_packages": true,
"**/.cache": true,
"**/target": true,
"**/bin": true,
"**/obj": true
}
The exclusion patterns support glob syntax:
* to match zero or more characters in a path segment
? to match one character in a path segment
** to match any number of path segments, including none
{} to group conditions (e.g., {**/*.html,**/*.txt} )
👨💻 Development
Prerequisites
Setup
Clone the repository:
git clone https://github.com/Sang-Buster/RepoTree.git
cd RepoTree
Install dependencies:
npm install
Open in VS Code:
code .
Development Workflow
- Make your changes in the
/src directory
- Press F5 to run the extension in a new VS Code window
- Test your changes in the debug instance
- Use
npm run compile to build the extension
Testing the Extension
Running in Development Mode
The fastest way to test your changes is by using VS Code's Extension Development Host:
- Press
F5 or select Run Extension from the Run and Debug view
- This will open a new window with your extension loaded
- The new window will have
[Extension Development Host] in the title bar
- You can make changes to your code and restart the extension host to test them
Debugging
- Set breakpoints in your code
- Press
F5 to start the extension in debug mode
- When your breakpoints are hit, you can inspect variables, step through code, etc.
Running Tests
There are two ways to run tests:
Using the VS Code interface:
- Go to the Run and Debug view (
Ctrl+Shift+D )
- Select
Extension Tests from the dropdown
- Press
F5 to run the tests
Using the command line:
- Run
npm run test to execute all tests
- Tests will run in a special instance of VS Code
Resolving Common Issues
- If you see warnings about
importAttributes or importAssertions , these are from Node.js internals and can be safely ignored
- If tests are failing due to exclude patterns, you may need to adjust the test code to use temporary directories
Building VSIX
To create a .vsix package for distribution:
npm install -g @vscode/vsce
vsce package
🗂️ Project Structure
📦RepoTree
┣ 📂img // Readme assets
┃ ┣ 📄demo.mp4 // Demo video
┃ ┣ 📄icon.png // Extension icon
┃ ┗ 📄screenshot.png // Screenshot
┣ 📂src // Source code
┃ ┣ 📂test // Test files
┃ ┃ ┣ 📂suite // Test suite
┃ ┃ ┃ ┗ 📄extension.test.ts // Extension test
┃ ┃ ┗ 📄runTest.ts // Test runner
┃ ┣ 📂utils // Utility functions
┃ ┃ ┣ 📄exclude-patterns.ts // File exclusion patterns
┃ ┃ ┣ 📄gitignore-utils.ts // Gitignore utils
┃ ┃ ┗ 📄glob-utils.ts // Glob utils
┃ ┣ 📂views // Views
┃ ┃ ┗ 📄output-template.ts // Output template
┃ ┣ 📄extension.ts // Extension entry point
┃ ┗ 📄tree-generator.ts // Tree generator
┣ 📄.prettierrc
┣ 📄LICENSE
┣ 📄README.md
┣ 📄RELEASE_NOTES.md
┣ 📄package.json
┣ 📄tsconfig.json
┗ 📄tslint.json
| |