The Welcome Page

At startup, Visual Studio Code shows the Welcome page, visible in Figure 2-1.

On the left side of the page, under the Start group, you will find shortcuts for creating and opening files and folders. Under the Recent group, you will find a list of recently opened files and folders that you will be able to click for fast opening. Under the Help group, there are useful links to cheat sheets, introductory videos, product documentation, and other learning resources about Visual Studio Code. On the right side, under the Customize group, you can find shortcuts to customize Visual Studio Code by installing extensions, changing keyboard shortcuts and color themes. Under the Learn group, you will find additional shortcuts to learning resources about commands and the user interface. Most of the features highlighted in the Welcome page will be discussed across this book. By default, the Welcome page is set to show up every time you launch Code. You can remove the flag from the Show welcome page on startup checkbox to change this behavior.

The Code Editor

The code editor is certainly the area where you spend most of your time in VS Code. The code editor becomes available when you create a new file or open existing files and folders. You can edit one file at a time as well as multiple files side-by-side concurrently. Figure 2-2 shows an example.

Notice that if you already have three files open and you want to open another file, the editor that is active will display that file. You can quickly switch between editors by pressing Ctrl + 1, 2, and 3. The code editor is the heart of Visual Studio Code and provides tons of powerful productivity features that will be deeply discussed in the next chapter. For now, it is enough to know how to open and arrange editor windows.

The Status Bar

The status bar contains information about the current file or folder and provides shortcuts for some quick actions. Figure 2-3 shows an example of how the status bar appears.

It is worth mentioning that the status bar color changes depending on the situation. For example, it is violet when you open a single file, blue when you open a folder, and orange when Visual Studio Code is in debugging mode.

The Activity Bar

The Activity bar is at the left side of the workspace and can be considered a collapsed container for the side bar. Figure 2-4 shows the Activity bar.

The Activity bar provides shortcuts for the Explorer, Search, Git, Debug, Extensions, and Settings tools, each described in the next section. When you click a shortcut, the side bar related to the selected tool becomes visible. You can click again the same shortcut to collapse again the side bar.

The Side Bar

The Side bar is one of the most important tools in Visual Studio Code, certainly the tool you will interact more with together with the code editor. It is made of five tools, each enabled by the corresponding icon, described in the next subsections.

The Explorer Bar

The Explorer bar is enabled by clicking the first icon from the top and provides a structured, organized view of the folder or files you are working with. The OPEN EDITORS subview contains the list of active files, including open files that are not part of a project or folder or files that have been modified. These are instead shown in a subview whose name is the folder or project name. Figure 2-5 provides an example of Explorer.

Note

You must hover over the folder name (APP1 in Figure 2-5) in order to get the four buttons visible.

The subview that shows a folder structure provides four buttons (from left to right): New File, New Folder, Refresh, and Collapse All, each self-explanatory. The OPEN EDITORS subview has instead three buttons (which you get when hovering over with the mouse): Toggle Vertical/Horizontal Editor Layout, Save All, and Close All Files. Right-clicking a folder or file name in Explorer provides a context menu that offers common commands (such as Open to Side you saw at the beginning of this chapter). A very interesting command is Reveal to Explorer (or Reveal to Finder on Mac and Open Containing Folder on Linux), which opens the containing folder for the selected item. Notice that the Explorer icon in the Activity bar also reports the number of modified files.

The Outline View

The bottom of the Explorer bar contains another group called OUTLINE . This group provides a hierarchical view of types and members defined within a code file or of tags within defined in a markup file. Figures 2-6 and 2-7 show the OUTLINE based on a TypeScript file and on a HTML file, respectively.

You can expand types and members to see what other objects they define, and you can click each item and get the cursor over the selected item definition in the source code. Also, you can type in the Filter text box to restrict the list of items based on a search criterion. It is worth mentioning that Visual Studio Code highlights with a different color (red in the case of the Visual Studio Light Theme) items that have potential problems and that are highlighted with squiggles in the code editor.

The Search Tool

The Search tool , enabled with the search icon, allows for searching and optionally replacing text across files. You can search for one or more words, including special characters (such as * and ?), and you can even search based on regular expressions. Figure 2-8 shows the Search tool in action, with advanced options expanded (files to include and files to exclude).

Search results are presented in a hierarchical view that groups all the files that contain the specified search key, showing an excerpt of the line of code that contains it. Occurrences are also highlighted in both the list of files and in the code editor. You can finally clean up search results by clicking the Clear Search Results button . If you instead wish to replace some text with a new text, you can do this by entering the new text into the Replace text box and then by clicking the Replace All button .

The Git Bar

The Side bar provides access to Git integration for version control. Git integration is a core topic and will be thoroughly discussed in Chapter 7, “Source Control with Git,” but a quick look is provided here for the sake of completeness about the Side bar.

The Git bar can be enabled by clicking the third button from the top (with a kind of fork icon) and provides access to all of the common source control operations, such as initializing a repository, committing code files, and synchronizing branches. The Git icon also shows the number of files that have been modified locally. Figure 2-9 shows an example.

The Git bar also provides a popup menu that you can see by clicking the … button at the top-right corner of the bar and that contains the list of supported Git commands in Visual Studio Code. As I said before, Git integration will be described later in the book.

The Debug Bar

Visual Studio Code is not a simple code editor, but it is also a fully featured development tool that ships with an integrated debugger for .NET Core and that can be extended with third-party debuggers for other platforms and languages. Chapter 9, "Running and Debugging Code," describes in more detail such an important part of Visual Studio Code, but for now you have to know that the debugging tools can be accessed by clicking the fourth icon from the top. This will open the Debug bar, shown in Figure 2-10.

In Chapter 9 you will see how powerful the debugging tools are in Visual Studio Code and how easy is installing additional debuggers .

The Extensions Bar

The Extensions bar can be enabled by clicking the fifth button from the top in the Activity bar and allows for searching and installing extensions for Visual Studio Code, which include additional languages, debuggers, code snippets, and much more. Extensibility will be discussed in Chapter 6, "Installing and Managing Extensions," but Figure 2-11 provides an example of how the Extensions bar appears.

Not only you can search online for extensions, but you can see the list of installed extensions as well as disabled and recommended extensions.

Navigating Between Files

Visual Studio Code provides two ways of navigating between files. The quickest way is pressing Alt+Left or Alt+Right to switch between active files.

If you instead press Ctrl+Tab, you will be able to browse the list of files that were opened since VS Code was launched, and you will be able to select one for editing, as shown in Figure 2-12.

The Command Palette

Together with the code editor and the activity and side bars, the Command Palette is another very important tool in Visual Studio Code, which allows for accessing Visual Studio Code built-in commands and also commands added by extensions via the keyboard. The Command Palette can be opened with View ➤ Command Palette or via the Ctrl+Shift+P keyboard shortcut (⌘+P on macOS), and Figure 2-13 shows how it looks like.

The Command Palette is not just about menu commands or to user interface instrumentation but also to other actions that are not accessible elsewhere. For instance, the Command Palette allows installing extensions as well as restoring NuGet packages over the current project or folder. You can simply move up and down to see the full list of available commands, and you can type in some characters to filter the list. You will notice how many of them map actions available within menus and that, for many of them, there is a keyboard shortcut available. Other commands, such as extension, debug, and Git commands, will be discussed in the next chapters, so it is important that you get started with the Command Palette at this point.

The Panels Area

Visual Studio Code will very often need to display information about source code but also information coming from the Git engine, external tools, or debuggers. To accomplish this in an organized way, the environment provides the so-called Panels area, which appears by default at the bottom of the user interface.

The Panels area is made of four built-in panels: Problems, Output, Debug Console, and Terminal, each discussed in this section. The Panels area is not visible by default, and it usually pops up when the information they represent becomes available (such as the debugger sending information about symbols in the source code). Additionally, by default it appears at the bottom of the VS Code’s user interface, but you can move it to the side of the workspace with a button called Move to Right that each panel provides, and then you can restore the original layout with another button called Move to Bottom . Let’s now discuss each panel in more detail.

The Problems Panel

With languages that have built-in enhanced editing support, such as TypeScript ( www.typescriptlang.org ), or for which an extension has been added to provide advanced editing features, such as C#, Visual Studio Code can detect code issues as you type. In the code editor, these are usually highlighted with red squiggles (for blocking errors) and in green (for warnings). The list of errors, warnings, and informational messages is also displayed in the Problems panel. This can be enabled by clicking the number of errors at the bottom-left corner of the status bar (see Figure 2-11).

The Problems panel makes it easy to distinguish between errors and warnings due to different icons (a white x over red background for errors and a black exclamation mark over yellow background for warnings). Figure 2-14 shows an example based on some C# code that contains an unused variable (warning) and a syntax error.

In case you have multiple files opened, the Problems panel will group problems by file name. Also, for each problem, you will be able to see the folder name and the position within the source code file. Just double-click a problem, and VS Code will move the cursor to the selected item in the code editor.

Note

The code editor also provides a way to quickly fix code issues while typing, but this is not related to the Problems panel and will instead be discussed in the next chapter.

The Output Panel

The Output panel is the place where Visual Studio Code displays messages from internal and external tools, such as runtime tools, Git commands, extensions, and tasks. Figure 2-15 shows an example based on the output of .NET’s NuGet package manager.

Because multiple tools might run concurrently during an operation against source code files (e.g., package restore and then compilation) or during the Visual Studio Code lifetime (such as extensions), you can use the dropdown box in the panel to change the view and see the output of each tool. This tool is particularly useful if the execution of external tools fails and you want to get more information about what happened.

The Debug Console Panel

As the name implies, the Debug Console panel is a specialized panel used by debuggers to display information about code execution. Figure 2-16 shows an example based on the execution of a simple C# application.

Not only the Debug Console shows information about code execution, debug symbols, and any other information a debugger needs to display, but it also acts as an interactive console where you can evaluate expressions. If you take a look at Figure 2-16, you can see how a mathematical expression has been manually evaluated using variables defined in the code. Debugging is a very important topic in Visual Studio Code and is thoroughly discussed in Chapter 9, "Running and Debugging Code," where you will find additional information about the Debug Console.

Working with the Terminal

Visual Studio Code allows executing commands against the operating system directly from within the development environment. In fact, you can select the Terminal ➤ New Terminal command to open a new terminal instance in a panel at the bottom of the work area. Figure 2-17 shows an example based on Windows.

On macOS and Linux, the terminal tool is based on the bash shell of each system. On Windows, the terminal is based on PowerShell by default. However, when you open a terminal instance, a popup message will tell you that you can select a different tool by clicking the Customize button on the popup itself. At this point you will be able to select, from the Command Palette, one among the Windows command prompt, PowerShell, and the Git bash command line tool. You can also open multiple terminal instances by clicking the New Terminal button (the icon with the + symbol). The Terminal panel is also used by Visual Studio Code to launch automatic scripts and commands against the operating system. For example, when you build a C# application, Visual Studio Code starts the .NET Core compiler whose output is displayed in the Terminal panel, as shown in Figure 2-18.

Summary

In this chapter, you got an overview of the workspace in Visual Studio Code and of the tools you will interact more with. You saw how to take advantage of quick shortcuts in the Welcome page and how you can arrange editor windows.

You saw how the status bar provides information about the active file and how the Activity bar is a collapsed container of shortcuts for the tools contained in the Side bar: the Explorer bar, the Search tool, the Git bar, the Debug bar, the Extensions bar, and the Settings button. You saw how to quickly navigate between files and how the Command Palette provides a way for accessing commands via the keyboard, both Visual Studio Code commands and extensions’ commands. You have also walked through another important area in the environment, the Panels area, where you can get information about code issues, messages from internal and external tools and debuggers, and where you can execute commands and scripts via the Terminal. Now that you have seen how the environment is organized, it is time to get fun walking through all the powerful productivity features in the code editor. This is the topic of the next chapter.