The Workspace and the User Interface

The user interface and layout in Visual Studio Code maximize space for code editing. In addition, shortcuts are offered everywhere to access all the additional tools you need in a given context quickly. The user interface is divided into the following areas: the code editor, the status bar, the activity bar, and the panels area. This chapter explains how the user interface is composed and how you can get the most from it.

Tip: Most of the tools described in this chapter are accessed via buttons with icons only, no text. However, you can see the button names by hovering over the icons with the pointer.

The welcome page

At startup, Visual Studio Code displays the welcome page shown in Figure 41.

Figure 41: The welcome page

Under the Start group on the left side, the page provides shortcuts to common tasks such as opening files and folders, creating new files, and cloning Git repositories. The Recent group lists recently opened files, folders, and workspaces. The Walkthroughs group includes documents and guided tutorials provided by Microsoft. By default, the welcome page is shown every time VS Code starts, but you can disable this behavior by clearing the Show welcome page on startup checkbox at the bottom of the page.

The Command Palette

If you look at Figure 41, you can see a search bar at the top of VS Code. This is known as the Command Palette. It provides a visual discovery tool for files and commands, so when you click it, a pop-up will show a list of common shortcuts to features, and it also starts showing matching features and file names as you type.

The code editor

As a developer, you will spend most of your time in the code editor. In Chapter 1, you saw how to edit one file at a time, but you can also open up to three code files side by side. Figure 42 shows an example.

Figure 42: The code editor with three code files open

You can open files to the side in the following ways:

·     In the Explorer view, hold Alt and click a file name.

·     In the Explorer view, right-click a file name and then select Open to the Side.

·     Press Ctrl+\ to split the editor in two.

Notice that if you already have three files open and you want to open another file, the active editor will display the file. You can quickly switch between editors by pressing Ctrl+1, 2, and 3.

Resizing and reordering editors

It is possible to resize and reorder editors. You resize an editor by pointing at an editor’s border and clicking and dragging when the pointer appears as a double-ended arrow. Reordering editors is accomplished by clicking the editor’s header (where you see the file name) and moving it to a different position.

Zooming editors

You can zoom in and out of the active editor by pressing Ctrl + + and Ctrl + -, respectively. Alternatively, you can select the Zoom in and Zoom out commands located under the File > Appearance submenu. Note that this is an accessibility feature, so when you zoom in or out of the code editor, the view bar and side bar will zoom the same way.

The Status Bar

The Status Bar contains information about the current file or folder and allows you to perform some quick actions. Figure 43 shows an example of how the status bar appears.

Figure 43: The Status Bar

From left to right, you find the following:

·     In green, a shortcut to open a remote file or folder for remote development. This is not covered in this ebook, but you can read the documentation for more information.

·     Git version control information and options, such as the current branch and the Publish to GitHub button.

·     Errors and warnings. You already saw this in Chapter 1 about code issues and refactoring.

·     The cursor’s position expressed as a line and column.

·     Indentation information; in this case, Spaces: 4. You can click this to change the indentation size and to convert indentation between tabs and spaces.

·     The current file encoding.

·     The current line terminator.

·     The language of the open file.

·     A bell icon, which opens the notifications area.

The Status Bar is blue when you open a folder, violet if you open a single file, and orange when you debug code.

The Activity Bar

The Activity Bar is on the left side of the user interface by default and provides quick access to common tools and settings. Figure 44 shows it.

Figure 44: The Activity Bar

Out of the box, the Activity Bar contains shortcuts to the following (from top to bottom):

·     The Explorer view.

·     The Search tool.

·     The Source Control tool.

·     The Run and Debug tool.

·     The Extensions window.

·     The Accounts settings.

·     The Manage button to access global settings quickly.

In the next sections, you will get an overview of each tool, and in the next chapters you will learn more about the specific features they provide.

The Explorer view

You already met the Explorer view in Chapters 1 and 2. It provides a structured, organized view of the folder or files with which you are working. The Open Editors view contains a list of active editors, including open files that are not part of a project or folder and files that have been modified. The full list is shown in a view named after the folder or project. Figure 45 provides an enhanced example of the Explorer.

Figure 45: The Explorer view

The subview that shows a folder structure provides four buttons (from left to right): New File, New Folder, Refresh Explorer, and Collapse Folders in Explorer, each self-explanatory. The Open Editors view has only three buttons: New Untitled Text File, Save All, and Close All Editors. Right-clicking a folder or file name in Explorer provides a context menu that offers common commands, such as Open to the Side, which you saw at the beginning of this chapter. A very interesting command is Reveal in File Explorer (or Reveal to Finder on Mac and Open Containing Folder on Linux), which opens the folder containing the selected item. Notice that the Explorer icon in the view bar reports the number of modified files.

The Outline view

The Outline view shows a list of types and members defined in a code file that VS Code can analyze. In the lower half of Figure 45, you can see the Outline view listing members defined inside a JavaScript file. This is a hierarchical view, so it can display members grouped by their defining type.

The Timeline view

The Timeline view shows a historical list of changes made to a file. Unlike in earlier versions of Visual Studio Code, the Timeline is not limited to source control history. If a file is under Git source control, the Timeline displays commit history and related changes. In addition, VS Code can show local file history entries, even if the file is not tracked in a repository. Extensions can add more functionality to the Timeline view. Each entry allows you to inspect changes, compare revisions, and understand how a file evolved over time inside a file diff view (see Figure 46).

Figure 46: Comparing file history from the Timeline

Searching across files

The Search tool allows you to search for and replace text across files in the current folder or workspace. You can include special characters (such as * and ?) and use regular expressions. Figure 47 shows the Search tool in action, with advanced options expanded (files to include and files to exclude).

Figure 47: Searching across files

Search supports the following options:

·     Match case.

·     Match whole word.

·     Use regular expression.

·     Preserve case when replacing.

Search results are displayed in a hierarchical view that groups all files containing the specified search term, showing an excerpt of the matching lines. Occurrences are highlighted both in the results list and directly inside the code editor. You can replace text by typing the new content in the Replace box and then clicking Replace All or replacing matches individually. You can also open results in a dedicated Search Editor, which displays matches in a full editor tab. This is useful when reviewing or editing many results at once.

Tip: You can also search in the active editor by just selecting Edit > Find. In this case, an interactive pop-up appears at the top of VS Code and allows you to specify the content to search for. Similarly, you can replace text in the active editor by selecting Edit > Replace.

Other common shortcuts

The Activity Bar provides access to important tools, such as Git integration for version control, the integrated debugger, and the Extensions view. Because these tools are described in dedicated chapters later in this ebook, they are not covered in detail here. In addition to mouse navigation, almost every feature in Visual Studio Code is accessible via keyboard shortcuts. Learning common shortcuts significantly improves productivity, especially when navigating between files, views, and editors.

Activity Bar position

By default, the Activity Bar is displayed to the left of the development environment. However, you can move it to the top or bottom or even hide it. Right-click the Activity Bar, select Activity Bar Position, and then one of the options. Figure 48 shows the Activity Bar in the top position. Remember that the number of icons and buttons you see depends on which extensions are installed on your system.

Figure 48: The Activity Bar in the top position

Repeat the steps and select Default to restore the original position. You can also move the Activity Bar and nested views completely to the right side of the environment by right-clicking the Activity Bar and then selecting Move Primary Side Bar Right. Furthermore, VS Code supports a secondary side bar (accessible via Ctrl+Alt+B). This allows you to have the Explorer visible on the left while keeping another view, such as the Outline or a documentation panel, open on the right side of the editor. This can be achieved by following these steps:

1. In the Activity Bar, right-click the Explorer icon.
2. Select Move To > Secondary Side Bar.

You can also move it to a panel.

The Command Palette

The Command Palette is an important tool that allows you to execute special commands. Enable the Command Palette by selecting View > Command Palette, pressing F1, or pressing Ctrl+Shift+P. Figure 49 shows the Command Palette. Its list of commands varies depending on the extensions you have installed.

Figure 49: The Command Palette

The Command Palette provides keyboard access to virtually all Visual Studio Code functionality. This includes:

·     Executing editor and UI commands.

·     Installing and managing extensions.

·     Running Git and debugging commands.

·     Managing profiles and workspaces.

·     Executing language-specific actions.

·     Installing and managing packages.

·     Accessing commands contributed by extensions.

Commands are filtered dynamically as you type. VS Code uses fuzzy matching, so even partial keywords are enough to find a command quickly. Some commands are not available through menus and can only be accessed via the Command Palette. For this reason, becoming familiar with it early is essential for efficient use of the editor. Many of the commands related to extensions, debugging, Git integration, and .NET tooling will be discussed in later chapters.

Introducing panels

As a fully featured development environment, Visual Studio Code often needs to display information about ongoing tasks, such as messages from tools, debugging output, task execution results, and terminal sessions. VS Code displays this information in the Panels area. The most common panels are Problems, Output, Debug Console, and Terminal. In some workflows, you might also see panels contributed by extensions. In this section, you will learn about the Output and Terminal panels. The Debug Console is discussed in Chapter 7, Creating and Debugging Applications, while the refactoring preview functionality and Problems panel were introduced in Chapter 1 (see Figures 14 and 18, respectively). By default, the Panels area appears at the bottom of the workspace. However, it is highly flexible. You can:

·     Move it to the left or right side.

·     Toggle panel maximization.

·     Move specific views between the panel and the sidebar.

·     Open panels in a separate editor area.

You can change its position by right-clicking the panel name and selecting one of the options available under Panel Position: Top, Left, Right, or Bottom.

The Output panel

Visual Studio Code displays information and messages from internal and external tools inside the Output panel. Tools might include Git commands, compilers, runtime tools, extensions, and tasks. Figure 50 shows an example based on the output of the C# language service.

Figure 50: The Output panel

In most development scenarios, multiple tools might run in parallel and send their messages, so Visual Studio Code groups information by tool rather than displaying all messages together. For this purpose, you can use the filter dropdown (it is open in Figure 50) and select the tool from which you want to display information.

The Terminal panel

The Terminal panel is an integrated command-line environment. You can open a Terminal instance by selecting Terminal > New Terminal. Figure 51 shows an example where you can see a command that restores NuGet packages for a .NET project.

Figure 51: The Terminal panel

On Windows, the default shell is typically PowerShell. On macOS and Linux, it is usually the system’s default shell (such as bash or zsh). You can change the shell profile by clicking the dropdown arrow next to the plus (+) icon in the Terminal toolbar and selecting a different profile. Profiles can be customized and configured in Settings. You can open multiple terminal instances, organize them using tabs, split them side by side, and even move them into the editor area.

It is important to understand that Visual Studio Code itself often executes commands through terminal processes, such as when building or running projects. Depending on the configuration and toolchain, results may appear either in the Terminal panel or in the Output panel. Modern versions of VS Code include improved terminal rendering performance and better Unicode and glyph support, making the integrated terminal suitable even for advanced CLI workflows.

Tip: If you work with platforms that require command-line tools to scaffold projects or manage dependencies, the integrated Terminal is a convenient way to do this without leaving VS Code.

Accessibility and the Accessible View

Visual Studio Code includes advanced accessibility support designed to improve usability for screen-reader users and keyboard-only navigation. A key recent addition is the Accessible View, which allows certain transient UI elements to be opened in a dedicated, fully navigable editor-like window. Currently, the Accessible View supports the following UI elements:

·     Hover information: Info when hovering over types, variables, and members in the code editor, including tooltips for documentation and parameter hints.

·     Notifications: Messages that appear in the top-right corner of the interface.

·     Terminal output: Content from the integrated Terminal.

·     Output panel messages: Messages displayed in the Output panel, such as compiler or extension logs.

·     Chat responses: Content generated by the GitHub Copilot chat or other chat extensions (if installed).

Figure 52 shows an example based on the output of the dotnet command in the Terminal panel.

Figure 52: The Accessible View of the Terminal

The view appears as a larger pop-up at the top of the environment. Users can open these elements in the Accessible View by either using the Command Palette and selecting Open Accessible View or pressing the keyboard shortcut displayed in the tooltip when focusing on the element (for example, hovering over a notification or hover pop-up). Once opened in the Accessible View, all standard editor navigation and screen reader commands can be used, making previously transient information fully accessible.

Chapter summary

The user interface in Visual Studio Code is optimized to maximize the available space for editing. The workspace is divided into a few areas: the code editor, which is where you write code and where you can open up to three files concurrently; the status bar, which reports summary information about the file or folder; and the Activity bar, a container for important tools: Explorer, Search, Git, and Debug. Explorer provides an organized view of files and folders, while Search allows searching across files with advanced options. Git and Debug will be discussed in the next chapters. Visual Studio Code offers another important tool, the Command Palette, where you can browse the list of available commands, including those you execute against projects, folders, and files directly. VS Code also offers the Panels area, a convenient way to display information based on context.