Visual Studio Code

2Exploring the User Interface

WHAT'S IN THIS CHAPTER?

• Exploring the different areas of the Visual Studio Code development environment
• Understanding the different windows that are available within Visual Studio Code

The key to being exceptionally productive in any development tool is being intimately familiar with the user interface, for the simple reason that the basic user interface will be the environment in which you spend the vast majority of your editing time. Yes, the quick key bindings are useful to know, as are the customizations and extensions that are available. But to be truly efficient in Visual Studio Code, you need to know the basic elements of the user interface and how they work together.

Figure 2-1 shows Visual Studio Code with a simple React app open.

FIGURE 2-1

NOTE  The React App was creating using the aspnetcore command and the react‐redux template, which is why you see the Controllers folder and the C# code.

The basic user interface consists of four main areas, each marked in Figure 2-1 with a different letter:

• Activity Bar (labeled “A”)—Located on the left side of the screen, the Activity Bar provides a mechanism to switch between different views.
• Editors (labeled “B”)—This area contains the different editors that are open with Visual Studio Code. Each tab represents a different file, but it is possible to work on multiple files simultaneously, ...