Table of contents :
Visual Studio Code logo

7. VSCode, Workspaces.


Before explaining more about Workspaces or Projects in VSCode, it is important you have first set op a working environment for your files, as I describe in:
Writing Webpages / Setting up a Test Environment.

As a result you might have the following directories:
Directory tree of the test environment.
Directory tree of the test environment.
Directory tree of the test environment.
If your directories are slightly different it does not matter, as long as you adjust the directories in the examples that are mentioned in the rest of this chapter, accordingly.

7.1. VSCode, What is a VSCode Workspace?

From VSCode docs:

A Visual Studio Code "workspace" is the collection of one or more folders that are opened in a VS Code window (instance). In most cases, you will have a single folder opened as the workspace but, depending on your development workflow, you can include more than one folder, using an advanced configuration called Multi-root workspaces.
Chapter Workspace in VSCode docs

7.2. VSCode, Creating a new VSCode Workspace.

When you look at the directory screenshot above, you can see it has a course-files directory. We will create a workspace for that directory. We do that by opening a folder entry from the file menu.
So first we choose for Editor
First choose for Editor.
First choose for Editor.
First choose for Editor.
First (no workspaces present yet):
I assume you have no workspace created yet, you will see this:
Message: No Folder Opened.
Message: No Folder Opened.
Message: No Folder Opened.

In this case you click on the blue Open folder button.
After that you go to the root-directory of the test environment you have set up.
Go to the root directory of your test environment setup.
Go to the root directory of your test environment setup.
Go to the root directory of your test environment setup.

Make sure you select the course-material directory in the maps field and click on select map. You might get the next message:
Click on trust the author message.
Click on trust the author message.
Click on trust the author message.
After clicking on the Yes, I trust button, you get:
Workspace opens with the directory contents.
Workspace opens with the directory contents.
Workspace opens with the directory contents.
The workspace has opened with the directory contents of the course-material directory you just selected.

Second (in case you already had a directory open and thus a workspace):
If you already had 1 or more workspaces, your screen will look slightly different, maybe something like:
If you already had 1 or more workspaces.
If you already had 1 or more workspaces.
If you already had 1 or more workspaces.
Here the name SRC is the folder and workspace you are already working in.

7.3. VSCode, Saving / Opening a VSCode Workspace.

After creating a VSCode Workspace, you can save that as a special workspace-file with the menu action File - Save Workspace as...

Save workspaces.
Save workspaces.
Save workspaces.
If you want to change workspace, so re-open a workspace you worked in before, You use the menuaction File - Open Workspace from file...

Open workspace from File.
Open workspace from File.
Open workspace from File.
After the search screen opens, find the correct *.code-workspace file, and open it.








How to find a certain setting in Visual Studio Code?


You already saw there is a menu under "Commonly Used". Except from that, there is also a search bar near the top of the settings tab.
Visual Studio Code, searching for settings.
Visual Studio Code, searching for settings.
Visual Studio Code, searching for settings.

In this example I searched for theme, to show you what theme I use for Visual Studio Code.
While typing theme you will notice that as soon as you start typing, VSCode tries to complete the text and give you its results. So it might not be necessary to type the complete text you are looking for.
As you see I use the default light theme for VSCode.


Visual Studio Code, Wordwrap text.