How to Create a New Workspace in VS Code

The Visual Studio Code Workspace is a collection of files opened in a single window. A Workspace can be a single folder but, in some cases, will include multiple files in a development workflow known as multi-root Workspaces. If you’re working on a project and have to open multiple files on this platform, the new Workspace feature can help. You will be able to open several files in the same window, making it easy to access all your necessary documents. The .code-Workspaces file is used to save the project’s folder configuration. Once configured, it will automatically open the various files in the same window. It’s also much faster and easier to set up than writing a shell script. Check out how to create a VS Code Workspace.

Creating a New Workspace in VS Code

Your Workspace is often the local copy of the team’s codebase that you can use to test and develop your code. In most cases, it’s created automatically when you open a VS folder. However, you might want to create multiple files to keep track of all the changes you make in different branches of the project. Here’s how to consolidate those files into a VS Code Workspace.

1. Select the folders you would like in your Workspace.
   
2. Add them to the Workspace by navigating to “File” then “Add Folder to Workspace.”
   
3. With your workplace set up, save the new forum by going to “File” then “Save Workspace As.”
   

Your new Workspace has now been created on VS Code, and the name will show up as (Name).code-Workspace.

Workspace Settings

These settings override default settings and can be used to customize your Workspace to your liking. They are stored in JSON files, and their location will be determined by how you open your folder.

Single-Folder Workspace Settings

If you open a folder as a Workspace, the settings will be found in .vscode/settings.json.

Multi-Root Workspace Settings

If the folder you open is a .code-workspace file, all Workspace settings will be added to the .code-workspace file.

You can still customize settings per root folder, but the settings will override those defined in the .code-workspace.

Workspace Launch Configurations and Tasks

Similar to how settings are configured for Workspace, tasks and launches can also be personalized to suit a Workspace. If you have a folder opened as a .code-workspace file or a Workspace, the locations of task and launch configurations are in the .vsh file or .workspace file. These configurations can also be adjusted from the folder.

Optimize a New VS Code Workspace

With built-in support for various programming languages, including TypeScript, Javascript, and Node JS, Workspace is an ideal tool for developers. These tips will make the platform more efficient and easier to navigate.

Terminals

You might be utilizing the default terminal provided by your operating system. With VS Code, the platform wanted to make it so that you don’t have to rely on the OS feature. VS Code comes with a built-in terminal that has all your requirements in one place. It’s a great way to keep track of your development projects and ensure that they are running smoothly. With the ability to rename or change the icon color, it’s also easier to differentiate between the various terminals for your project.

Wrap Tabs

This feature is handy for developers who are working on large projects where multiple components are being used. It can be hard to keep track of all the files when moving from one component to another. In VS Code, tabs appear in the browser, and you will have to scroll from one to the other when you want to view what’s inside them.

A more efficient method would be to wrap these tabs by clicking Cmd + and searching for “Wrap Tabs.” This feature will make it easier to see what is in different tabs.

Pin Tabs

As a developer, it’s advisable to keep your Workspace as organized as possible. You can do this by pining tabs you often use to the front of your screen. You can also customize the look and feel of these tabs by hitting the Cmd + or Ctrl + buttons and searching for “Pin Tab.”

User Interface

The interface of your terminal is set up so that it has various options, such as explorer, search, project manager, and output. It also has a footer-like section where you can easily find and modify multiple details. In VS Code, it is possible to drag and drop these tabs, rearranging them to your liking. You can place the more frequently used options closer to the top or customize them to make them easier to access. Personalizing the user interface makes your Workspace easier to navigate.

Language

When creating a new page in Visual Studio Code, the file is untitled, and you will have to fill in those details yourself. You would then have to move to the file’s name and enter the extension. The process can be tedious, especially when dealing with a large number of files.

You can optimize the process by allowing the IDE to look at the files. It will then use the previous naming system to assign names to new files that you create.

Preview

VS Code has some frustrating features. For example, if you open a file in preview and then open another one immediately after without making changes to the first one, the program will close the first file. If you would like to change this and keep both files open in preview, go to Settings and search for “Enable Preview.” Tick the checkbox to make the necessary changes.

New PC Set-Up

You may have customized and personalized your VS Code Workspace to your liking, only to get a new PC. While a new machine is great, having to reconfigure your Workspace can be annoying.

Setting Sync allows you to save all of your configurations in one place. When you get another device, it will automatically apply the settings of the old one to the new VS Code Workspace. This way, you don’t have to reconfigure Workspace on your new PC.

Open Replay

Getting started with debugging a web app in production can be challenging and time-consuming. With OpenReplay, you can monitor and replay everything that your users do, allowing you to see how the app behaves and detect any issues that may appear. OpenReplay is an excellent option as it is a free, open-source alternative to other debugging applications like LogRocket and FullStory. Using a debugging program saves you a lot of time when using Workspace.

GitHub

VS Code comes with a built-in GitHub integration. This allows you to push your files to GitHub quickly. Connecting to GitHub from VS Code means that you don’t have to spend time writing git commands. The VS Code integration makes maintaining your files simpler.

All Your Folders in One Location

Workspace makes it easy for your team to stay organized. Files and folders can be stored in a single location, allowing them to be opened and viewed at the click of a button. Workspace can also be optimized to improve efficiency and help keep track of ongoing projects. With this guide, you are now well equipped to create a Workspace on VS Code and customize it to suit your needs.

Have you set up a new Workspace on VS Code? Let us know how you created and optimized your Workspace in the comments below.