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.
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.
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.
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.
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. We've just recently launched a course on React, so don't forget to check it out. 🙂
Have a great time programming! 👍
Top comments (0)