Project Manager VS Code Plugin

Project Manager VS Code Plugin is a Visual Studio Code extension for organizing local project folders into labeled groups. It gives you a dedicated project list inside the VS Code Activity Bar, so you can keep frequently used folders close, group them by context, and open them in the current window with a single click.

The extension is designed for developers who work with many repositories, client projects, experiments, learning folders, or workspace directories and want a lightweight project launcher without leaving the editor.

Overview

VS Code is often used as the center of a developer's daily workflow, but switching between many local project folders can still be repetitive. Project Manager VS Code Plugin solves this by adding a simple labeled tree view to the side bar.

Instead of searching through the file system every time, you can create labels such as Work, Clients, Open Source, Learning, Archived, or any naming system that matches your workflow. Each label can contain projects and nested labels. Clicking a project opens that folder in the current VS Code window.

The extension focuses on a small, predictable workflow:

• save the current workspace folder;
• create a label;
• create nested labels inside labels;
• add a folder as a project;
• group projects under labels;
• keep projects in the root list without a label;
• drag folders onto labels;
• move projects between labels or back to the root list;
• move labels into other labels or back to the root list;
• mark projects with colors;
• open projects quickly;
• delete entries when they are no longer needed.

No external service is required. Project data is stored locally through VS Code extension storage.

Main Features

Labeled Project Groups

Create labels that work like folders inside the Project Labels view. Labels are parent items in the tree and can contain any number of saved projects and nested labels.

Possible label examples:

• Work
• Personal
• Client Projects
• Open Source
• Learning
• Templates
• Archived
• Experiments

Labels are intentionally flexible. The extension does not force a specific project organization style.

Saved Project Folders

Projects are saved as local folder paths. A project entry contains:

• a display name;
• a local file system path;
• an optional label.

When you click a project, VS Code opens the saved folder in the current window.

Projects can live directly in the root of the tree or inside a label.

Nested Labels

Labels can be created inside other labels from the context menu. This allows deeper structures such as Work / Client A / Backend or Personal / Learning / TypeScript.

Project Colors

Projects can be marked with a color from the context menu. The color is applied to the project icon and saved with the project entry.

Drag-and-Drop Support

Folders can be dragged from the VS Code Explorer and dropped directly onto a label in the Project Labels tree.

When a folder is dropped, the extension reads the dropped URI, extracts the folder name and path, and saves it under the selected label.

Saved projects can also be dragged inside the tree. Drop a project onto any label at any depth to move it there, or drop it onto the root area of the tree to remove its label.

Labels can also be dragged inside the tree. Drop a label onto another label to make it nested, or drop it onto the root area to move it back to the top level.

Save Current Folder

The Save button stores the currently opened workspace folder as a project. This is the fastest way to add the folder you are already working in.

If the current VS Code window has multiple workspace folders, the extension asks which folder should be saved.

Folder Picker Flow

Projects can also be added through the Add Project command. This opens a folder picker, asks for a project name, and then lets you choose the label where the project should be stored.

This flow is useful when you want to choose a specific folder manually or rename the project entry before saving it.

Context Menu Actions

The tree view supports right-click actions.

Current context actions:

• delete a project;
• delete a label and all projects inside it.

Manual Refresh

The project tree can be refreshed manually through the Refresh command in the view title menu.

Local Persistence

Project data is stored with VS Code's context.globalState. The data stays available across VS Code sessions for the current user and extension installation.

User Interface

The extension contributes a custom Activity Bar container:

Project Labels

Inside that container, it contributes a tree view:

My Projects

The tree has two item types:

Item type	Description
Label	Parent item that groups projects and nested labels
Project	Child item that opens a saved folder

Labels use a folder-style icon. Projects use a project/folder-style icon.

Projects without a label appear at the root of the tree.

Usage

Save the Current Folder

1. Open a folder in VS Code.
2. Open the Project Labels view from the Activity Bar.
3. Click Save.
4. The current folder is saved as a root project without a label.

Create a Label

1. Open the Project Labels view from the Activity Bar.
2. Click Add Label.
3. Enter the label name.
4. Confirm the input.

The new label appears in the tree as a collapsible parent item.

Create a Nested Label

1. Right-click an existing label.
2. Select Add Label.
3. Enter the nested label name.
4. Confirm the input.

The new label appears inside the selected label.

Add a Project with the Folder Picker

1. Open the Project Labels view.
2. Click Add Project.
3. Select a local folder.
4. Enter a project name.
5. Select an existing label, create a new label, or save without a label.
6. Confirm the selection.

The project appears under the selected label or at the root of the tree.

Add a Project with Drag-and-Drop

1. Open the VS Code Explorer.
2. Find the folder you want to save as a project.
3. Drag the folder onto a label in the Project Labels view.
4. Drop it directly on the label item.

The extension saves the folder under that label.

Move a Project Between Labels

1. Drag an existing project item from the tree.
2. Drop it onto another label.
3. The project is moved from its previous location to the target label.

Move a Project Back to the Root

1. Drag an existing project item from a label.
2. Drop it onto the root area of the tree.
3. The project is moved out of the label and saved as an unlabeled root project.

Move a Label Into Another Label

1. Drag an existing label item from the tree.
2. Drop it onto another label.
3. The dragged label becomes a nested label inside the target label.

The extension prevents moving a label into itself or into one of its own child labels.

Move a Label Back to the Root

1. Drag a nested label item from the tree.
2. Drop it onto the root area of the tree.
3. The label becomes a top-level label again.

Open a Project

Click any saved project item in the tree.

VS Code opens the project folder in the current window.

Set a Project Color

1. Right-click a project item.
2. Select Set Color.
3. Choose a color or Default.

The selected color is applied to the project icon and saved in extension storage.

Delete a Project

1. Right-click a project item.
2. Select Delete.
3. The project is removed from the label.

Deleting a project only removes it from the extension's saved list. It does not delete the folder from disk.

Delete a Label

1. Right-click a label item.
2. Select Delete.
3. Confirm the deletion.

Deleting a label removes the label and all project entries inside it. It does not delete any project folders from disk.

Refresh the Tree

Click Refresh in the view title menu.

This forces the tree to reload from extension storage.

Commands

The extension contributes the following commands:

Command	Title	Description
projectExplorer.saveCurrentFolder	Save	Saves the current workspace folder as a root project
projectExplorer.addLabel	Add Label	Creates a new label in the project tree
projectExplorer.addProject	Add Project	Opens a folder picker and saves the selected folder as a project
projectExplorer.refresh	Refresh	Refreshes the project tree
projectExplorer.delete	Delete	Deletes the selected project or label
projectExplorer.setProjectColor	Set Color	Sets a saved project icon color

Data Model

Project Manager VS Code Plugin stores labeled projects as a recursive array of label groups. Each label has a name, a list of projects, and optional child labels.

Array<{
  label: string;
  projects: Array<{
    name: string;
    path: string;
    color?: 'red' | 'orange' | 'yellow' | 'green' | 'blue' | 'purple';
  }>;
  labels?: StoredLabel[];
}>;

Projects without a label are stored separately as root projects:

Array<{
  name: string;
  path: string;
  color?: 'red' | 'orange' | 'yellow' | 'green' | 'blue' | 'purple';
}>;

Example:

[
  {
    "label": "Work",
    "projects": [
      {
        "name": "Main API",
        "path": "/Users/example/projects/main-api"
      },
      {
        "name": "Admin Dashboard",
        "path": "/Users/example/projects/admin-dashboard"
      }
    ]
  },
  {
    "label": "Learning",
    "projects": [
      {
        "name": "TypeScript Playground",
        "path": "/Users/example/labs/typescript-playground"
      }
    ]
  }
]

Storage

The extension uses VS Code global extension storage:

context.globalState

The storage key is:

projectExplorer.labels

Root projects without labels use this storage key:

projectExplorer.rootProjects

This means saved projects are tied to the VS Code user profile and extension storage, not to a single workspace folder.

Drag-and-Drop Details

The drag-and-drop implementation uses VS Code's Tree Drag and Drop API.

The supported drop MIME type is:

text/uri-list

When an external folder is dropped onto the tree:

1. The extension reads the URI list from the data transfer payload.
2. Each URI is parsed as a VS Code URI.
3. The local file system path is extracted.
4. The folder name is used as the default project name.
5. The project is stored under the target label, including nested labels, or at the root.
6. The tree is refreshed.

When an existing project is dragged inside the tree, the extension moves it from its source location to the target label or to the root project list.

When an existing label is dragged inside the tree, the extension moves the full label branch, including its nested labels and projects.

Requirements

Runtime requirement:

• Visual Studio Code ^1.100.0

Development requirements:

• Node.js
• npm
• TypeScript
• VS Code Extension API typings

The project dependencies are declared in package.json.

Installation for Development

Install dependencies:

npm install

Compile the extension:

npm run compile

Start TypeScript watch mode:

npm run watch

Package the extension:

npm run package

Scripts

Script	Description
npm run compile	Compiles the TypeScript source using the project TypeScript configuration
npm run watch	Runs the TypeScript compiler in watch mode
npm run lint	Runs ESLint against the src directory
npm test	Runs the configured VS Code extension test command
npm run package	Builds a VSIX package
npm run vscode:prepublish	Runs the compile step before publishing

Project Structure

.
├── assets/
│   └── marketplace/
│       └── image.png
├── src/
│   ├── extension.ts
│   ├── projectsProvider.ts
│   └── test/
│       └── extension.test.ts
├── package.json
├── README.md
└── tsconfig.json

Source Files

src/extension.ts

This file is the extension entry point.

It is responsible for:

• creating the ProjectsProvider;
• creating the TreeView;
• attaching the drag-and-drop controller;
• registering extension commands;
• wiring command handlers to provider methods.

src/projectsProvider.ts

This file contains the main extension logic.

It is responsible for:

• defining the project and label data model;
• defining ProjectItem;
• implementing TreeDataProvider;
• implementing TreeDragAndDropController;
• reading data from context.globalState;
• writing data to context.globalState;
• creating labels;
• creating nested labels;
• moving labels;
• adding projects;
• deleting projects;
• deleting labels;
• setting project colors;
• parsing dropped folder URIs;
• refreshing the tree.

Extension Contributions

The extension contributes:

• an Activity Bar view container;
• a TreeView;
• a Save command for the current workspace folder;
• commands;
• view title menu actions;
• item context menu actions;
• nested label actions;
• project color actions;
• Marketplace metadata;
• an extension icon.

The main view ID is:

projectExplorer

The Activity Bar container ID is:

project-manager-labels

Marketplace Metadata

The extension includes Marketplace metadata in package.json, including:

• display name;
• description;
• publisher;
• icon;
• categories;
• keywords;
• gallery banner;
• command titles;
• view titles.

The package name remains:

project-manager-vs-code-plugin

The Marketplace display name is:

Project Manager VS Code Plugin

Extension Settings

This extension does not currently contribute user-facing configuration settings.

Future settings could include:

• default label name;
• duplicate project behavior;
• open folder behavior;
• confirmation behavior for deletion;
• default project color;
• tree sorting mode;
• label sorting mode;
• project sorting mode.

Current Behavior

Duplicate Projects

When adding a project to a location, the provider checks whether a project with the same normalized path already exists in that location. If it already exists, it is not added again.

Missing Labels

If a project is added to a label that does not exist, the provider creates the label automatically.

Deleting Labels

Deleting a label asks for confirmation. If confirmed, the label and its saved project entries are removed from extension storage.

Deleting Projects

Deleting a project removes the saved entry from extension storage. It does not touch the folder on disk.

Opening Projects

Project items use the built-in VS Code command:

vscode.openFolder

The command is called with the saved folder path and opens the project in the current window.

Moving Projects

Dragging a saved project onto a label moves the project into that label. Dropping it onto the root area moves it out of any label.

Moving Labels

Dragging a label onto another label moves the full label branch into the target label. Dropping a label onto the root area moves it back to the top level.

Coloring Projects

Project colors are stored on project entries. Choosing Default removes the saved color and returns the icon to the theme default.

Known Limitations

• Labels cannot be renamed yet.
• Projects cannot be renamed after creation yet.
• Labels are not sorted automatically yet.
• Projects are not sorted automatically yet.
• There is no import or export feature yet.
• There is no workspace-specific storage mode yet.
• There is no command to reveal a project folder in the operating system file manager yet.
• There is no custom project icon selection yet.

Planned Improvements

Possible future improvements:

• rename labels;
• rename projects;
• sort labels and projects;
• export saved projects to JSON;
• import saved projects from JSON;
• support workspace-specific project lists;
• add search or filtering;
• add commands for opening projects in the current window;
• add command palette actions for quick project opening;
• add optional confirmation when deleting projects;
• add richer empty-state messaging;
• improve drag-and-drop behavior for multiple folders.

Troubleshooting

The Project Labels view is not visible

Make sure the extension is installed and enabled. The view should appear in the VS Code Activity Bar as Project Labels.

A dropped folder is not added

Make sure the dropped item is a folder URI from the VS Code Explorer.

A project does not open

Make sure the saved folder path still exists on disk. If the folder was moved or deleted outside VS Code, the saved project entry may point to an invalid path.

A duplicate project is not added

If a project with the same normalized path already exists under the same label, the extension skips adding it again.

Release Notes

0.0.1

Initial draft release.

Included:

• Save button for the current workspace folder;
• Activity Bar container;
• TreeView for labels and projects;
• root projects without labels;
• label creation;
• nested label creation;
• folder picker project creation;
• project opening in the current window;
• project deletion;
• label deletion;
• project color selection;
• manual refresh;
• drag-and-drop folder support;
• internal project drag-and-drop between labels and root;
• internal label drag-and-drop between labels and root;
• local persistence through context.globalState;
• Marketplace icon metadata.