Workspace Explorer provides a convenient UI to quickly switch your
workspace or open a workspace in a new window.
I should note before we dive into setup, VSCode currently allows you to only have one instance of
a workspace open at a time, i.e. your node.code-workspace can only be open
in one window of VSCode.
Five quick steps to get you up and running:
- Install the Workspace Explorer extension.
- Add a directory to the Workspace Explorer: Workspace Storage Directory setting.
- On Windows/Linux - File > Preferences > Settings > search "Workspace Explorer".
- On Mac - Code > Preferences > Settings > search "Workspace Explorer".
- Add your existing .code-workspace files or save a new workspace to the Workspace Storage Directory.
- Open the Workspace Explorer by clicking on the WORKSPACES title towards the bottom of the Explorer section of VSCode.
- Hit the refresh icon that appears when you hover over the WORKSPACES title.
Workspace Explorer allows you to have quick access to all your workspaces
in one convenient UI.
- Custom Icons
Organize your .code-workspace files as much as you want within the
Workspace Explorer: Workspace Storage Directory. Sub-folders will be listed in the Workspace Explorer. Click on the arrow
to expand the directory and reveal any deeper sub-folders or workspaces.
There are at least three ways to create a sub-folder:
- Clicking on the Create Sub-folder button on the Workspace Explorer title menu (right next to where it says WORKSPACES). This will create one directly in the Workspace Storage Directory.
- Right clicking on a folder in the Workspace Explorer > Create Sub-folder.
- Through the Open Workspace Storage Directory button where you can then create a sub-folder using the standard OS menus.
Workspace Explorer also allows you to remove unwanted sub-folders.
There are at least two ways to remove a sub-folder:
- Right clicking on a folder in the Workspace Explorer > Delete.
- Through the Open Workspace Storage Directory button where you can then remove a folder using the standard OS menus.
Workspace Explorer also allows you to rename sub-folders.
There are at least two ways to rename a sub-folder:
- Right clicking on a folder in the Workspace Explorer > Rename.
- Through the Open Workspace Storage Directory button where you can then rename a folder using the standard OS menus.
Creating a Workspace
Create a new workspace from the contents of your Explorer panel or choose
folders to build a workspace from scratch.
- Root: Create a workspace at the root of your Workspace Storage Directory by clicking on the Create Workspace button on the Workspace Explorer navigation bar.
- Subfolder: Create a workspace in a sub-folder of your Workspace Storage Directory by right clicking on the sub-folder and choosing Create Workspace.
- Anywhere: Save a workspace in you Workspace Storage Directory using VSCode's File or Code menu > Save Workspace As
Deleting a Workspace
Remove a workspace simply by right clicking on it in the Workspace Explorer and choosing Delete.
Renaming a Workspace
Workspace Explorer also allows you to rename workspaces.
There are at least two ways to rename a workspace:
- Right clicking on a workspace in the Workspace Explorer > Rename.
- Through the Open Workspace Storage Directory button where you can then rename a workspace using the standard OS menus.
Setting Custom Icons
Workspace Explorer comes with two default icons. One for sub-folders
and one for workspaces. Adding custom icons is a great way to further
organize and quickly recognize your workspaces/sub-folders.
You can add icons in one of three ways:
- Right clicking on a workspace or folder in Workspace Explorer and choosing Change Folder Icon or Change Workspace Icon.
- Through the Open Workspace Storage Directory button
- Click the button
- Copy the desired .svg or .png into the same directory as your folder or workspace that you want the icon for. Ex: "Webserver Configs.code-workspace" ==> "Webserver Configs.svg".
- Rename the icon to the name of the workspace or folder.
- Refresh the Workspace Explorer using the Refresh button
- Use an additional icons folder (See Additional Custom Icons Directory)
Additional Custom Icons Directory
Workspace Explorer also allows you to add an additional custom icons
directory. It first searches the Workspace Storage Directory. If it
then cannot find the image file (see Option One for how to name images
and where to put them) then it will search the Additional Custom Icon Directory.
It will only search one level of the directory (no sub-directories). If
no icon is found at that point, default icons are used.
Enabling the Additional Custom Icon Directory
- Ensure the Workspace Explorer: Enable Custom Icon Search setting
is enabled. It is enabled by default.
- Add a path to the Workspace Explorer: Additional Custom Icon Directory
- Hit the refresh icon on the Workspace Explorer.
Workspace Explorer requires that code, code-insiders,
code-oss, or codium be added
to the $PATH environment variable.
- When opening a new window or switching
the workspace in the existing window it will use these key words to run
the application via command-line.
If working on MacOS run the Command Palette Command Install code command in Path
The easiest way to test this is to open a terminal/cmd/bash and type
code or your
specific flavor. See above. If VSCode opens then it's working. Otherswise you can do
- If on MacOS run the Command Palette Command Install code command in Path
- Reinstall VSCode and Reboot (for most OS's
code is setup in the install).
Workspace Explorer contributes the following settings:
The root directory containing your .code-workspace files.
Workspace Explorer will show you any .code-workspace's in this
directory and will also display any sub-folders. This will allow
you to organize your workspaces into categories by sub-folder.
Allow Workspace Explorer to search for .svg and .png files with
the same name as your workspaces and folders. Then to use those
as icons in the Workspace Explorer. The search path defaults to
the same location as your workspace file. An additional search
directory can be added in the
Workspace Explorer: Additional Custom Icon Directory setting.
Give Workspace Explorer an additional search directory
for .svg and .png files with the same name as
your workspaces and folders. Then use those as icons in the
Workspace Explorer. Workspace Explorer will first look in
the Workspace Storage Directory and then will look in
the Additional Custom Icon Directory. Ex: C:\Users\appuser\icons
- Added Experimantal Create Workspace right click option.
- Added Experimental Create Workspace button on the Workspace Explorer navigation menu.
- Added Delete right click option. Works for both folders and workspaces.
- Added Create Sub-folder right click option.
- Added Create Sub-folder button on the Workspace Explorer navigation menu.
- Added Rename right click options. Works for both folders and workspaces.
- Updated Enable Custom Icon Search Configuration to be enabled by default
- Fix for POSIX style pathing on extension load that would prevent the extension from finding its version. Thanks to @CugeDe for finding the source of the issue.
- Added Open workspace storage directory button.
- Added Collapse All button
- Add Change Icon option in right click menu
- Removed Settings button.
- Updated Requirements Section of README
- Fixed support for VSCodium to call codium when changing workspace.
- Updated default icon sets to use default icons from VSCode.
- Migrated repository to new home.
- Additional Docs update for version 1.2
- Added support for additional versions of VSCode.
Contributed by @stripedpajamas
- Added support for symlinked directories.
Workspace Explorer will now follow symlinked directories to find
.code-workspace files and image files. Thanks to @Xaryphon for providing
the initial version of the code for this feature.
- Updated .vscodeignore to not include animations.
- Updated Documentation with proper animations.
0.0.1 to 1.0.0 Pre-release
- Add the ability to create a new sub-folder.
- Feature Built Waiting for tree view drag and drop API to be stable in VSCode.
- A button would be added to the title bar indicating a new folder.
- The default location of the new folder would be in the
Workspace Storage Directory, but a sub-folder in the Workspace
Explorer could be selected before clicking the button.
- Add the ability to open the Additional Custom Icon Directory from the Workspace Explorer
- Add a button the the title bar that would open a file explorer
at the Additional Custom Icon Directory.
- Add the ability for Workspace Explorer to search sub-folders for icons
- Workspace Explorer would recursively search the
Workspace Storage Directory for icons.
- Workspace Explorer would recursively search the
Additional Custom Icons Directory for icons.
- Add the ability to use an ignore file to ignore specified sub-folders
in the Workspace Storage Directory.
- Add a warning message to the workspace explorer if the Workspace Storage Directory is not set.
- Waiting on the proposed API to become stable in VSCode.
- Will remove the notification message when this is implemented.
- Tom Saunders (original author, primary maintainer)
Special thanks to the project testers.
- Renaud Talon
- Robert Tomcik
- Ryan Gold