Workspaces in VSCode and How To Set Up and Customize Them?
Tags: vscode, programming, coding, tutorial
Published: 2023-03-15 14:10:38

## Introduction

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.

-----

## What is a workspace?

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.

💡 **Note:**
_With the introduction of multi-root workspaces in VSCode, it's possible to have a workspace that consists of more than one directory, but that's an advanced idea and so we'll skip its details in this article._

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.

> 
Technically, a ***workspace*** is just another name for a **directory** that has been loaded into VSCode.

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.

-----

## Opening up a workspace

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.

![File menu in VSCode.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4y1v8dd11wj405zq7cpq.png)

In the menu, select **Open Folder**:

![Open Folder option in File menu in VSCode.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tp71p8fv7p7ng2indbsn.png)


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,

![VSCode Get Started page.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ndl6kta09bjajxss9gyc.png)


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

![Open Folder options in VSCode Get Started page.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7a6bk8lapu3scxkb97wu.png)


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.

-----

## Customizing 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.

![VSCode Workspace settings.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rsp2ikg3z1qjh2xlojct.png)

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


![VSCode workspace settings — color theme.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8gyheuhrf8d831nmgc3f.png)

### 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](https://fonts.google.com) and view a couple of trendy monospace fonts.

![Monospace fonts on Google Fonts.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bdafa1ix8qhkhjfwelur.png)

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'*:

![VSCode workspace settings — editor's font family.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/74xwzka5tigdrd0tmohm.png)


![VSCode workspace settings — editor's font family.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mgfe5zg7slg9fmh3lpwo.png)


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

*And we're done customizing.*

-----

## In the end

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.

For more amazing content on programming, and an exploration of some free courses, head over to [codeguage.com](https://www.codeguage.com/). We've just recently launched a [course on React](https://www.codeguage.com/courses/react/), so don't forget to check it out. 🙂 

Have a great time programming! 👍