VS Code Interface ​

This section will guide you through the interface of Visual Studio Code

The top left is where all your files and folders are located. When you hover over any file, you will see 4 button on the top left. These are the functions of the buttons

• New file
• New directory
• Refresh files
• Collapase all open folders

You can open a file by clicking on them. You'll realise that when you open another file, another tab will be opened. These tabs are called editors, you can drag and drop the tabs to rearrange them.

The top right will be where you will be coding.

The bottom right is the terminal. We will be using this to run commands.

The really bottom left where it says Codespace is the Codespace control panel. You can use this to stop your codespace or rebuild it.

Now, let's move on to the activity bar.

Left side (Activity Bar) ​

The activity bar is where you can access all the features of VS Code. You can toggle the activity bar by clicking on the icons on the left side of the screen.

• File manager - This is where you can access all your files and folders
• Search - This is where you can search for files and folders
• Source Control - This is where you can commit and push your changes once you're ready
• Run and Debug - This is where you can run and debug your code, it is useful for frameworks like Flutter but we won't be using it for this workshop.
• Extensions - This is where you can install extensions to VS Code, we will be adding some later on in the workshop.

Congrats! You've successfully learnt about the interface of VS Code! Now, let's move on to the next section, where we will be setting up Nuxt.