Installing Visual Studio Code on Windows

Visual Studio Code can be installed on Windows 7, 8, and 10. For this operating system, Visual Studio Code is available with two installers: a global installer and a user-level installer. The first installer requires administrative privileges for installation and makes Code available to all users. The second installer makes Code available only to the currently logged user, but it does not require administrative privileges.

The latter is the choice I recommend, especially if you work within a corporate environment and you do not have administrative privileges to install software on your PC. The Download for Windows button that you can see in Figure 1-1 will automatically download the global installer. If you instead wish to download the user-level installer, click the arrow at the right of the button and then click the User Installer hyperlink. It is worth mentioning that Visual Studio Code is available in two versions, 32 bit and 64 bit. The download page will automatically suggest the version that matches your operating system architecture, but if you wish to download a different installer, you can click the arrow and then click Other downloads.

A specific dialog will inform you once the installation process has completed. The installation folder for the user-level installer is C:\Users\proga\AppData\Local\Programs\Microsoft VS Code, while the installation folder for the global installer is C:\Program Files\Microsoft VS Code on 64-bit systems and C:\Program Files(x86)\Microsoft VS Code on 32-bit systems. You will find a shortcut to Visual Studio Code in the Start menu and on the Desktop, if you selected the option to create a shortcut during the installation. When started, Visual Studio Code appears like in Figure 1-2.

Installing Visual Studio Code on macOS

Installing VS Code on macOS is extremely simple. From the download page, simply click the Download for macOS button and wait for the download to complete. On macOS, Visual Studio Code works as an individual program, and therefore you simply need to double-click the downloaded file to start the application. Figure 1-3 shows Visual Studio Code running on macOS.

Installing Visual Studio Code on Linux

Linux is a very popular operating system and many derived distributions exist, so there are different installers available depending on the distribution you are using. For the Ubuntu and Debian distributions, you will need the .deb installer. For the Red Hat Linux, Fedora, and SUSE distributions, you will need the .rpm installer. This clarification is important because, differently from Windows and macOS, the browser might not be able to automatically detect the Linux distribution you are using, and therefore it will offer both options.

Once installed, you will simply need to click the Show Applications button on the desktop and then the Visual Studio Code shortcut. Figure 1-4 shows Visual Studio Code running on Ubuntu.

Localization Support

Visual Studio Code ships in English, but it can be localized in many other supported languages and cultures. When started, VS Code checks for the operating system language and, if different from English, it shows a popup suggesting to install a language pack for the culture of your operating system. The localization support can be also enabled manually.

This will open a file called locale.json, which is the place where Visual Studio Code stores the localization information. Figure 1-5 shows how this file appears in the editor. As you can see in the comments, there is a link to the documentation that contains the full list of supported cultures.

For instance, if you wanted to change the localization from English to Italian, you would replace en with it, saving your changes. At restart, Visual Studio Code will apply the new localization downloading the language pack it needs.

Updating Visual Studio Code

Visual Studio Code is configured to receive automatic updates in the background and, usually, Microsoft releases updates monthly.

Additionally, you can manually check for updates with Help ➤ Check for Updates on Windows and Linux and with Code ➤ Check for Updates on macOS. If you do not want to receive automatic updates and prefer manual updates, you can disable automatic updates by selecting File ➤ Preferences ➤ Settings and then, in the Update section, disable the background updates option. Figure 1-6 shows an example.

You will follow the same steps to re-enable updates in the background. Whenever Visual Studio Code receives an update, you will receive a notification that suggests you to restart Code in order to apply changes. The first time you restart Visual Studio Code after an update, you will see the release note for the version that was installed, as demonstrated in Figure 1-7.

Release notes contain the list of new and updated features, as well as hyperlinks that will open the proper feature page in the documentation.

Previewing Features with Insiders Builds

By default, the download page of the Visual Studio Code’s web site allows you to download the latest stable build. However, Microsoft periodically also releases preview builds of Visual Studio Code called Insiders builds that you can download to have a look at new and updated upcoming features before they are released to the general public.

Insiders builds can be downloaded from https://code.visualstudio.com/insiders , and follow the same installation rules described previously for each operating system. They have a different icon color, typically a green icon instead of a blue icon, and the name you see in the application bar is Visual Studio Code - Insiders instead of Visual Studio Code (see Figure 1-8).

Insiders builds and stable builds can work side by side without any issues. Because each lives in its own environment, your setting customizations and extensions you installed on the stable build will not be automatically available to the Insiders build and vice versa, so you will need to provide them again.

Insiders builds are a very good option to have a look at what is coming with Visual Studio Code, but because they are not stable, final builds, it is not recommended you use them in production or with code you will release to production.

Reordering, Resizing, and Zooming Editor Windows

Editor windows can be reordered and resized based on your preferences. Reordering editors can be done by clicking the editor’s header (which is where you see the file name) and moving it to a different position. Resizing an editor can instead be accomplished by clicking the mouse left button over the editor’s border, when the pointer appears as a left/right arrow pair.

You can also zoom in and out the active editor by clicking Ctrl++ and Ctrl+-, respectively. As an alternative, you can select View ➤ Zoom in and View ➤ Zoom out.

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.

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.

The Settings Button

The Settings button is represented with the gear icon, at the bottom of the Activity bar. If you click it, you will see a popup menu with a list of commands that represent shortcuts for customizing Visual Studio Code and that will be discussed more thoroughly in Chapter 5, "Customizing Visual Studio Code." Among the others, a command in the menu allows for manually searching for product updates.

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.

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.

Working with C# and C++

The C# programming language deserves a more detailed version, because of its popularity and because it is now a cross-platform language that you can use not only on Windows but also on macOS and Linux. As you can see from Table 3-1, the editing experience that Visual Studio Code offers out of the box for C# is limited to common features.

However, full and rich support for the coding experience with C# is offered via the Microsoft C# free extension ( https://marketplace.visualstudio.com/items?itemName=ms-vscode.csharp ). This provides an optimized experience for .NET Core development and includes all the support and tools you need to build apps with C#, including the necessary support for the .NET Core debugger. With this extension, you will basically get the same experience available to TypeScript, including advanced editing capabilities based on the .NET Compiler Platform (also known as Roslyn) that makes it easier to fix code issues as you type. If you plan to work with C#, I definitely recommend you to install this extension, especially because this chapter discusses some editing features that are available only through the extension. Extensibility is explained in more detail in Chapter 6, "Installing and Managing Extensions," so the easiest way to get the extension installed without further information is opening any C# code file (.cs) and following the instructions shown by Visual Studio Code when it detects that a proper extension is available for that file type.

Similarly, you might want to install the Microsoft C/C++ extension that adds enhanced editing features to the C and C++ languages, plus debugging support for Windows (PDB, MinGW, Cygwin), macOS, and Linux. The extension is available at https://marketplace.visualstudio.com/items?itemName=ms-vscode.cpptools , and you can follow the same steps described before about the C# extension for easy installation, of course opening a .c, .h, or .cpp file.

Working with Text

As you would expect, the code editor in VS Code offers commands for text manipulation and text selection. The Edit menu provides the Undo, Redo, Copy, Cut, Paste, Find, Replace, Find in Files, and Replace in Files commands. These commands are available in every text editor and do not require any further explanation, except for the find and replace tools that were described in the previous chapter.

The Edit menu also provides two commands to work with code snippets, Emmet: Expand Abbreviation and Emmet…. The first command is the menu representation of keyboard shortcuts offered by code editor to add a code snippet, whereas the second command opens the Command Palette and shows the list of code snippets that you can add. Code snippets are discussed in more detail in the “Reusable Code Snippets” section in this chapter.

The Selection menu not only provides commands for text selection but also commands that make it easier to move or duplicate lines of code above and below the current line. The Add Cursor Above, Add Cursor Below, and Add Cursors To Line Ends commands allow working with multicursors, described in the “Multicursors” section in this chapter.

If you click an identifier, reserved word, or type name in the editor, you can use the Add Next Occurrence, Add Previous Occurrence, and Select All Occurrences commands that allow to quickly select occurrences of the selected word, and occurrences will be highlighted in a different color, which differs depending on the current theme.

Syntax Colorization

For all the languages summarized in Table 3-1, the code editor in Visual Studio Code provides the proper syntax colorization. Figure 3-1 shows an example based on a TypeScript code file.

Syntax colorization is available for other languages via extensibility. If you need to work with a language that is not included out of the box, you can check the Visual Studio Marketplace and see if an extension is available to support such a language. See Chapter 6, "Installing and Managing Extensions," for information about extensibility. As a side note, syntax colorization is the minimum that an extension must provide to add support for a new language.

Delimiter Matching and Text Selection

The code editor can highlight matching delimiters such as brackets and parentheses (both square and round). This feature is extremely useful to delimit code blocks and is triggered once the cursor gets near one of the delimiters. Figure 3-2 shows an example based on bracket matching in a constructor definition.

This feature is also very useful when you need to visually delimit nested blocks and with complex and long expressions. It is worth mentioning that you can press Ctrl+D to fast select a word or identifier at the right of the cursor and that you can also easily expand (Shift+Alt+Right) and shrink (Shift+Alt+Left) text selection within enclosing delimiters of a code block.

Code Block Folding

The code editor allows folding delimited code blocks. Just hover line numbers and the - symbol will appear near the start of a code block. Simply click to fold, and you will see the + symbol at this point, which you click to unfold the code block. Figure 3-3 provides an example.

Multicursors

The code editor supports multicursors . Each cursor operates independently, and you can add secondary cursors by pressing Alt-Click at the desired position. You will see that secondary cursors will be rendered thinner. The most typical situation in which you want to use multicursors is when you want to add (or replace) the same text in different positions of a code file.

Reusable Code Snippets

Visual Studio Code ships with a number of built-in code snippets that you can easily add by using the Emmet abbreviation syntax and pressing Tab. See the “Language Support” section to discover what languages support code snippets natively. For instance, in a Swift file, you can easily add a do..catch block definition by using the do code snippet, as shown in Figure 3-4.

Code snippets are available as you type within the code editor, and you can recognize them by the icon representing a small, white sheet. Notice how a tooltip shows a preview of the code snippet. Pressing Tab over the previous snippet produces the result shown in Figure 3-5.

Notice that if the code snippet contains variable names or identifiers, these might be highlighted suggesting that you should give them a different name (like for the error identifier in Figure 3-5). When you rename a highlighted identifier, all occurrences will be also renamed.

Visual Studio Code is not limited to built-in code snippets. You can download code snippets produced by other developers for many languages from the Visual Studio Marketplace. Actually, most of the extensions that introduce or extend support for programming languages also include a number of code snippets .

Word Completion

Out of the box, the code editor in Visual Studio Code implements basic word completion for all the supported languages. This feature helps you complete words and statements as you type. For example, if you look at Figure 3-6, you can see how the code editor suggests terminating a statement with the Class keyword in a Visual Basic file, based on what the developer is typing.

Simply press Enter or Tab to insert the suggested word. The word completion engine learns as you code and can provide suggestions based on variables and member names you declare. For example, Figure 3-7 demonstrates how the editor suggests adding the name of a variable called Test, declared previously in the code.

Minimap Mode

Sometimes it is difficult to have an idea of the position of the cursor inside a source code file, especially with very long files. Visual Studio Code provides the Minimap , a small preview of the source code file on the code editor’s scrollbar. Figure 3-8 provides an example.

If you click the Minimap, the portion of source code that is visible in the code editor is highlighted in the scrollbar, so that you can have a better perception of the current position of the cursors. The Minimap can be disabled and enabled using the View ➤ Toggle Minimap command.

Whitespace Rendering and Breadcrumbs

A very common feature with text editors is the possibility of showing light dots instead of white spaces. In Visual Studio Code, this is possible for white spaces within indentations. To accomplish this, you select View ➤ Toggle Render Whitespace . Figure 3-9 shows an example of how white spaces for indentations are replaced with dots.

Simply use again the same command to return to white spaces. Another very useful command is Toggle Breadcrumbs , available in the View menu. With supported languages, such as JavaScript, TypeScript, and C# with the extension installed, it shows an icon at the upper left corner of the code editor, which you can expand to see the definition of types and members, as shown in Figure 3-10.

By clicking a type or member name, the cursor will be moved to its definition, making code navigation much easier.

Markdown Preview

Visual Studio Code supports the Markdown syntax for producing documents in the very popular .md file format. Other than syntax colorization, for this particular language Visual Studio Code also provides a preview of how the document will look like. Simply press Ctrl+Shift+V (Cmd+Shift+V on macOS) in the code editor, and the preview will appear in a separate window, as demonstrated in Figure 3-11.

This feature is very useful because it allows to preview your documents without the need of an external program such as a web browser.

Working with IntelliSense

IntelliSense provides rich, advanced word completion via a convenient popup that appears as you type. In the developer tools from Microsoft, such as Visual Studio, IntelliSense has always been one of the most popular features, and the reason is that it is not simply word completion. In fact, IntelliSense provides suggestions as you type, showing the documentation about a member (if available) and displaying an icon near each suggestion that describes what kind of syntax element a word represents. Figure 3-12 shows IntelliSense in action with a C# code file.

As you can see in Figure 3-12, IntelliSense shows the list of available members as you write, for the given type (in this case Console). When you select a word from the completion list, Visual Studio Code shows the member documentation.

Press either Tab or Enter to complete the word insertion. Not limited to this, IntelliSense in Visual Studio code supports suggestion filtering: based on the CamelCase convention, you can type the uppercase letters of a member name to filter the suggestion list. For instance, if you are working against the System.Console type and you write cv, the suggestion list will show the CursorVisible property, as demonstrated in Figure 3-13.

IntelliSense also provides the foundation for other advanced features in the code editor that depend on it, described in the next subsections.

Parameter Hints

When you write a function invocation, IntelliSense also shows a tooltip that describes each parameter. This feature is called parameter hints and is available only if the documentation for function parameters has been implemented. An example is visible in Figure 3-14.

For languages such as C# and TypeScript or, more generally, with languages that allow for function overloads, parameter hints show the description for the parameters of each overload. You can also scroll the list of overloads with the up and down arrow keys to select a different overload .

Inline Documentation with Tooltips

If you hover types, variables, and type members, Visual Studio Code will show a tooltip that contains the documentation for the selected object. Figure 3-15 provides an example.

Like parameter hints, this feature is available only if the documentation has been implemented. If you instead hover a variable name, the tooltip will only show the type for the variable.

Go To Definition

Visual Studio Code provides another interesting feature called Go To Definition . You can hover over a symbol with the mouse and, if you press Ctrl (or ⌘ on macOS), the symbol will appear as a hyperlink; also, a tooltip will show the code that declares that symbol. You click the type name while pressing Ctrl, and you will be redirected to the code that defines that type. Figure 3-16 shows how the code editor appears when you press Ctrl and hover over a type name.

The same tool is available if you select a type name and press F12 or if you right-click a type name and then select Go To Definition from the context menu. This is an extremely useful feature that lets you quickly browse between type definitions that are in different code files.

Find All References

Find All References is a very useful feature that makes it easy to see how many times and where a type or member has been used across the code. For each type or member, the code editor shows how many times a member has been referenced and in which files. Figure 3-17 shows an example based on finding all references of a type called Startup.

If you click an occurrence in the list on the right, the code editor brings up a popup containing the code where that occurrence has been found. It is very important noting that this popup is interactive, which means that you can edit the code directly, without the need of opening the containing code file separately. This allows keeping your focus on the code, saving time. Also, notice that the interactive popup shows, at the top, the file name that contains the selected reference .

Peek Definition

Suppose you have dozens of code files and that you want to see or edit the definition of a type you are currently using. With other editors, you should search among the code files, which not only can be annoying but that would also move your focus away from the original code. Visual Studio Code brilliantly solves this problem with a feature called Peek Definition .

You can simply right-click a type name and then select Peek Definition (the keyboard shortcut is Alt+F12); an interactive popup window appears, showing the code that defines the type, giving you not only an option to look at the code but also of direct editing. Figure 3-18 shows the peek window in action.

As you can see, the peek window is very similar to the Find All References feature, and it still shows the file name that defines the type at its top. Simply click the file name to open the code file in a separate editor.

Renaming Symbols and Identifiers

It is very frequent to rename a symbol, so Visual Studio Code offers a convenient way to accomplish this. If you press F2 over the symbol you wish to rename or right-click and then select the Rename Symbol command, a small interactive popup appears. Figure 3-19 shows an example based on a symbol called app. There you can write the new name without any dialogs, keeping your focus on the code.

All references of that symbol will be renamed accordingly. Additionally, you can rename all the occurrences of an identifier. You simply right-click the identifier, then select Change All Occurrences (or press Ctrl+F2 on Windows/Linux and ⌘+F2 on macOS); all the occurrences will be highlighted and updated with the new name as you type.

Live Code Analysis

With C#, TypeScript, and with languages whose support can be enhanced via extensions like Python, Visual Studio Code can detect code issues as you type, suggesting fixes and offering code refactorings. This is one of the most powerful features in this tool, which is something that you will not find in most other code editors. The next examples are based on the C# programming language, since (together with TypeScript) this supports the richest experience possible in Visual Studio Code, and therefore it is a good choice to discuss the powerful coding features available. Of course, everything discussed here applies to all other languages that support the same enhanced features.

According to the severity level of a code issue, Visual Studio Code underlines with squiggles the pieces of code that need your attention. Green squiggles mean a warning; red squiggles mean an error that must be fixed. If you hover over the line or symbol with squiggles, you will get a tooltip that describes the issue. Figure 3-20 shows two code issues, one with green squiggles (an unused local variable) and one with red squiggles (a symbol that does not exist), plus the tooltip for the code issue with the higher severity level.

Code issues are detected as you type and they are also listed in the Problems panel. If you look at Figure 3-20, you can also see an icon with the shape of a light bulb. This icon is a shortcut for a tool called Light Bulb. When you click the Light Bulb, Visual Studio Code shows possible code fixes for the current context. For example, if you look at Figure 3-21, you can see the suggestions that the Light Bulb provides to fix the missing symbol underlined with red squiggles.

Probably bool is not the type you would expect here, but Visual Studio Code has not enough information to infer a different type. However, when the code contains some information that Visual Studio Code could use to understand the proper type, properties, fields, and local variables would be generated of the expected type. With the Light Bulb, it is also easier to generate types on the fly. Figure 3-22 shows an example based on an object called person, for which a type has not been defined yet. As you can see, for this context the code editor shows a larger list of possible fixes, including generating a new class, either in the current file or in a separate file.

Not limited to this, the Light Bulb can help you refactor your code and keep it cleaner. For example, you can click any of the using directives (or equivalent in other languages) and, when the Light Bulb appears, you can see how it offers to remove unused code, as shown in Figure 3-23.

Actually, there is even more power. Suppose you want to create a class that implements the IDisposable interface . As you can see in Figure 3-24, the code editor cannot find the definition of such interface and shows a red squiggle, but the Light Bulb provides shortcuts for quickly fixing this issue. For example, it suggests adding a using System; directive, which is what the code needs.

At this point, IDisposable will be still underlined with a red squiggle because the code is not implementing the interface yet. If you still enable the Light Bulb, you will see how the code editor suggests potential fixes based on the current context, such as implementing the interface in different ways (see Figure 3-25).

You would get a similar result, but with different implementation, if the choice was one of the other possible code fixes. Though it is not possible to show examples for all the code fixes that Code can apply, what you have to keep in mind is that suggestions and code fixes are based on the context for the code issue, which is a very powerful feature that makes Visual Studio Code a unique editor.

Creating Files

By default, new files are treated as plain text files. In order to change the language for a new file, click the Select Language Mode item in the right corner of the status bar, near the smile icon. In this case, you will see Plain Text as the current mode, so click it. As you can see in Figure 4-2, you will be presented with a list of supported languages where you can select the new language for the current file. You can also start typing a language name to filter the list.

When you select a new language, the Select Language Mode item is updated with the current language, and the editor enables the supported features for the selected language, such as syntax colorization, word completion, and code snippets.

Obviously, you can change the language of any open code file, not just new files.

File Encoding, Line Terminators, and Line Browsing

Visual Studio Code allows you to specify an encoding for new and existing files. Default encoding for new files is UTF-8. You can change the current encoding by clicking the Select Encoding item in the status bar (in the previous figures, it is represented with UTF-8, the current encoding). You will be presented with a long list of supported encodings and a search box where you can filter the list as you type (see Figure 4-3).

Similarly, you can change the line terminator by clicking the Select End of Line Sequence item (in previous figures it’s represented by CRLF). Visual Studio Code supports CRLF (Carriage Return and Line Feed) and LF (Line Feed), and the default selection is CRLF. You can also move fast to a line of code by clicking the Go to Line item, represented by the line number/column group in the status bar. This will open up a search box where you can write the line number you want to go to, and the line of code will be immediately highlighted as you type (see Figure 4-4).

Opening a Folder

You open a folder via File ➤ Open Folder or via the Open Folder shortcut in the Welcome page. You can also drag and drop a folder name from Windows’ Explorer or macOS’ Finder onto Visual Studio Code.

Whatever folder you open, VS Code organizes files and subfolders into a structured view represented in the Explorer side bar. Figure 4-5 shows an example based on a C# project.

The root container is the folder name. Nested you see files and subfolders, and you can expand each subfolder to browse every file it contains. Simply click a file to open an editor window on it.

Opening .NET Core Solutions

When you open a folder that contains a .NET Core solution based on the MSBuild project system (.sln file), Visual Studio Code organizes all the code files into the Explorer bar and enables all the available editing features for C#. Figure 4-6 shows an example.

Notice how the root level in Explorer is the project name. You can browse folders, code files, and edit anything that Visual Studio Code can properly recognize. It is worth mentioning that Visual Studio Code can certainly open any MSBuild solution, not only .NET Core solutions, but it will only be able to run and debug .NET Core applications. For instance, if you open a Windows Presentation Foundation (WPF) solution in VS Code, you will still benefit the structured folder view in the Explorer bar and then full C# language support, but you will not be able to build, run, and debug the code. Instead, with .NET Core you also have integrated debugging support which allows running, debugging, and testing code directly within VS Code. This will be discussed in Chapter 9, "Running and Debugging Code."

Opening JavaScript and TypeScript Projects

Similarly to .NET Core solutions, Visual Studio Code can manage JavaScript folders by searching for jsconfig.json or package.json files. If found, Code organizes the list of folders and files the proper way and enables all the available editing features for all the files it supports, as shown in Figure 4-7.

TypeScript projects’ behavior is the same as for JavaScript, except that Visual Studio Code will search for a file called tsconfig.json as the root.

Opening Loose Folders

Visual Studio Code allows opening folders that contain unrelated, loose assortments of files. Visual Studio Code creates a logical root based on the folder name, showing files and subfolders. Figure 4-8 shows an example based on a sample folder called MyFiles that contains files in different languages.

With this option, you can basically open any folder in VS Code and edit all supported files taking advantage of the code editing features for each file individually.

Creating Workspaces

Creating a workspace can be done whether you already have any folders opened or not. If you already have any folders opened, you can select File ➤ Save Workspace As. VS Code will ask you to specify the location and file name for the new workspace. A workspace is represented by a JSON file with .code-workspace extension, whose structure will be explained shortly.

The workspace name is simply the file name without the .code-workspace extension and will be shown in the Explorer bar (see Figure 4-9). Then you can add other folders to the workspace by selecting File ➤ Add Folder to Workspace or via the Add workspace folder shortcut in the Welcome page. Added folders will be displayed in the Explorer bar under the workspace root. If you do not have any folders already opened, you can either start with File ➤ Save Workspace As or with File ➤ Add Folder to Workspace. With the first option, you will basically create an empty workspace with a name, and then you will add folders as described in the preceding text. With the second option, you will instead create an empty, untitled workspace starting from an existing folder. In this case, in fact, the Explorer bar will show UNTITLED (WORKSPACE) as the new workspace name. When you save the workspace like described in the preceding text, the Explorer bar will show the new name based on the workspace file name. Remember that workspaces are only logical containers and do not affect the structure or behavior of your projects and folders in any manner.

Opening Existing Workspaces

You can open an existing workspace via File ➤ Open Workspace. You can also drag and drop a workspace file name from your operating system’s file browsing program onto the Visual Studio Code surface. Opening a .code-workspace file directly will simply result in viewing the file content, not opening the workspace. Similarly, opening a folder that contains a .code-workspace file will only result in opening the folder, not the workspace. You can only use the specific commands described at the beginning of this paragraph.

Workspace Structure

Notice that the full pathname of a folder is only provided if such a folder is not in the same location of the workspace file. In this case, the .code-workspace file, the MyFiles folder, and the ExpenseReport folders are all in the same location; instead, the multeor-master folder is located under a different folder, C:\Users\adelsole\Downloads. If you want to see yourself the structure of a workspace file, you can open it within Visual Studio Code via File ➤ Open File.

Theme Selection

You can select among several themes to give Visual Studio Code a different look and feel. You select a color theme with File ➤ Preferences ➤ Color Theme or by clicking the Settings button and then Color Theme . The list of available color themes will be shown in the Command Palette, as you can see in Figure 5-1.

Once you select a different color theme, this will be applied immediately. Also, you can get a preview of the theme as you scroll the list with the keyboard. Figure 5-2 shows the Dark (Visual Studio) theme applied to VS Code, which is a very popular choice, while you can try yourself the other themes.

As you might expect, applying a theme also affects colors used in the code editor so that there is an appropriate brightness and contrast balance. In the next chapter, you will see how to install additional themes as extensions.

Customizing the Environment

In most applications, including other IDEs, you set environment settings and preferences via a convenient user interface, and VS Code is no less. There are two different types of settings: user settings and workspace settings. User settings apply globally to the development environment, while workspace settings only apply to the current project or folder. I will now cover both user and workspace settings.

Understanding User Settings

User settings globally apply to the VS Code’s development environment. Customizing user settings is accomplished by selecting File ➤ Preferences ➤ Settings. When you do this, the settings editor appears, as represented in Figure 5-3.

On the left side of the editor, settings are grouped by category. In the Search settings bar, you can quickly search settings based on what you type, and you can also see the number of total settings found, which varies depending on the version of VS Code and on the number of extensions you have installed. You can manually expand setting categories manually, or you can just scroll the list of settings, and the related category is automatically expanded as you scroll. For instance, you could control the behavior of the Explorer bar by locating and selecting Explorer under the Features category, and here you could change the current settings, as shown in Figure 5-4.

Similarly, you could change settings and preferences for the text editor, the whole application, and extension settings. In fact, extensions that allow for customizing preferences store their settings in the same place as VS Code does, so that you have a unique settings editor. There are hundreds of settings and the number varies depending on your configuration and installed extensions, so it’s not possible to list all settings here. For more details about available settings, visit the official documentation ( https://code.visualstudio.com/docs/getstarted/settings ).

Note

Remember that changes will be applied only after you save your edits with File ➤ Save.

Behind the Scenes: The settings.json File

Behind the scenes, VS Code (and extensions) stores settings inside a file called settings.json . In this file, each key/value pair represents a specific setting and its value. Before Visual Studio Code 1.27.1, settings could only be edited manually by modifying the settings.json file, and only in version 1.27.1, the editor discussed in the previous section was introduced.

It is important to understand how this file works, so click the … button below the number of settings displayed in the search bar, and then click Open settings.json. Figure 5-5 shows how the editor appears at this point.

As you can see, the editor view is split in two areas: the DEFAULT USER SETTINGS on the left and the USER SETTINGS on the right.

Default user settings relate to Visual Studio Code’s environment and tools but also to supported languages and to installed extensions’ behavior (if any). The default settings view provides detailed comment for each available setting expressed with JSON format so that you can easily understand what setting a particular line applies to. You can easily provide custom settings by overriding one or more default settings, writing inside settings.json. Figure 5-5 shows an example where you can see how to change the theme, how to control white characters, how to control characters and breadcrumbs in the code editor, and how to enable the Minimap mode. Also, you will see how IntelliSense helps you choose among available settings as you type. It is worth mentioning that you can search for settings by typing a search key in the Search Settings box. The settings editor will highlight occurrences of the search key as you type .

IntelliSense also allows you to get more information about a given settings by clicking the information icon, which shows hints about the setting with a convenient tooltip exactly as you would expect after learning about IntelliSense’s features in Chapter 3, “Language Support and Code Editing Features.” When done, do not forget to save settings.json otherwise your changes will be lost.

A Real-World Example: Working with Proxies

If you work for an enterprise, the network might probably be behind a proxy server. In this case, you or the system administrator might need to configure Visual Studio Code to work with the proxy. If you do not, you will not be able to download packages, extensions, and product updates. Visual Studio Code should automatically detect proxies and ask for your credentials, but this does not always happen, so you might need some manual steps.

The first thing to do is making sure that the following sites are in the allowed applications list of the firewall:

• vscode-update.azurewebsites.net

• vscode.blob.core.windows.net

• marketplace.visualstudio.com

• *.gallerycdn.vsassets.io

• rink.hockeyapp.net

• vscode.search.windows.net

• raw.githubusercontent.com

• vsmarketplacebadge.apphb.com

The next step is configuring Code to work with the proxy. Actually, if the http_proxy and https_proxy environment variables have been defined at the system level, Visual Studio Code will use their values. If these variables have not been set, you must provide the proxy address in the user settings. In the settings editor, locate Proxy under the Application category. Then, as you can see in Figure 5-6, enter the proxy address in the Proxy text box.

If your proxy also requires an authorization header, this must be specified in the settings.json file, so you have to click the Edit in settings.json hyperlink and then enter the value supplied by your network administrator as the value for http.proxyAuthorization key. Also, flag the Proxy Strict SSL option if the certificate should be verified against the list of supplied certification authorities.

Save your changes and try to see if Visual Studio Code is able to download extensions, packages and libraries required by some languages, and product updates. If you still encounter network issues, you should ask your network administrator to help you configure the proxy settings.

Note

Some protection programs such as Symantec Endpoint Protection block some Visual Studio Code installation (and update) files because they are recognized as Cryptolocker virus instances. Obviously, these are false positives, but you might want to talk to your network administrator to review the protection rules for Visual Studio Code.

Understanding Workspace Settings

Differently from user settings, which globally apply to VS Code’s environment, workspace settings only apply to the current folder. As an implication, you first need to open an existing folder in order to customize workspace settings.

Next you still select File ➤ Preferences ➤ Settings. At this point the settings editor will show two tabs, one for user settings and one for workspace settings, as demonstrated in Figure 5-7.

You customize workspace settings exactly as you do with user settings, so you have not only a second view in the settings editor but also another settings.json file where you can specify your preferences. The settings.json for workspace settings is saved under the .vscode subfolder that Visual Studio Code creates inside the opened folder, restricting settings availability to the current folder only.

Customizing Key Bindings

In the VS Code terminology, key bindings represent shortcuts you use to invoke commands and actions from the keyboard instead of using the mouse. Visual Studio Code includes a huge number of keyboard shortcuts that you can override with custom values. This is particularly useful if you used to work with other development tools and you want to get the same keyboard shortcuts in Visual Studio Code. You will see how to accomplish this by downloading ready-to-use key binding extensions, but it’s important for you to know how key bindings work.

Like user and workspace settings, key bindings are represented with JSON markup, and each is made of two elements: key, which stores one or more keys to be associated to an action, and command, which represents the action to invoke. In some cases, VS Code might offer the same shortcuts for different scenarios. This is the typical case of the escape key, which targets a number of actions depending on what you are working with, such as the code editor or a tool window. In order to identify the proper action, key binding settings support the when element, which specifies the proper action based on the context. You can quickly get the list of current key bindings by selecting File ➤ Preferences ➤ Keyboard Shortcuts. At this point, Visual Studio Code will display a nicely formatted list of commands and shortcuts, as you can see in Figure 5-8 .

In order to customize key bindings, all you need to do is clicking the keybindings.json hyperlink under the search box and edit the keybindings.json file that Code generates for you. The code editor gets split into two views: on the left view, you can see the full list of default key bindings, whereas on the right view, you can override default shortcuts with custom ones (see Figure 5-7).

You can quickly add a custom key binding by clicking the Define Keybinding button or use the shortcut suggested in the button text (which varies depending on your operating system). When you do this, a popup appears and asks you to specify the key binding, as shown in Figure 5-9.

When you press Enter, the JSON markup for the new keyboard shortcut is added, as shown in Figure 5-10.

You will need to edit the command and when elements with the command you want to map and for which scenario. You can look at the original markup on the left to get them both. Actually, the when element is optional. Save your changes to the keybindings.json file to get your new keyboard shortcuts ready.

Extension Recommendations

Visual Studio Code can provide suggestions about recommended extensions based on your activity. When you open the Extensions bar, you will see a group called RECOMMENDED EXTENSIONS , under the list of installed extensions.

The list of recommended extensions varies on your activity and might be empty the first times you work with Visual Studio Code. Not limited to this, Visual Studio Code can suggest extensions based on the file you open. For example, suppose you open a code file written with the Go language but you do not have installed any Go extension yet. Visual Studio Code has built-in support for the Go language syntax, so the editor provides syntax colorization and basic word completion, but you might want to work with a richer editing experience that includes code snippets, code navigation, and rich IntelliSense support. In this case, Code will suggest that an extension is available to help you work with Go files and will offer to install it, as represented in Figure 6-4.

You can click Install and Visual Studio Code will automatically install the extension that it thinks to be the most appropriate, or you can click Show Recommendations to see a list of possible extensions. In both cases, the Extensions bar will be opened and you will see the list of available recommended extensions, but when you click Install, the proposed extension will be already installing.

Useful Extensions

As you work with Visual Studio Code on your projects and on the operating system of your choice, you will be able to find and fine-tune extensions that will help you be more productive.

Configuring Extensions

Visual Studio Code has some options that allow you to control the global behavior of extensions. You can see these options in the user settings, under the Extensions group, as shown in Figure 6-6.

There are detailed comments that explain what each option is about. Additionally, each extension might allow for customizing its own behavior in the user settings. For instance, suppose you have the C# extension installed. If you look in the user settings, you will find a group called C# Configuration. If you expand this group, you will see the full list of options about the C# extension, which include options for code editing and for tools the extensions add. Figure 6-7 shows these options.

Normally, extension authors provide detailed comments that explain what an option is about so that it is easier for you to fine-tune an extension behavior, such as in the case of the C# extension.

Downloading Other Source Control Providers

As I mentioned earlier, VS Code supports additional source control managers , also referred to as SCM, via extensibility. You can open the Extensions bar and type SCM providers in the search box in order to find third-party extensions that target other source control engines. Figure 7-1 shows an example, where you can see how an extension that adds support for the Subversion engine ( https://subversion.apache.org ) has been selected.

Because VS Code provides in-the-box support only for Git, other source control providers will not be discussed in this chapter. If you wish to install SCM extensions, make sure you refer to the documentation provided by the producer.

Initializing a Local Git Repository

The first thing you need to do is creating a local repository for the current project. This is accomplished by opening the Git tool from the side bar, as shown in Figure 7-2.

Click the Initialize repository button at the top (see Figure 7-2). Visual Studio Code will initialize the local repository and will show the list of files that now are under version control but not committed yet (see Figure 7-3).

Notice how the Git icon shows the number of pending changes. This is an important indicator that you will always see any time you have pending, uncommitted changes. Write a commit description and then press Ctrl+Enter. At this point, files are committed to the local repository, and the list of pending changes will be cleaned. Now there is a problem: you need a remote repository, but the official documentation does not describe how to associate one to Code. Let’s see how to accomplish this too.

Creating a Remote Repository

Visual Studio Code works with any Git repository. There are plenty of platforms that use Git as the version control engine, but probably the most popular platforms are GitHub, Atlassian Bitbucket, and Microsoft Visual Studio Team Services. In this section, you will see how to create a remote repository on GitHub. This requires you to have an existing GitHub account, otherwise you can create one for free at https://github.com/join . Once signed in, create a new repository. Figure 7-4 shows an example for a new repository called GreeterDistilled.

Once the repository is ready, GitHub provides fundamental information you need to associate the remote repository with the local one. Figure 7-5 shows the remote address for the Git version control engine and the command lines you have to type to perform the association.

This command makes a first synchronization between the local and remote repositories, uploading files to a default branch called master. Now you really have everything you need and you can start discovering the Git integration that Visual Studio Code offers.

Staging Changes

You can promote files for staging, which means marking them as ready for the next commit. This is actually not mandatory, as you can commit directly, but it is useful to have a visual representation of your changes. You can stage a file by simply clicking the + symbol near its name, or you can stage all files by right-clicking the CHANGES title and then select Stage All Changes. Visual Studio Code organizes staged files into a logical container, as you can see in Figure 7-8. Similarly, you can unstage files by clicking the – symbol.

The workflow based on staging is very convenient, because if you no longer want to commit a file, you can simply unstage it before the code goes to the server.

Switching to a Different Branch

Switching to a different branch is very easy. Simply click the name of the active branch, and VS Code will display the list of branches, as shown in Figure 7-14.

Click the desired branch, and VS Code will check it out and set it as the active branch.

Merging from a Branch

Suppose you have completed and tested some work on the development branch and you want this work to be published to production. Because the production code is on the master branch, you must bring all the work from the development branch to the master branch. This is a merge operation. You can merge from a branch into another one via the Command Palette, using the Git: Merge Branch command. VS Code will show the list of branches, and you will need to select the branch you want to merge from into the current branch (see Figure 7-15).

Once the merge operation is completed, remember to push your changes to the remote repository.

Deleting Branches

Deleting a branch is not very common, because branches help keep the history of the source code, but sometimes you might have branches that have been created only for testing some code and that are not really necessary in the application lifecycle management. In this case, in the Command Palette, you can use the Git: Delete Branch command.

With a user interface like what you see in Figure 7-15, VS Code shows the list of branches. Select the branch you want to delete and press Enter. Remember that the active branch cannot be deleted, and you first need to switch to a different branch.

Git History

Git History is a free extension that adds the option to get a very detailed view of the history of your source code, such as information and author about each commit and that can display how a file has gone through branches; plus it adds commands that make it easier to manage your code against Git. Assuming you have installed the extension, for example, you can right-click a file and select Git: View File History.

Figure 7-16 shows an example based on a file that has three commits. If available, the view shows the branches where the file has been included, comments and author for the commit, and the commit ID, and it allows for searching and filtering contents by branch and author.

If you click the icon at the left of the commit ID, a menu will appear showing a number of very useful commands that will make it easier to work with commits (see Figure 7-17).

At the bottom of the view, you will see the list of files involved in the selected commit. If you click a file name, another menu will appear providing shortcuts to compare the file with the previous version and to view the history of that file. Git History is a very useful extension especially when your team works with the Agile methodologies, and for each task in the backlog, a new branch is created and then merged into one branch at the end of the sprint, making it easier to walk through the history of the work.

GitLens

Another extremely useful that will boost your productivity is called GitLens . GitLens adds many features and commands to Visual Studio Code about Git. For example, it adds a new bar called GITLENS (see Figure 7-18) that you enable by clicking the GitLens icon in the side bar (typically the last one, below the Extensions icon).

The GitLens bar is divided into two areas: EXPLORER and FILE HISTORY . EXPLORER shows the list of both local and remote branches, and, for each branch, it displays the list of commits. For each commit, it displays the commit message, the list of files involved in the commit, and an icon that represents the operation made on the file, such as M for Modified and D for Deleted. Not limited to this, it also shows stashed changes (if any). The FILE HISTORY area shows the list of commits for a file, once you click it in the EXPLORER. For each commit, you can see the name, the author, and the time of last edit. The status bar in VS Code now provides, with GitLens, a field containing the current commit’s author name and time of last edit. If you click this information, VS Code will show a list of commands as shown in Figure 7-19.

These commands allow you to open the commit in your remote repository but also to open the commit revisions. Additionally, it allows copying the commit ID or message to the clipboard. You can also expand the file names below and see individual details for the current code commit. GitLens also adds summary information about edits made on a specific code snippet, right above the code snippet itself. Figure 7-20 shows an example.

If you click at the left side of the divider, you will get to the menu shown in Figure 7-19. If you instead click the author name, VS Code will show a popup that contains the list of commits made by the selected author and, if you hover over a commit name, you will see the full commit details (see Figure 7-21).

Other commands are available in the context menu when you right-click the code editor, such as Copy Commit ID To Clipboard, Copy Message To Clipboard, and Copy Remote File URL To Clipboard, all self-explanatory.

GitHub Pull Requests

Pull requests in Git make it easier to perform code reviews. With pull requests, your code is not automatically merged into a branch until someone else in the team reviews the code and accepts it. If you use GitHub for your repositories, an extension called GitHub Pull Requests is available to introduce support for pull requests in Visual Studio Code. When you first install the extension (and reload the environment), you will be asked to sign into GitHub. After you provide your GitHub credentials and open a folder that is associated to a remote repository hosted on GitHub, you will see a new treeview called GITHUB PULL REQUESTS in the Git bar (see Figure 7-22).

Currently, the extension does not support submitting pull requests from VS Code, but you can manage existing pull requests submitted by other tools such as Microsoft Visual Studio or GitHub itself. When pull requests are available, you will see them listed in the view. If you select a pull request, a new editor window will appear showing all the pull request details, and you will have the option of add a comment and then close, reject, or approve the pull request (see Figure 7-23).

You will also be able to work on the pull request locally if you click the Checkout button, and it will be displayed under the Local Pull Request Branches node in the treeview. This is a very useful extension especially if you work within Agile teams, but remember it only supports GitHub as the host.

Tasks Types

Visual Studio Code provides built-in shortcuts to execute a build task. When new tasks are added, VS Code updates itself to provide shortcuts for the new tasks. Additionally, you can differentiate tasks of the same type. For example, you can have a default build task and other custom build tasks that can be executed only with specific situations.

Running and Managing Tasks

The first approach to understanding tasks in practice is running existing, preconfigured tasks. For the sake of simplicity, start Visual Studio Code and open the project folder called simple from the collection of examples you downloaded previously from the TypeScript Samples repository on GitHub ( https://github.com/Microsoft/TypeScriptSamples ).

Visual Studio Code detects it as a TypeScript project, and therefore it will preconfigure some tasks (in the next section, I will provide more details about task auto-detection). Now open the Terminal menu. As you can see, there are several commands related to tasks, as you can see in Figure 8-1.

If you select Run Task, VS Code will open the Command Palette showing the list of available tasks, as represented in Figure 8-2.

As you can see, there are two tasks: tsc build and tsc watch, both pointing to the tsconfig.json project file. This means that either task will run against the specified file. tsc is the name of the command line TypeScript compiler, whereas build and watch are two preconfigured tasks whose description has been provided previously. If you select tsc build, Visual Studio Code will launch the tsc compiler and will compile the TypeScript code into JavaScript code, as shown in Figure 8-3.

The Terminal panel shows the progress and result of the task execution. In this case, the result of the task is also represented by the generation of a .js file and a .js.map file, now visible in the Explorer bar. You can stop and restart a task using the Terminate Task and Restart Running Task commands, respectively, both described in Table 8-1. Now suppose there is a critical error that prevents the build task from completing successfully. For demonstration purposes, remove a closing bracket from the code of the simple.ts file and run again the build task. At this point, Visual Studio Code will show the detailed log from the tsc tool in the Terminal panel, as shown in Figure 8-4, describing the error and the line of code that caused it.

In the real world, this error would not probably happen because you have the Problems panel and red squiggles in the code editor that both highlight the error. But this is actually an example of how Visual Studio Code integrates with an external tool and shows its output directly in the Terminal panel, helping to solve the problem with the most detailed information possible.

The Default Build Task

Because building the source code is the most frequently used task, Visual Studio Code provides a built-in shortcut to run this task in the Terminal menu, called Run Build Task (Ctrl+Shift+B on Windows and ⇧+⌘+B on macOS). However, you first need to set a default build task, otherwise the Run Build Task command will behave like the Run Task command.

To accomplish this, select Terminal ➤ Configure Default Build Task. When the Command Palette appears, select the task you want to be set as the default build task, in this case select tsc build. When you do this, Visual Studio Code is actually changing its default configuration and therefore will generate a new tasks.json file under the .vscode folder, and it will open this file in a new editor window. The content and structure of tasks.json file will be discussed shortly in this chapter, so for now let’s focus on the new default build task. If you now select Terminal ➤ Run Build Task, or use the keyboard shortcut, you will see how the default build task will be executed, without the need of specifying it every time from the Command Palette.

Auto-Detected Tasks

Visual Studio Code can auto-detect tasks for the following environments: Grunt, Gulp, Jake, and Node.js. Auto-detecting tasks means that Visual Studio Code can analyze a project built for one of the aforementioned platforms and generate the appropriate tasks without the need of creating custom ones. Figure 8-5 shows an example based on the Node debugger extension for Visual Studio Code, whose source code is available at https://github.com/Microsoft/vscode-node-debug .

The source code of this extension is made of JavaScript and TypeScript files and is built upon the Node.js runtime. So Visual Studio Code has been able to detect a number of tasks that work well with this kind of project, including tasks to run npm (the command line tool for Node.js) and the tsc TypeScript compiler.

Auto-detected tasks are very useful because they allow to save a lot of time in terms of task automation. However, more often than not, you will have needs that are not satisfied by existing tasks, so you will need to make your own customizations.

Configuring Tasks

When Visual Studio Code cannot auto-detect tasks for a folder, or when auto-detection does not satisfy your needs, you can create and configure custom tasks by editing the tasks.json file. In this section I will go through two examples that will help you understand how to configure your own tasks.

More specifically, I will explain how to compile Pascal source code files using the OmniPascal extension and the Free Pascal compiler, available to all operating systems, and how to build a Visual Studio solution based on the full .NET Framework on Windows by invoking the MSBuild.exe compiler.

Let’s start with an example based on the Pascal language.

First Example: Compiling Pascal Source Code

In this section, I will explain how to create a custom task that allows for compiling Pascal source code files by invoking the Free Pascal command line compiler from VS Code. Assuming you have downloaded and installed the required software as listed in the preceding text, locate the Free Pascal folder installation on disk (usually /FPC/version number), then open the examples folder. In Visual Studio Code, open any folder containing some Pascal source code. I will use one called fcl-json.

Figure 8-6 shows how Visual Studio Code appears with Pascal source files currently opened.

The OmniPascal extension installed previously enables syntax colorization and the other common editing features. Now imagine you want to compile the source code into an executable binary by invoking the Free Pascal command line compiler. This can be accomplished by creating a custom task. Follow these steps to create a new tasks.json file and set up the custom task:

1. 1.

   Select Terminal ➤ Configure Task: When the Command Palette appears asking for a task to configure, select Create tasks.json from template (see Figure 8-7). There is no existing task to configure at this particular point, so the only thing you can do is creating a new tasks.json file.

    
2. 2.

   The Command Palette will now show the list of available task templates: MSBuild, maven, .NET Core, and Others (see Figure 8-8). Select Others to create a new task that is independent from other systems.

    

Visual Studio Code generates a subfolder called .vscode and, inside this folder, a new tasks.json file whose content at this point is the following:

{

    // See https://go.microsoft.com/fwlink/?LinkId=733558

    // for the documentation about the tasks.json format

    "version": "2.0.0",

    "tasks": [

        {

            "label": "echo",

            "type": "shell",

            "command": "echo Hello"

        }

    ]

}

The core node of this JSON file is an array called tasks. It contains a list of tasks, and for each tasks, you can specify the text that VS Code will use to display it in the Command Palette (label), the type of task (type), and the external program that will be executed (command). An additional JSON property called args allows for specifying command line arguments for the program you invoke. The list of supported JSON properties is available in Table 8-2 and will be discussed later in this chapter, but if you are impatient, you can quickly look at the table and then get back here. Now suppose you want to create a build task which, by convention, is the type of task you use to compile source code. This can be accomplished by modifying tasks.json as follows:

{

    // See https://go.microsoft.com/fwlink/?LinkId=733558

    // for the documentation about the tasks.json format

    "version": "2.0.0",

    "tasks": [

        {

            "label": "build",

            "type": "shell",

            "command": "fpc",

            "args": ["${file}"]

        }

    ]

}

The key points are the following:

• The label property value is now build so that the task is clearly provided as the build task.

• The type property value is shell, meaning it will be executed by the operating system’s shell.

• The command property value is fpc, which is the file name of the Free Pascal compiler.

• The args property value is an array of command line arguments to be passed to the external program; in this case there is only one argument that is the active source file, represented by the $(file) variable.

Note

As a general rule, an external program can be invoked without specifying its full path only if such a path has been registered in the operating system’s environment variables, such as PATH on Windows. In the case of Free Pascal, the installer takes care of registering the program’s path, but remember to have a look at the environment variables for other programs.

You could certainly specify the name of the file you want to compile, but using a variable is more flexible so that you can simply compile any file that is currently active in the code editor. In addition to the properties in tasks.json, variables are also discussed shortly and will be summarized in Table 8-3. Notice how IntelliSense helps you find the appropriate properties in tasks.json, as shown in Figure 8-9.

Save and close tasks.json, then open one of the Pascal source files. Now you can run the newly created build task. Select Terminal ➤ Run Task, and from the Command Palette, select the build task (see Figure 8-10).

At this point, VS Code will ask you what would you like to do to detect any problems encountered during the execution of the external program so that they can be displayed in the Problems panel. Detecting problems in the program’s output is the job of a so-called problem matcher. This is a more complex topic and will be discussed in a dedicated section. For now, select Continue without scanning the task output (see Figure 8-11).

The Free Pascal compiler will be executed in the Terminal panel, where you also see the program output as demonstrated in Figure 8-12.

If the execution succeeds, you will find a new binary file in the source code’s folder. If it fails, the compiler’s output displayed in the Terminal panel will help you understand what the problem was. Before moving to a second example, I will now explain more about default tasks, task templates, JSON properties in tasks.json, and variables.

Multiple Tasks and Default Build Tasks

Tasks.json can define multiple tasks. At the beginning of this chapter, I told you that, among the others, common tasks are build and test, but you might want to implement multiple tasks that are specific to your scenario. For example, suppose you want to use the Free Pascal compiler to build Delphi source code files.

The Free Pascal command line compiler provides the -Mdelphi option, which enables compilation based on the Delphi compatibility mode. You can therefore modify tasks.json as follows:

{

    // See https://go.microsoft.com/fwlink/?LinkId=733558

    // for the documentation about the tasks.json format

    "version": "2.0.0",

    "tasks": [

        {

            "label": "build",

            "type": "shell",

            "command": "fpc",

            "args": ["${file}"]

        },

        {

            "label": "Delphi build",

            "type": "shell",

            "command": "fpc",

            "args": ["${file}", "-Mdelphi"]

        }

    ]

}

As you can see, there is a new custom task called Delphi build in the tasks array which still invokes the Free Pascal compiler on the active file, but with the -Mdelphi option being passed as a command line argument. Now if you select Terminal ➤ Run Task again, you will see both tasks in the Command Palette, as demonstrated in Figure 8-13.

It is common to have multiple build tasks, and even multiple tasks of the same type, but in most cases, you will usually run the same task and keep other tasks for very specific situations. Related to the current example, you will usually build Pascal source files and sometimes build Delphi source files, so a convenient choice is configuring a default build task for Pascal files. As you learned in the “The Default Build Task” section previously, this can be easily accomplished with the following steps:

1. 1.

   Select Terminal ➤ Configure Default Build Task.

    
2. 2.

   In the Command Palette, select the build task defined previously.

    
3. 3.

   With a Pascal source file active, select Terminal ➤ Run Build Task, or press the keyboard shortcut for your system.

    

This command will automatically start the default build task, without the need of manually selecting a task every time.

Understanding tasks.json Properties and Substitution Variables

There are a number of properties available to customize a task. Table 8-2 provides a summary of common properties you use with custom tasks.

Table 8-2

Available Properties for Task Customization

Property Name	Description
label	A string used to identify the task (e.g., in the Command Palette).
type	Represents the task type. For custom tasks, supported values are shell and process. With shell, the command is interpreted as a shell command (such as bash, cmd, or PowerShell). With process, the command is interpreted as a process to be executed.
command	The command or external program to be executed.
args	An array of command line arguments to be passed to the command.
windows	Allows specifying task properties that are specific to the Windows operating system.
Osx	Allows specifying task properties that are specific to macOS.
Linux	Allows specifying task properties that are specific to Linux and its distributions.
Group	Allows for defining task groups and for specifying to which group a task belongs to.
Presentation	Defines how Visual Studio Code handles the task output in the user interface (see the following example).
Options	Allows for providing custom values about the cwd (current working directory), env (environment variables), and shell (default shell) options.

The windows, osx, and linux properties will be discussed separately in the next section. The group property allows grouping tasks by category. For instance, if you consider the two multiple tasks created previously, they are both related to building code, so they might be grouped into a category called build. This is accomplished by modifying tasks.json as follows:

{

    // See https://go.microsoft.com/fwlink/?LinkId=733558

    // for the documentation about the tasks.json format

    "version": "2.0.0",

    "tasks": [

        {

            "label": "build",

            "type": "shell",

            "args": ["${file}"],

            "group": "build",

        },

        {

            "label": "Delphi build",

            "type": "shell",

            "command": "fpc",

            "args": ["${file}", "-Mdelphi"],

            "group": "build"

        }

    ]

}

Notice how IntelliSense shows the built-in supported values for the group property (see Figure 8-14).

Notice how you can also specify additional values to individual tasks in a group. For example, if you want to set a task as the default one in the group, you might change the JSON as follows:

"group": {

     "kind": "build",

     "isDefault": true

  }

}

The kind property represents the group name and isDefault is self-explanatory. You can also customize the way VS Code handles the task output via the presentation property. When you type presentation and then press Enter, IntelliSense adds a number of key/value pairs with some default values, as follows:

"presentation": {

    "echo": true,

    "reveal": "always",

    "focus": false,

    "panel": "shared",

    "showReuseMessage": true

}

Following is the description of each key and its values:

• echo can be true or false and specifies whether the task output is actually written to the Terminal panel.

• reveal can be always, never, or silent and specifies whether the Terminal panel where the task is running should be always visible, never visible, or visible only when a problem matcher is not specified and some errors occur.

• focus can be true or false and specifies if the Terminal panel should get focused when the task is running.

• panel can be shared, dedicated, or new, and it specifies if the terminal instance is shared across tasks or if an instance must be dedicated to the current task or if a new instance should be created at every task run.

• showReuseMessage can be true or false and specifies whether a message should be displayed to inform that the Terminal panel will be reused by a task and that therefore it is possible to close it.

The values you see in the preceding snippet are the default values. In case of default values, a key can be omitted. For example, the following markup demonstrates how to create a new Terminal panel at every run without showing a reuse message:

"presentation": {

    "panel": "new",

    "showReuseMessage": false

}

Other values can be omitted because we are okay with the default values seen in the preceding text.

Note

The list of supported properties is much longer, but most of them are not of common use. If you want to get deeper knowledge about the full list of available properties, you can look at the tasks.json schema, which provides detailed comments about each property and that is available at https://code.visualstudio.com/docs/editor/tasks-appendix .

Visual Studio Code also offers several predefined variables that you can use instead of regular strings and that are useful to represent file and folder names when passing these to a command. Table 8-3 provides a summary of supported variables.

Table 8-3

Supported Substitution Variables

Variable	Description
${workspaceFolder}	Represents the path of the currently opened folder.
${workSpaceFolderBasename}	Represents the path of the currently opened folder without any slashes.
${file}	The active code file.
${relativeFile}	The active code file relative to ${workspaceFolder}.
${fileBaseName}	The active code file’s base name.
${fileBaseNameNoExtension}	The active code file’s base name without the extension.
${fileDirname}	The name of the directory that contains the active code file.
${fileExtname}	The file extension of the active code file.
${cwd}	The current working directory of the task.
${lineNumber}	The currently selected line number in the active file.
${selectedText}	The currently selected text in the active file.
${env.VARIABLENAME}	References an environment variable, such as {$env.PATH}.

Using variables is very common when you run a task that works at the project/folder level or against file names that you either cannot predict or that you do not want to hardcode. You can check the variables documentation for further details at https://code.visualstudio.com/docs/editor/variables-reference .

Second Example: Building a MSBuild Solution (Windows Only)

MSBuild has been the Microsoft build engine since the very first release of the .NET Framework back in 2002. It is a very powerful tool, because it can build a Visual Studio solution with no effort. So, a very nice to have feature would be the possibility of compiling your solutions and projects inside Visual Studio Code.

You can configure a task to run MSBuild.exe, the build engine used by Visual Studio. In the next example, you will see how to compile an MSBuild solution made of a Visual Basic project based on Windows Presentation Foundation (WPF), but of course all the steps apply to any .sln file and to any supported languages. If you do not have one, in Visual Studio 2017 create a blank WPF project with Visual Basic as the language. There’s no need of writing code, as I focus on the project type. Save the project, then open the project folder in VS Code.

Before configuring a task, it is worth mentioning that, by default, the MSBuild path is not registered in the Windows’ environment variables, so you have two possible alternatives:

• Add the MSBuild directory to the PATH environment variable via Control Panel ➤ System ➤ Advanced system settings ➤ Environment Variables.

• Specify the full MSBuild pathname in tasks.json. This is the quickest option and the one I will use.

Select Terminal ➤ Configure Task. Select the MSBuild template from the list of templates. When tasks.json has been created, change the value of the command property as follows, also replacing Enterprise with the name of the Visual Studio edition you have on your machine, for example:

"command": "C:\\Program Files (x86)\\Microsoft Visual Studio\\2017\\Enterprise\\MSBuild\\15.0\\Bin\\msbuild"

Also, change the value of the reveal property from never to always for demonstration purposes, so that you can see the output of MSBuild in the Terminal panel. Now if you select Terminal ➤ Run Task and select the preconfigured build task, MSBuild will be started and the solution will be built, as you can see in Figure 8-15.

The preconfigured MSBuild task uses the $msCompile problem matcher to detect problems related to C# and Visual Basic in the build output, so that they can be presented in a convenient way in the user interface. Let’s spend some more words about problem matchers.

Running Files with a Default Program

In case you are editing in VS Code a file whose type is associated with the operating system, you do not need to create custom tasks to run it. For example, a batch program (.bat) in Windows or a shell script file (.sh) on macOS can be run by simply clicking Terminal ➤ Run Active File.

The file name will be passed to the current terminal program on your system (PowerShell on Windows or the bash on Linux and macOS) so that the operating system will try to open the file with the program that is registered with the file extension, if any. In the case of a batch or shell script file, the operating system will execute the file. The output will be displayed in the Terminal panel.

Creating .NET Core Projects

.NET Core is the cross-platform, open-source, modular runtime from Microsoft to build applications using C#, F#, and Visual Basic that run on Windows, macOS, and Linux distributions. With .NET Core, you can create different kinds of applications such as web applications, Web API REST services, Console applications, and class libraries. Plans are to support desktop technologies as well.

.NET Core ships with a rich command line interface, which provides many options to create different kinds of applications. Discussing all supported project types is not possible here, so you can refer to the official documentation available at https://dot.net .

In this section I will show an example based on an ASP.NET Core web application built upon the model-view-controller (MVC) pattern. Creating a .NET Core application is accomplished via the command line. Open a command prompt or a terminal instance on the VSCode folder created previously, depending on your system.

If you typed dotnet run, the application would run in the default web browser. However, the goal is understanding how to run and debug the application in Visual Studio Code. So, open the project folder with VS Code. You can also type code . to open Visual Studio Code from the command line. Thanks to the C# extension, VS Code will recognize the presence of the .csproj project file, organizing files and folders and enabling all the powerful code editing features you learned previously.

Let’s start with the second option, and then the debugging features are described in detail in the next section. You can select Debug ➤ Start Without Debugging. Visual Studio Code will first start the default build task, and then it will start the application. Figure 9-1 shows the web application scaffolded previously.

ASP.NET Core web applications use an open-source development server called Kestrel ( https://github.com/aspnet/KestrelHttpServer ), which allows for independency from proprietary systems. By default, Kestrel listens for the application on port 5001, which means your application can be reached at http://localhost:5001. The default port setting can be changed inside a file called launch.json, which I will discuss more thoroughly in the next paragraphs.

With simple steps, you have been able to create and run a .NET Core project in VS Code that you can certainly edit as you need with the powerful C# code editing features.

Creating Projects on Other Platforms

where MyCordovaProject is the name of the new project. Once you have a new or existing Cordova project, you can install the Cordova Tools extension for Visual Studio Code ( https://marketplace.visualstudio.com/items?itemName=vsmobile.cordova-tools ). This extension will add support for Cordova projects to the integrated debugger for Node.js, providing specific configurations to target Android and iOS devices, as well as simulators.

Configuring the Debugger

Before a debugger can inspect an application, it must be configured. For Node.js and for platforms like .NET Core, where an extension takes care of everything, default configurations are provided. If you take a look at Figure 9-2, you can see how there are two predefined configurations, .NET Core Launch (web) and .NET Core Attach.

The first configuration is used to run the application within the proper host, with an instance of the debugger attached. For an ASP.NET Core web application like in the current example, the host is the web browser. In the case of a Console application, the host would be the Windows’ Console or the Terminal in macOS and Linux. The second configuration can be instead used to attach the debugger to another running .NET Core application.

If you wanted to implement custom configurations, launch.json is the place where you would add them. Because these two configurations, and more generally default configurations, are enough for most of the common needs, custom configurations will not be covered in this book. The documentation provides additional details about this topic ( https://code.visualstudio.com/docs/editor/debugging#_add-a-new-configuration ).

Managing Breakpoints

Before starting a debugging session, it is useful to place one or more breakpoints to discover the full debugging capabilities in VS Code. You place breakpoints by clicking the white space near the line number. For instance, place a breakpoint on line 19 of the Startup.cs file, as shown in Figure 9-3.

You can remove a breakpoint by simply clicking it again, or you can manage breakpoints in the Breakpoints area of the Debug view (see Figure 9-4).

Here you can see the list of files that contain any breakpoint and the line numbers. You can also cause the debugger to break on user-unhandled exceptions (default) and on all exceptions. You can click the Add Function Breakpoint (+) button. Instead of placing breakpoints directly in source code, a debugger can support creating breakpoints by specifying a function name. This is useful in situations where source is not available but a function name is known.

Debugging an Application

Now it is time to start a debugging session, so that you will be able to see in action all the debugging tools and make decisions when breakpoints are hit. In the Debug view, make sure the .NET Core Launch (web) configuration is selected, then click the Start button or press F5. Visual Studio Code will launch the debugger, and it will display the output of the debugger in the Debug Console panel.

It will also break when it encounters an exception or a breakpoint, like in the current example. Figure 9-5 shows Code hitting a breakpoint and all the debugging instrumentation.

These commands are also available in the Debug menu, together with their keyboard shortcuts. If you hover a variable name in the code editor, a convenient popup will make it easy to investigate values and property values (depending on the type of the variable), as shown in Figure 9-6 where you can see a popup showing information about the Configuration variable. You can expand properties and see their values, and you can also investigate properties in the VARIABLES area of the Debug side bar.

Evaluating Expressions

You have an option to use the Watch tool to evaluate expression. While debugging, click the Add Expression (+) button in the Watch box, then type the expression you want to evaluate. For instance, if you type Configuration != null, the Watch tool will return true or false depending if the object has an instance or not. Figure 9-7 shows an example.

The Call Stack

The debugger also offers the Call Stack feature, which allows stepping through the hierarchy of method calls. When you click a method call in the stack, the code editor will open the containing file, highlighting the method call (see Figure 9-8).

The code editor can highlight method calls only if it is part of the source code, but this feature is very useful especially when you encounter errors and you need to step back through the code.

The Debug Console Panel

The Debug Console is certainly the place where VS Code shows the debugger output but, as the name implies, it is also an interactive panel where you can evaluate expressions. You can type the expression near the > symbol and then press Enter.

Figure 9-9 shows an example that evaluates if the Configuration variable is not null.

Installing Visual Studio Code on Windows

Visual Studio Code can be installed on Windows 7, 8, and 10. For this operating system, Visual Studio Code is available with two installers: a global installer and a user-level installer. The first installer requires administrative privileges for installation and makes Code available to all users. The second installer makes Code available only to the currently logged user, but it does not require administrative privileges.

The latter is the choice I recommend, especially if you work within a corporate environment and you do not have administrative privileges to install software on your PC. The Download for Windows button that you can see in Figure 1-1 will automatically download the global installer. If you instead wish to download the user-level installer, click the arrow at the right of the button and then click the User Installer hyperlink. It is worth mentioning that Visual Studio Code is available in two versions, 32 bit and 64 bit. The download page will automatically suggest the version that matches your operating system architecture, but if you wish to download a different installer, you can click the arrow and then click Other downloads.

A specific dialog will inform you once the installation process has completed. The installation folder for the user-level installer is C:\Users\proga\AppData\Local\Programs\Microsoft VS Code, while the installation folder for the global installer is C:\Program Files\Microsoft VS Code on 64-bit systems and C:\Program Files(x86)\Microsoft VS Code on 32-bit systems. You will find a shortcut to Visual Studio Code in the Start menu and on the Desktop, if you selected the option to create a shortcut during the installation. When started, Visual Studio Code appears like in Figure 1-2.

Installing Visual Studio Code on macOS

Installing VS Code on macOS is extremely simple. From the download page, simply click the Download for macOS button and wait for the download to complete. On macOS, Visual Studio Code works as an individual program, and therefore you simply need to double-click the downloaded file to start the application. Figure 1-3 shows Visual Studio Code running on macOS.

Installing Visual Studio Code on Linux

Linux is a very popular operating system and many derived distributions exist, so there are different installers available depending on the distribution you are using. For the Ubuntu and Debian distributions, you will need the .deb installer. For the Red Hat Linux, Fedora, and SUSE distributions, you will need the .rpm installer. This clarification is important because, differently from Windows and macOS, the browser might not be able to automatically detect the Linux distribution you are using, and therefore it will offer both options.

Once installed, you will simply need to click the Show Applications button on the desktop and then the Visual Studio Code shortcut. Figure 1-4 shows Visual Studio Code running on Ubuntu.

Localization Support

Visual Studio Code ships in English, but it can be localized in many other supported languages and cultures. When started, VS Code checks for the operating system language and, if different from English, it shows a popup suggesting to install a language pack for the culture of your operating system. The localization support can be also enabled manually.

This will open a file called locale.json, which is the place where Visual Studio Code stores the localization information. Figure 1-5 shows how this file appears in the editor. As you can see in the comments, there is a link to the documentation that contains the full list of supported cultures.

For instance, if you wanted to change the localization from English to Italian, you would replace en with it, saving your changes. At restart, Visual Studio Code will apply the new localization downloading the language pack it needs.

Updating Visual Studio Code

Visual Studio Code is configured to receive automatic updates in the background and, usually, Microsoft releases updates monthly.

Additionally, you can manually check for updates with Help ➤ Check for Updates on Windows and Linux and with Code ➤ Check for Updates on macOS. If you do not want to receive automatic updates and prefer manual updates, you can disable automatic updates by selecting File ➤ Preferences ➤ Settings and then, in the Update section, disable the background updates option. Figure 1-6 shows an example.

You will follow the same steps to re-enable updates in the background. Whenever Visual Studio Code receives an update, you will receive a notification that suggests you to restart Code in order to apply changes. The first time you restart Visual Studio Code after an update, you will see the release note for the version that was installed, as demonstrated in Figure 1-7.

Release notes contain the list of new and updated features, as well as hyperlinks that will open the proper feature page in the documentation.

Previewing Features with Insiders Builds

By default, the download page of the Visual Studio Code’s web site allows you to download the latest stable build. However, Microsoft periodically also releases preview builds of Visual Studio Code called Insiders builds that you can download to have a look at new and updated upcoming features before they are released to the general public.

Insiders builds can be downloaded from https://code.visualstudio.com/insiders , and follow the same installation rules described previously for each operating system. They have a different icon color, typically a green icon instead of a blue icon, and the name you see in the application bar is Visual Studio Code - Insiders instead of Visual Studio Code (see Figure 1-8).

Insiders builds and stable builds can work side by side without any issues. Because each lives in its own environment, your setting customizations and extensions you installed on the stable build will not be automatically available to the Insiders build and vice versa, so you will need to provide them again.

Insiders builds are a very good option to have a look at what is coming with Visual Studio Code, but because they are not stable, final builds, it is not recommended you use them in production or with code you will release to production.

Reordering, Resizing, and Zooming Editor Windows

Editor windows can be reordered and resized based on your preferences. Reordering editors can be done by clicking the editor’s header (which is where you see the file name) and moving it to a different position. Resizing an editor can instead be accomplished by clicking the mouse left button over the editor’s border, when the pointer appears as a left/right arrow pair.

You can also zoom in and out the active editor by clicking Ctrl++ and Ctrl+-, respectively. As an alternative, you can select View ➤ Zoom in and View ➤ Zoom out.

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.

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.

The Settings Button

The Settings button is represented with the gear icon, at the bottom of the Activity bar. If you click it, you will see a popup menu with a list of commands that represent shortcuts for customizing Visual Studio Code and that will be discussed more thoroughly in Chapter 5, "Customizing Visual Studio Code." Among the others, a command in the menu allows for manually searching for product updates.

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.

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.

Working with C# and C++

The C# programming language deserves a more detailed version, because of its popularity and because it is now a cross-platform language that you can use not only on Windows but also on macOS and Linux. As you can see from Table 3-1, the editing experience that Visual Studio Code offers out of the box for C# is limited to common features.

However, full and rich support for the coding experience with C# is offered via the Microsoft C# free extension ( https://marketplace.visualstudio.com/items?itemName=ms-vscode.csharp ). This provides an optimized experience for .NET Core development and includes all the support and tools you need to build apps with C#, including the necessary support for the .NET Core debugger. With this extension, you will basically get the same experience available to TypeScript, including advanced editing capabilities based on the .NET Compiler Platform (also known as Roslyn) that makes it easier to fix code issues as you type. If you plan to work with C#, I definitely recommend you to install this extension, especially because this chapter discusses some editing features that are available only through the extension. Extensibility is explained in more detail in Chapter 6, "Installing and Managing Extensions," so the easiest way to get the extension installed without further information is opening any C# code file (.cs) and following the instructions shown by Visual Studio Code when it detects that a proper extension is available for that file type.

Similarly, you might want to install the Microsoft C/C++ extension that adds enhanced editing features to the C and C++ languages, plus debugging support for Windows (PDB, MinGW, Cygwin), macOS, and Linux. The extension is available at https://marketplace.visualstudio.com/items?itemName=ms-vscode.cpptools , and you can follow the same steps described before about the C# extension for easy installation, of course opening a .c, .h, or .cpp file.

Working with Text

As you would expect, the code editor in VS Code offers commands for text manipulation and text selection. The Edit menu provides the Undo, Redo, Copy, Cut, Paste, Find, Replace, Find in Files, and Replace in Files commands. These commands are available in every text editor and do not require any further explanation, except for the find and replace tools that were described in the previous chapter.

The Edit menu also provides two commands to work with code snippets, Emmet: Expand Abbreviation and Emmet…. The first command is the menu representation of keyboard shortcuts offered by code editor to add a code snippet, whereas the second command opens the Command Palette and shows the list of code snippets that you can add. Code snippets are discussed in more detail in the “Reusable Code Snippets” section in this chapter.

The Selection menu not only provides commands for text selection but also commands that make it easier to move or duplicate lines of code above and below the current line. The Add Cursor Above, Add Cursor Below, and Add Cursors To Line Ends commands allow working with multicursors, described in the “Multicursors” section in this chapter.

If you click an identifier, reserved word, or type name in the editor, you can use the Add Next Occurrence, Add Previous Occurrence, and Select All Occurrences commands that allow to quickly select occurrences of the selected word, and occurrences will be highlighted in a different color, which differs depending on the current theme.

Syntax Colorization

For all the languages summarized in Table 3-1, the code editor in Visual Studio Code provides the proper syntax colorization. Figure 3-1 shows an example based on a TypeScript code file.

Syntax colorization is available for other languages via extensibility. If you need to work with a language that is not included out of the box, you can check the Visual Studio Marketplace and see if an extension is available to support such a language. See Chapter 6, "Installing and Managing Extensions," for information about extensibility. As a side note, syntax colorization is the minimum that an extension must provide to add support for a new language.

Delimiter Matching and Text Selection

The code editor can highlight matching delimiters such as brackets and parentheses (both square and round). This feature is extremely useful to delimit code blocks and is triggered once the cursor gets near one of the delimiters. Figure 3-2 shows an example based on bracket matching in a constructor definition.

This feature is also very useful when you need to visually delimit nested blocks and with complex and long expressions. It is worth mentioning that you can press Ctrl+D to fast select a word or identifier at the right of the cursor and that you can also easily expand (Shift+Alt+Right) and shrink (Shift+Alt+Left) text selection within enclosing delimiters of a code block.

Code Block Folding

The code editor allows folding delimited code blocks. Just hover line numbers and the - symbol will appear near the start of a code block. Simply click to fold, and you will see the + symbol at this point, which you click to unfold the code block. Figure 3-3 provides an example.

Multicursors

The code editor supports multicursors . Each cursor operates independently, and you can add secondary cursors by pressing Alt-Click at the desired position. You will see that secondary cursors will be rendered thinner. The most typical situation in which you want to use multicursors is when you want to add (or replace) the same text in different positions of a code file.

Reusable Code Snippets

Visual Studio Code ships with a number of built-in code snippets that you can easily add by using the Emmet abbreviation syntax and pressing Tab. See the “Language Support” section to discover what languages support code snippets natively. For instance, in a Swift file, you can easily add a do..catch block definition by using the do code snippet, as shown in Figure 3-4.

Code snippets are available as you type within the code editor, and you can recognize them by the icon representing a small, white sheet. Notice how a tooltip shows a preview of the code snippet. Pressing Tab over the previous snippet produces the result shown in Figure 3-5.

Notice that if the code snippet contains variable names or identifiers, these might be highlighted suggesting that you should give them a different name (like for the error identifier in Figure 3-5). When you rename a highlighted identifier, all occurrences will be also renamed.

Visual Studio Code is not limited to built-in code snippets. You can download code snippets produced by other developers for many languages from the Visual Studio Marketplace. Actually, most of the extensions that introduce or extend support for programming languages also include a number of code snippets .

Word Completion

Out of the box, the code editor in Visual Studio Code implements basic word completion for all the supported languages. This feature helps you complete words and statements as you type. For example, if you look at Figure 3-6, you can see how the code editor suggests terminating a statement with the Class keyword in a Visual Basic file, based on what the developer is typing.

Simply press Enter or Tab to insert the suggested word. The word completion engine learns as you code and can provide suggestions based on variables and member names you declare. For example, Figure 3-7 demonstrates how the editor suggests adding the name of a variable called Test, declared previously in the code.

Minimap Mode

Sometimes it is difficult to have an idea of the position of the cursor inside a source code file, especially with very long files. Visual Studio Code provides the Minimap , a small preview of the source code file on the code editor’s scrollbar. Figure 3-8 provides an example.

If you click the Minimap, the portion of source code that is visible in the code editor is highlighted in the scrollbar, so that you can have a better perception of the current position of the cursors. The Minimap can be disabled and enabled using the View ➤ Toggle Minimap command.

Whitespace Rendering and Breadcrumbs

A very common feature with text editors is the possibility of showing light dots instead of white spaces. In Visual Studio Code, this is possible for white spaces within indentations. To accomplish this, you select View ➤ Toggle Render Whitespace . Figure 3-9 shows an example of how white spaces for indentations are replaced with dots.

Simply use again the same command to return to white spaces. Another very useful command is Toggle Breadcrumbs , available in the View menu. With supported languages, such as JavaScript, TypeScript, and C# with the extension installed, it shows an icon at the upper left corner of the code editor, which you can expand to see the definition of types and members, as shown in Figure 3-10.

By clicking a type or member name, the cursor will be moved to its definition, making code navigation much easier.

Markdown Preview

Visual Studio Code supports the Markdown syntax for producing documents in the very popular .md file format. Other than syntax colorization, for this particular language Visual Studio Code also provides a preview of how the document will look like. Simply press Ctrl+Shift+V (Cmd+Shift+V on macOS) in the code editor, and the preview will appear in a separate window, as demonstrated in Figure 3-11.

This feature is very useful because it allows to preview your documents without the need of an external program such as a web browser.

Working with IntelliSense

IntelliSense provides rich, advanced word completion via a convenient popup that appears as you type. In the developer tools from Microsoft, such as Visual Studio, IntelliSense has always been one of the most popular features, and the reason is that it is not simply word completion. In fact, IntelliSense provides suggestions as you type, showing the documentation about a member (if available) and displaying an icon near each suggestion that describes what kind of syntax element a word represents. Figure 3-12 shows IntelliSense in action with a C# code file.

As you can see in Figure 3-12, IntelliSense shows the list of available members as you write, for the given type (in this case Console). When you select a word from the completion list, Visual Studio Code shows the member documentation.

Press either Tab or Enter to complete the word insertion. Not limited to this, IntelliSense in Visual Studio code supports suggestion filtering: based on the CamelCase convention, you can type the uppercase letters of a member name to filter the suggestion list. For instance, if you are working against the System.Console type and you write cv, the suggestion list will show the CursorVisible property, as demonstrated in Figure 3-13.

IntelliSense also provides the foundation for other advanced features in the code editor that depend on it, described in the next subsections.

Parameter Hints

When you write a function invocation, IntelliSense also shows a tooltip that describes each parameter. This feature is called parameter hints and is available only if the documentation for function parameters has been implemented. An example is visible in Figure 3-14.

For languages such as C# and TypeScript or, more generally, with languages that allow for function overloads, parameter hints show the description for the parameters of each overload. You can also scroll the list of overloads with the up and down arrow keys to select a different overload .

Inline Documentation with Tooltips

If you hover types, variables, and type members, Visual Studio Code will show a tooltip that contains the documentation for the selected object. Figure 3-15 provides an example.

Like parameter hints, this feature is available only if the documentation has been implemented. If you instead hover a variable name, the tooltip will only show the type for the variable.

Go To Definition

Visual Studio Code provides another interesting feature called Go To Definition . You can hover over a symbol with the mouse and, if you press Ctrl (or ⌘ on macOS), the symbol will appear as a hyperlink; also, a tooltip will show the code that declares that symbol. You click the type name while pressing Ctrl, and you will be redirected to the code that defines that type. Figure 3-16 shows how the code editor appears when you press Ctrl and hover over a type name.

The same tool is available if you select a type name and press F12 or if you right-click a type name and then select Go To Definition from the context menu. This is an extremely useful feature that lets you quickly browse between type definitions that are in different code files.

Find All References

Find All References is a very useful feature that makes it easy to see how many times and where a type or member has been used across the code. For each type or member, the code editor shows how many times a member has been referenced and in which files. Figure 3-17 shows an example based on finding all references of a type called Startup.

If you click an occurrence in the list on the right, the code editor brings up a popup containing the code where that occurrence has been found. It is very important noting that this popup is interactive, which means that you can edit the code directly, without the need of opening the containing code file separately. This allows keeping your focus on the code, saving time. Also, notice that the interactive popup shows, at the top, the file name that contains the selected reference .

Peek Definition

Suppose you have dozens of code files and that you want to see or edit the definition of a type you are currently using. With other editors, you should search among the code files, which not only can be annoying but that would also move your focus away from the original code. Visual Studio Code brilliantly solves this problem with a feature called Peek Definition .

You can simply right-click a type name and then select Peek Definition (the keyboard shortcut is Alt+F12); an interactive popup window appears, showing the code that defines the type, giving you not only an option to look at the code but also of direct editing. Figure 3-18 shows the peek window in action.

As you can see, the peek window is very similar to the Find All References feature, and it still shows the file name that defines the type at its top. Simply click the file name to open the code file in a separate editor.

Renaming Symbols and Identifiers

It is very frequent to rename a symbol, so Visual Studio Code offers a convenient way to accomplish this. If you press F2 over the symbol you wish to rename or right-click and then select the Rename Symbol command, a small interactive popup appears. Figure 3-19 shows an example based on a symbol called app. There you can write the new name without any dialogs, keeping your focus on the code.

All references of that symbol will be renamed accordingly. Additionally, you can rename all the occurrences of an identifier. You simply right-click the identifier, then select Change All Occurrences (or press Ctrl+F2 on Windows/Linux and ⌘+F2 on macOS); all the occurrences will be highlighted and updated with the new name as you type.

Live Code Analysis

With C#, TypeScript, and with languages whose support can be enhanced via extensions like Python, Visual Studio Code can detect code issues as you type, suggesting fixes and offering code refactorings. This is one of the most powerful features in this tool, which is something that you will not find in most other code editors. The next examples are based on the C# programming language, since (together with TypeScript) this supports the richest experience possible in Visual Studio Code, and therefore it is a good choice to discuss the powerful coding features available. Of course, everything discussed here applies to all other languages that support the same enhanced features.

According to the severity level of a code issue, Visual Studio Code underlines with squiggles the pieces of code that need your attention. Green squiggles mean a warning; red squiggles mean an error that must be fixed. If you hover over the line or symbol with squiggles, you will get a tooltip that describes the issue. Figure 3-20 shows two code issues, one with green squiggles (an unused local variable) and one with red squiggles (a symbol that does not exist), plus the tooltip for the code issue with the higher severity level.

Code issues are detected as you type and they are also listed in the Problems panel. If you look at Figure 3-20, you can also see an icon with the shape of a light bulb. This icon is a shortcut for a tool called Light Bulb. When you click the Light Bulb, Visual Studio Code shows possible code fixes for the current context. For example, if you look at Figure 3-21, you can see the suggestions that the Light Bulb provides to fix the missing symbol underlined with red squiggles.

Probably bool is not the type you would expect here, but Visual Studio Code has not enough information to infer a different type. However, when the code contains some information that Visual Studio Code could use to understand the proper type, properties, fields, and local variables would be generated of the expected type. With the Light Bulb, it is also easier to generate types on the fly. Figure 3-22 shows an example based on an object called person, for which a type has not been defined yet. As you can see, for this context the code editor shows a larger list of possible fixes, including generating a new class, either in the current file or in a separate file.

Not limited to this, the Light Bulb can help you refactor your code and keep it cleaner. For example, you can click any of the using directives (or equivalent in other languages) and, when the Light Bulb appears, you can see how it offers to remove unused code, as shown in Figure 3-23.

Actually, there is even more power. Suppose you want to create a class that implements the IDisposable interface . As you can see in Figure 3-24, the code editor cannot find the definition of such interface and shows a red squiggle, but the Light Bulb provides shortcuts for quickly fixing this issue. For example, it suggests adding a using System; directive, which is what the code needs.

At this point, IDisposable will be still underlined with a red squiggle because the code is not implementing the interface yet. If you still enable the Light Bulb, you will see how the code editor suggests potential fixes based on the current context, such as implementing the interface in different ways (see Figure 3-25).

You would get a similar result, but with different implementation, if the choice was one of the other possible code fixes. Though it is not possible to show examples for all the code fixes that Code can apply, what you have to keep in mind is that suggestions and code fixes are based on the context for the code issue, which is a very powerful feature that makes Visual Studio Code a unique editor.

Creating Files

By default, new files are treated as plain text files. In order to change the language for a new file, click the Select Language Mode item in the right corner of the status bar, near the smile icon. In this case, you will see Plain Text as the current mode, so click it. As you can see in Figure 4-2, you will be presented with a list of supported languages where you can select the new language for the current file. You can also start typing a language name to filter the list.

When you select a new language, the Select Language Mode item is updated with the current language, and the editor enables the supported features for the selected language, such as syntax colorization, word completion, and code snippets.

Obviously, you can change the language of any open code file, not just new files.

File Encoding, Line Terminators, and Line Browsing

Visual Studio Code allows you to specify an encoding for new and existing files. Default encoding for new files is UTF-8. You can change the current encoding by clicking the Select Encoding item in the status bar (in the previous figures, it is represented with UTF-8, the current encoding). You will be presented with a long list of supported encodings and a search box where you can filter the list as you type (see Figure 4-3).

Similarly, you can change the line terminator by clicking the Select End of Line Sequence item (in previous figures it’s represented by CRLF). Visual Studio Code supports CRLF (Carriage Return and Line Feed) and LF (Line Feed), and the default selection is CRLF. You can also move fast to a line of code by clicking the Go to Line item, represented by the line number/column group in the status bar. This will open up a search box where you can write the line number you want to go to, and the line of code will be immediately highlighted as you type (see Figure 4-4).

Opening a Folder

You open a folder via File ➤ Open Folder or via the Open Folder shortcut in the Welcome page. You can also drag and drop a folder name from Windows’ Explorer or macOS’ Finder onto Visual Studio Code.

Whatever folder you open, VS Code organizes files and subfolders into a structured view represented in the Explorer side bar. Figure 4-5 shows an example based on a C# project.

The root container is the folder name. Nested you see files and subfolders, and you can expand each subfolder to browse every file it contains. Simply click a file to open an editor window on it.

Opening .NET Core Solutions

When you open a folder that contains a .NET Core solution based on the MSBuild project system (.sln file), Visual Studio Code organizes all the code files into the Explorer bar and enables all the available editing features for C#. Figure 4-6 shows an example.

Notice how the root level in Explorer is the project name. You can browse folders, code files, and edit anything that Visual Studio Code can properly recognize. It is worth mentioning that Visual Studio Code can certainly open any MSBuild solution, not only .NET Core solutions, but it will only be able to run and debug .NET Core applications. For instance, if you open a Windows Presentation Foundation (WPF) solution in VS Code, you will still benefit the structured folder view in the Explorer bar and then full C# language support, but you will not be able to build, run, and debug the code. Instead, with .NET Core you also have integrated debugging support which allows running, debugging, and testing code directly within VS Code. This will be discussed in Chapter 9, "Running and Debugging Code."

Opening JavaScript and TypeScript Projects

Similarly to .NET Core solutions, Visual Studio Code can manage JavaScript folders by searching for jsconfig.json or package.json files. If found, Code organizes the list of folders and files the proper way and enables all the available editing features for all the files it supports, as shown in Figure 4-7.

TypeScript projects’ behavior is the same as for JavaScript, except that Visual Studio Code will search for a file called tsconfig.json as the root.

Opening Loose Folders

Visual Studio Code allows opening folders that contain unrelated, loose assortments of files. Visual Studio Code creates a logical root based on the folder name, showing files and subfolders. Figure 4-8 shows an example based on a sample folder called MyFiles that contains files in different languages.

With this option, you can basically open any folder in VS Code and edit all supported files taking advantage of the code editing features for each file individually.

Creating Workspaces

Creating a workspace can be done whether you already have any folders opened or not. If you already have any folders opened, you can select File ➤ Save Workspace As. VS Code will ask you to specify the location and file name for the new workspace. A workspace is represented by a JSON file with .code-workspace extension, whose structure will be explained shortly.

The workspace name is simply the file name without the .code-workspace extension and will be shown in the Explorer bar (see Figure 4-9). Then you can add other folders to the workspace by selecting File ➤ Add Folder to Workspace or via the Add workspace folder shortcut in the Welcome page. Added folders will be displayed in the Explorer bar under the workspace root. If you do not have any folders already opened, you can either start with File ➤ Save Workspace As or with File ➤ Add Folder to Workspace. With the first option, you will basically create an empty workspace with a name, and then you will add folders as described in the preceding text. With the second option, you will instead create an empty, untitled workspace starting from an existing folder. In this case, in fact, the Explorer bar will show UNTITLED (WORKSPACE) as the new workspace name. When you save the workspace like described in the preceding text, the Explorer bar will show the new name based on the workspace file name. Remember that workspaces are only logical containers and do not affect the structure or behavior of your projects and folders in any manner.

Opening Existing Workspaces

You can open an existing workspace via File ➤ Open Workspace. You can also drag and drop a workspace file name from your operating system’s file browsing program onto the Visual Studio Code surface. Opening a .code-workspace file directly will simply result in viewing the file content, not opening the workspace. Similarly, opening a folder that contains a .code-workspace file will only result in opening the folder, not the workspace. You can only use the specific commands described at the beginning of this paragraph.

Workspace Structure

Notice that the full pathname of a folder is only provided if such a folder is not in the same location of the workspace file. In this case, the .code-workspace file, the MyFiles folder, and the ExpenseReport folders are all in the same location; instead, the multeor-master folder is located under a different folder, C:\Users\adelsole\Downloads. If you want to see yourself the structure of a workspace file, you can open it within Visual Studio Code via File ➤ Open File.

Theme Selection

You can select among several themes to give Visual Studio Code a different look and feel. You select a color theme with File ➤ Preferences ➤ Color Theme or by clicking the Settings button and then Color Theme . The list of available color themes will be shown in the Command Palette, as you can see in Figure 5-1.

Once you select a different color theme, this will be applied immediately. Also, you can get a preview of the theme as you scroll the list with the keyboard. Figure 5-2 shows the Dark (Visual Studio) theme applied to VS Code, which is a very popular choice, while you can try yourself the other themes.

As you might expect, applying a theme also affects colors used in the code editor so that there is an appropriate brightness and contrast balance. In the next chapter, you will see how to install additional themes as extensions.

Customizing the Environment

In most applications, including other IDEs, you set environment settings and preferences via a convenient user interface, and VS Code is no less. There are two different types of settings: user settings and workspace settings. User settings apply globally to the development environment, while workspace settings only apply to the current project or folder. I will now cover both user and workspace settings.

Understanding User Settings

User settings globally apply to the VS Code’s development environment. Customizing user settings is accomplished by selecting File ➤ Preferences ➤ Settings. When you do this, the settings editor appears, as represented in Figure 5-3.

On the left side of the editor, settings are grouped by category. In the Search settings bar, you can quickly search settings based on what you type, and you can also see the number of total settings found, which varies depending on the version of VS Code and on the number of extensions you have installed. You can manually expand setting categories manually, or you can just scroll the list of settings, and the related category is automatically expanded as you scroll. For instance, you could control the behavior of the Explorer bar by locating and selecting Explorer under the Features category, and here you could change the current settings, as shown in Figure 5-4.

Similarly, you could change settings and preferences for the text editor, the whole application, and extension settings. In fact, extensions that allow for customizing preferences store their settings in the same place as VS Code does, so that you have a unique settings editor. There are hundreds of settings and the number varies depending on your configuration and installed extensions, so it’s not possible to list all settings here. For more details about available settings, visit the official documentation ( https://code.visualstudio.com/docs/getstarted/settings ).

Note

Remember that changes will be applied only after you save your edits with File ➤ Save.

Behind the Scenes: The settings.json File

Behind the scenes, VS Code (and extensions) stores settings inside a file called settings.json . In this file, each key/value pair represents a specific setting and its value. Before Visual Studio Code 1.27.1, settings could only be edited manually by modifying the settings.json file, and only in version 1.27.1, the editor discussed in the previous section was introduced.

It is important to understand how this file works, so click the … button below the number of settings displayed in the search bar, and then click Open settings.json. Figure 5-5 shows how the editor appears at this point.

As you can see, the editor view is split in two areas: the DEFAULT USER SETTINGS on the left and the USER SETTINGS on the right.

Default user settings relate to Visual Studio Code’s environment and tools but also to supported languages and to installed extensions’ behavior (if any). The default settings view provides detailed comment for each available setting expressed with JSON format so that you can easily understand what setting a particular line applies to. You can easily provide custom settings by overriding one or more default settings, writing inside settings.json. Figure 5-5 shows an example where you can see how to change the theme, how to control white characters, how to control characters and breadcrumbs in the code editor, and how to enable the Minimap mode. Also, you will see how IntelliSense helps you choose among available settings as you type. It is worth mentioning that you can search for settings by typing a search key in the Search Settings box. The settings editor will highlight occurrences of the search key as you type .

IntelliSense also allows you to get more information about a given settings by clicking the information icon, which shows hints about the setting with a convenient tooltip exactly as you would expect after learning about IntelliSense’s features in Chapter 3, “Language Support and Code Editing Features.” When done, do not forget to save settings.json otherwise your changes will be lost.

A Real-World Example: Working with Proxies

If you work for an enterprise, the network might probably be behind a proxy server. In this case, you or the system administrator might need to configure Visual Studio Code to work with the proxy. If you do not, you will not be able to download packages, extensions, and product updates. Visual Studio Code should automatically detect proxies and ask for your credentials, but this does not always happen, so you might need some manual steps.

The first thing to do is making sure that the following sites are in the allowed applications list of the firewall:

• vscode-update.azurewebsites.net

• vscode.blob.core.windows.net

• marketplace.visualstudio.com

• *.gallerycdn.vsassets.io

• rink.hockeyapp.net

• vscode.search.windows.net

• raw.githubusercontent.com

• vsmarketplacebadge.apphb.com

The next step is configuring Code to work with the proxy. Actually, if the http_proxy and https_proxy environment variables have been defined at the system level, Visual Studio Code will use their values. If these variables have not been set, you must provide the proxy address in the user settings. In the settings editor, locate Proxy under the Application category. Then, as you can see in Figure 5-6, enter the proxy address in the Proxy text box.

If your proxy also requires an authorization header, this must be specified in the settings.json file, so you have to click the Edit in settings.json hyperlink and then enter the value supplied by your network administrator as the value for http.proxyAuthorization key. Also, flag the Proxy Strict SSL option if the certificate should be verified against the list of supplied certification authorities.

Save your changes and try to see if Visual Studio Code is able to download extensions, packages and libraries required by some languages, and product updates. If you still encounter network issues, you should ask your network administrator to help you configure the proxy settings.

Note

Some protection programs such as Symantec Endpoint Protection block some Visual Studio Code installation (and update) files because they are recognized as Cryptolocker virus instances. Obviously, these are false positives, but you might want to talk to your network administrator to review the protection rules for Visual Studio Code.

Understanding Workspace Settings

Differently from user settings, which globally apply to VS Code’s environment, workspace settings only apply to the current folder. As an implication, you first need to open an existing folder in order to customize workspace settings.

Next you still select File ➤ Preferences ➤ Settings. At this point the settings editor will show two tabs, one for user settings and one for workspace settings, as demonstrated in Figure 5-7.

You customize workspace settings exactly as you do with user settings, so you have not only a second view in the settings editor but also another settings.json file where you can specify your preferences. The settings.json for workspace settings is saved under the .vscode subfolder that Visual Studio Code creates inside the opened folder, restricting settings availability to the current folder only.

Customizing Key Bindings

In the VS Code terminology, key bindings represent shortcuts you use to invoke commands and actions from the keyboard instead of using the mouse. Visual Studio Code includes a huge number of keyboard shortcuts that you can override with custom values. This is particularly useful if you used to work with other development tools and you want to get the same keyboard shortcuts in Visual Studio Code. You will see how to accomplish this by downloading ready-to-use key binding extensions, but it’s important for you to know how key bindings work.

Like user and workspace settings, key bindings are represented with JSON markup, and each is made of two elements: key, which stores one or more keys to be associated to an action, and command, which represents the action to invoke. In some cases, VS Code might offer the same shortcuts for different scenarios. This is the typical case of the escape key, which targets a number of actions depending on what you are working with, such as the code editor or a tool window. In order to identify the proper action, key binding settings support the when element, which specifies the proper action based on the context. You can quickly get the list of current key bindings by selecting File ➤ Preferences ➤ Keyboard Shortcuts. At this point, Visual Studio Code will display a nicely formatted list of commands and shortcuts, as you can see in Figure 5-8 .

In order to customize key bindings, all you need to do is clicking the keybindings.json hyperlink under the search box and edit the keybindings.json file that Code generates for you. The code editor gets split into two views: on the left view, you can see the full list of default key bindings, whereas on the right view, you can override default shortcuts with custom ones (see Figure 5-7).

You can quickly add a custom key binding by clicking the Define Keybinding button or use the shortcut suggested in the button text (which varies depending on your operating system). When you do this, a popup appears and asks you to specify the key binding, as shown in Figure 5-9.

When you press Enter, the JSON markup for the new keyboard shortcut is added, as shown in Figure 5-10.

You will need to edit the command and when elements with the command you want to map and for which scenario. You can look at the original markup on the left to get them both. Actually, the when element is optional. Save your changes to the keybindings.json file to get your new keyboard shortcuts ready.