In this tutorial you will learn how to use workspaces in VS Code to organize your ESP32 and ESP8266 projects. You will learn what a isWorkspace with a folder, AMulti-root workspace, the benefits of workspaces and how to use them.
To get familiar with VS Code with ESP32 and ESP8266, first follow the next tutorial:
- Getting started with VS Code and PlatformIO IDE for ESP32 and ESP8266
You can also use VS Code to program your boards with MicroPython firmware:
- MicroPython: Program ESP32/ESP8266 with VS Code and Pymakr
Table of contents
In this tutorial we cover the following topics:
- What is a workspace (VS Code)?
- Workspace with a folder
- Multi-root workspace
- Benefits of workspaces
- Add folder to workspace
- Save workspace
- workspace file
- Workspace Settings
- Workspace enabled/disabled extensions
- Upload a project to a multi-root workspace
- Open/close workspace
What is a workspace (VS Code)?
The workspace concept can be difficult to understand, especially when you start with VS Code. But you will see that it is an uncomplicated and useful concept to organize your projects. We will try to keep this concept as simple as possible and apply it to our ESP32 and ESP8266 projects. If you want to learn more, you can read theWorkspaces documentation.
AWorkplaceis simply a collection of one or more project folders opened in a VS Code window (File Explorer).
Single Folder Workspace
In most cases, you'll only work with one project folder at a time—in this scenario, the workspace is the single root folder of your project.
For example, create a new PlatformIO project or open a new project folder. In the example below, I created a new PlatformIO project namedESP32-Webserver. The workspace is the project folder itself.
Multi-root workspace
Depending on the project, however, it can make sense to include several project folders in the workspace. For example, imagine that your project needs two or three ESP32 or ESP8266 boards that communicate with each other. In this case, it can be useful to have all the boards' project folders in a single workspace – the so-calledMulti-root workspace.
For example, if you create another PlatformIO project, it will be added to the current workspace. In this case, the workspace name isUntitleduntil you save it and give it a name. In this case I created another project calledESP32 esp-now-Sender.
Benefits of workspaces
- [Multi-Root Workspace]It allows you to open/list all folders in that workspace in File Explorer without having to open a single folder at a time.
- A workspace is like a folder with additional functions. For example, a workspace may have configured settings that apply only to its folders (or to the folder itself, in the case of single-folder workspaces). Any other folder opened in VS Code outside of this workspace will not have the same settings.
- You can selectively enable or disable extensions for a specific workspace. This is useful when working alternately with core MicroPython or Arduino projects. This allows you to automatically enable the correct extensions for the project you are working on (PlatformIO for Arduino core projects, AndPyMakr for MicroPython projects).
Add folder to workspace
You can also add existing folders to the current workspace. you have to gofile>Add folder to workspace..and select the project folder you want to add.
At this point I have three projects in my untitled workspace.
Save workspace
You can save your workspace and give it a name. To save your workspace you need to gofile>Save workspace as...
The workspace is saved as a file with the.code workspaceRenewal. In my case I called my workspace fileESP-NOW-project.code-workspace.
Now it will appear in the Explorer tab with the new name.
workspace file
A workspace file has the.code workspaceextension, and it's simply a file containing a list of folders and files that should be listed in File Explorer. Projects saved in the same workspace are displayed simultaneously in the VS Code File Explorer tab.
In addition, the workspace file can also contain settings specific to the folders it contains, as we will see in the next section.
To see what a workspace file looks like, go tofile>open fileand select that.code workspaceFile you created when saving the workspace.
As you can see, it contains the paths of the contained project folders. At the moment it doesn't have any custom settings. In the next section, let's look at how to add custom settings to workspaces.
Workspace Settings
As already mentioned, a workspace is like a folder with additional functions. It can have configured settings that apply only to its folders (or to the folder itself in single-folder workspaces).
To set custom settings for your workspace, you can go tofile>Ideas>Ideas. Then select the Workspace tab (this way the defined setting applies only to the currently open workspace).
There are many settings that you can define for your workspace. We've only made a few changes for demonstration purposes. Under theCommonly usedWe set the settingsSave automaticallyToafter delayand the font size to 12.
We also changed the color theme - go toWorkbench>Look>Farbthema. We chose themLicht +Theme.
From now on, every time you open this workspace, you will see the light color theme.
Nonetheless, the default VS Code color theme remains Dark+. This means if you close the workspace or open another project, the default settings or the settings you defined for that particular workspace will be restored.
If you now open your workspace file, you will see that it contains the new settings.
Workspace enabled/disabled extensions
You can also enable or disable extensions for a specific workspace. For example, when you open a MicroPython project, you want the PyMakr extension to be enabled by default. However, you don't want to enable this extension when working on a project programmed with the Arduino core.
To show you how to do this, let's enable the PyMakr extension for this particular workspace (imagine it contains multiple Micropython project folders).
You need to go to the Extensions tab and search for a specific extension. In our case it is the PyMakr extension. Select this extension and then click under the Enable buttonActivate (workspace). You will need to restart VS Code for the changes to take effect.
From now on, this extension will be activated when you work on this workspace.
Upload a project to a multi-root workspace
This section applies to PlaformIO (Arduino core) projects.
When working with multi-root workspaces, you need to be able to choose which project you want to upload to your board. To do this, you need to click on the current project name as shown in the following image.
Then a drop-down menu will appear at the top of the window with all the project folders in the workspace. You need to select the project folder that you want to upload to your board.
Open/close workspace
To close the current workspace, you must gofile>Close workspace.
To open an existing workspace, go tofile>Open workspace...
Wrap up
Using VS Code is one of the best ways for advanced (or even basic) ESP32 and ESP8266 projects. You can use VS Code to program your boards with the Arduino core with the PaltformIO extension, or with MicroPython firmware with the PyMakr extension. Both extensions have already been covered in our blog (PlatformIO,PyMakr).
One of the biggest downsides to using VS Code is the learning curve. It can be difficult for beginners to understand how everything works. One of the topics that confuses our readers a lot is the concept ofWorkplace. The workspace is simply a folder or collection of folders that appear in the File Explorer tab. The workspace can be configured with specific settings that apply to its folders.
After following this tutorial, we hope you have a better understanding of what a workspace is and that you can use the workspace concept, mainly for projects that require multiple boards.
Let us know in the comments below if this is clear to you now.
Learn more about the ESP32/ESP8266 with our resources:
- Create ESP32/ESP8266 web server
- ESP32 projects
- ESP8266 Project
- MicroPython projects (ESP32 and ESP8266)
Thank you for reading.