Workspaces in VS Code and How to Set Up and Customize Them?

Over the years, many editors have been created to allow developers to easily work with their code. Perhaps, one of the most popular and successful of these has been Visual Studio Code. Visual Studio Code, or simply VSCode, is an open-source software developed by Microsoft.

It's an extremely powerful, performant and configurable text editor that's a lot more than just an editor. Back in the day, when I was new to coding, I used to work in Microsoft Webmatrix (don't really know how many of you have heard of it). It was a fully-fledged IDE for working with JavaScript, PHP and MySQL. It worked really well and I just loved it.

But then Microsoft discontinued it and instead favored the use of VSCode. Having no other option, I finally decided to try VSCode, and since that day, I am in love with it. It's absolutely flawless.

Being able to effectively work in VSCode means that you know about the different ideas of the open-source editor, especially about workspaces.

In this article, we'll see what exactly are workspaces in VSCode and how to create them to organize and work with our code projects. We'll also see how to customize workspaces in VSCode.

A workspace in VSCode can be thought of as a directory that's loaded into the editor. In fact, a workspace is a directory at the end of the day.

When we work on a given project, it's desirable to load the entire directory holding the project's data into VSCode so that we always have complete and quick access to the project's files.

This is done with the help of workspaces.

But, if we take a closer look, a workspace is much more than just a loaded directory. We can customize the settings of VSCode on a workspace basis, which really helps us quickly change between given configurations and settings for given workspaces.

For example, we might currently be learning Python and Node.js. While coding in Python, we might prefer to have a dark color theme while working in Node.js, we might prefer a light color theme. Thanks to workspaces, this is really easy to do so.

Let's now see how to actually open up a workspace in VSCode.

In order to open up a workspace in VSCode, there are a couple of methods. Let's see each one.

From the File menu

Open up VSCode and navigate to the File menu from the menu bar.

In the menu, select Open Folder.

A shortcut to do the same thing is to press Ctrl + K followed by Ctrl + O.

This launches the operating system's file browser modal. From here, select the directory that you want to open as a workspace, and then wait for a couple of seconds while VSCode processes the directory.

And voila! You're done.

From the Get Started page

Open up VSCode. If the editor launches with a default Get Started welcome page, as shown below

select the Open Folder option from the list of options on the left side of the page, as highlighted below:

This should once again pop up the operating system's file browser modal. From here, select the directory that you want to load as a workspace and then, as before, wait a couple of seconds for processing to happen.

And you're done!

Once a directory is opened up as a workspace, you'll see its contents displayed in the Explorer panel. It's really easy to add new files and/or directories to the workspace using this Explorer panel. Let's now see how to customize a workspace.

One of the first things that you'll like to do as you open up a new workspace is to customize it. But what kind of customizations are we talking about here?

Well, we're talking about customizing the color theme and the font of the workspace. These help us tailor the workspace to our visual preferences.

Customizing the color theme

Let's see how to change the color theme for a workspace.

Open up the Settings of VSCode and then select the Workspace option from the top-left area.

Now, type in 'color theme' into the search field and then choose a color theme from the suggestion that reads Workbench: Color Theme.

Customizing the font

Let's now move to customize the font of our workspace.

Before we could make this customization, we have to know which font we'd like to use. It's recommended to stick to monospace fonts only because they're suited to coding and increase the readability of code. There's no better place to explore some modern monospace fonts for free than Google Fonts.

Let's head over to fonts.google.com and view a couple of trendy monospace fonts.

JetBrains Mono seems like a really good candidate to be used in our workspace. So, let's go on and download it. Once downloaded, we ought to install the font's files on our operating system.

With this done, let's now head over to the settings window of VSCode again and type 'font family' in there.

In the suggestion that reads Editor: Font Family, type the name 'JetBrains Mono':

This will change the font of the workspace to this spectacular monospace font from JetBrains.

And we're done customizing.

VSCode is undoutedly one spectacular text editor for writing out code. As we saw in this article, workspaces represent an integral idea of the editor that we must know how to work with. Being able to customize the workspace is an equally important thing, as it helps us resonate the workspace according to our visual style preferences.

There is a lot to VSCode than just understanding workspaces and customizing them. In later articles, we'll be exploring more details of working with VSCode, and leveraging the true potential out of it.