A custom play button with the letter S cut out of it.

Published on: August 14, 2020

Up Your Editor Game With VSCode Workspaces

HTML, CSS, JavaScript

Workspaces are a .code-workspaces file that save our project folder configuration. Once configured, instead of opening multiple folders manually the .code-workspaces file opens them for you. This is much faster and easier then writing a shell script or setting up a custom command because one set up it can be as easy as one click.

Why This Will Up Your Efficiency Game

Do you ever find yourself working on a project and having to open multiple folders in vscode manually? Well, VSCode Workspaces can do this for you by opening several folders in the same window with one click.

Now, let's check out how to make a workspace!

A Step by Step Guide to Making a Workspace

Step 1 - Pick Your Folders

Before we do anything we need to know which folders we want in our workspace. The great part about workspaces is that these folders and files can be anywhere on your computer! An image of two folders that do not share the same root folder.

Step 2 - Add Your Folders

Now that we have our folders selected, you can add them to your workspace. In vscode, go to File > Add Folder to Workspace VScode workspace add workspace setting in file menu dropdown list.

Once you've added them in, this is what your vscode file explorer will look like. Notice the round circle to the left of each folders name.

VScode workspace file explorer ui when workspace is open and unsaved.

Step 3 - Save Your New Workspace

With our workspace set up, the last thing we have to do is save it so we don't have to make it again.

VScode workspace save workspace setting in file menu dropdown list.

Once you save your new workspace, it should show up as a [NAME].code-workspace file wherever you saved it. Now you can open it whenever you want to work in those folders together!

A vscode workspaces file will have a .code-workspace extension.

When you open your new workspace, you should see its name in the file explorer.

VScode workspaces ui showing saved workspaces name when opened.

Hot Tip 🔥

If you use a Mac and have Alfred, you can make this even better by setting up a workflow to open your .code-workspaces in vscode via a command. This can be typing one keyword versus opening vscode and searching your computer files each time.

Happy Learning 😄👋🏾