loading...
Cover image for Up Your Editor Game With VSCode Workspaces

Up Your Editor Game With VSCode Workspaces

sandricop profile image Sandrico Provo ・2 min read

Why Workspaces 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.

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.

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!

Alt Text

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

Alt Text

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.

Alt Text

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. In vscode, go to File > Save Workspace As

Alt Text

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!

Alt Text

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

Alt Text

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 mean typing one keyword versus opening vscode and searching your computer files each time.

Happy Learning πŸ˜„πŸ‘‹πŸΎ

Posted on by:

sandricop profile

Sandrico Provo

@sandricop

Canadian πŸ‡¨πŸ‡¦ Front-End Web Developer. Career changer. Passionate about learning and helping others learn. Interested in all things front end and web design πŸ‘¨πŸΎβ€πŸ’»πŸ‘¨πŸΎβ€πŸŽ¨.

Discussion

pic
Editor guide