Installing Extensions

You have two ways of browsing and installing extensions: from the Visual Studio Marketplace and from within Visual Studio Code. The Visual Studio Marketplace is a web site that contains extensions for the most popular Microsoft development tools and services, such as Visual Studio, Visual Studio Code, and Visual Studio Team Services. It is available at https://marketplace.visualstudio.com , and you will need to click the Visual Studio Code tab to see a list of extensions for Visual Studio Code. Figure 6-1 shows the Marketplace for Visual Studio Code.

You can search for extensions by typing in the search box, or you can use the groups below, such as Featured, Trending, Most Popular, and Recently Added. Once you have found an extension of your interest, click its name and you will see a detail page. Figure 6-2 shows an example based on the C# extension by Microsoft.

An extension’s page provides a detailed description and guidance about using the extension, often providing links to additional documentation, resources, and to the source code (if open source). I strongly recommend you to read the detail page to get information about what the extension includes, especially with extensions that add language support, because it is important to know if there is only support for a new syntax or also for IntelliSense, code snippets, and debugging.

If you click the Install button, the download link will be opened by Visual Studio Code for easy installation. You can also download the offline installer of the extension for later reuse. To do so, click the Download Extension hyperlink under the Resources group, on the right of the page. In this way you will be able to download a .vsix installer file that you can then launch manually.

The second way of installing extensions is from within Visual Studio Code. You can open the Extensions bar and search for an extension, then you can click a specific extension to get the details, as shown in Figure 6-3.

You can click the Install button when ready. You will need to click the Reload button (that appears once the installation completes) to enable the extension in VS Code. You can also filter the search results; for instance, if you type category:linters in the search box, Visual Studio Code will list all the extensions that provide linting support with syntax colorization to specific languages. You can use the same category names you see in the Visual Studio Marketplace.

As an alternative, you can use the Command Palette to download (and manage) extensions. You can open the Command Palette, type in ext, and a list of self-explanatory commands related to extension management will appear. You will typically prefer working with extensions from the Command Palette when you do not want to lose focus on the active editor window, otherwise using the Extensions bar’s user interface is definitely easier.

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.

Managing Extensions

The Extensions bar allows you to quickly manage extensions. It shows the list of installed extensions, as shown in Figure 6-5. Then, for each extension, the button with the gear icon opens a popup menu that contains commands for disabling or uninstalling an extension.

You can also click an extension name, and the detail page will show the Disable and Uninstall buttons. Notice that every time you disable or uninstall an extension, you will need to click a button called Reload (that appears when the extension has been disabled or uninstalled) to refresh the development environment. It is worth mentioning that you can change the default view of the Extensions bar (displaying the list of installed extensions) by clicking the … button at the top of the EXTENSIONS group. When you click this button, a popup menu appears showing different options, such as viewing popular extensions, as well as commands for searching extension updates and installing extensions from .vsix files.

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.

Hints About Extension Authoring

You can build extensions for Visual Studio Code and share them through the Marketplace. You can basically build any type of supported extension, such as language support, editing features, themes, code snippets, debugger adapters, and key bindings. You will also need to register as a publisher on the Visual Studio Marketplace, which requires you to have a Microsoft account.

Extensions are usually written with TypeScript and, for most of them, you can use an extension generator such as the Yeoman tool on Node.js. As you can imagine, extension authoring is a complex task, and it is out of scope in a book from the Distilled series. If you are interested in extension authoring, you can walk through the official documentation ( https://code.visualstudio.com/docs/extensions/overview ) which provides examples and guidance for many scenarios.

Summary

Extensibility is a key feature in Visual Studio Code, because it allows adding power to the development environment. Extensions can add new languages (with or without rich editing support), debuggers, keyboard shortcuts, themes, code snippets, and tools. You can install extensions from the Visual Studio Marketplace or from within Visual Studio Code, through the Extensions bar or the Command Palette.

Visual Studio Code can also provide extension recommendations based on the context, for example, when you open a file written in a language for which there is no built-in support. Visual Studio Code makes it also simple to manage extensions with shortcuts to disable and uninstall extensions but also with configuring extensions’ behavior via the user settings file. In the next chapter, you will see how to leverage extensions to add features to Visual Studio Code to another core feature that makes it a step forward compared to its competitors: version control with Git.