Install and tour Visual Studio Code

Install and tour Visual Studio Code

To begin, let's download and install VS Code locally, then take a short tour of the user interface (UI) and features. We recommend you perform these steps on your own installation, but you can read through the Tour section without following along if you prefer.

Download

Browse to https://code.visualstudio.com and select the stable build for your platform. The Insiders Edition is like using a beta test version of the next update, but is not applicable for this learning module. If you don't see your specific platform, select Other downloads to see all currently supported builds.

Install

During installation, be sure to check out the options presented and select any opt-in features you'd like. These options are mostly for convenience and personal preference, so you can accept the defaults to simplify your installation. Below are the Windows options and their defaults.

Take a moment on first run to check for available updates. On Windows, this can be easily done using the Help pulldown menu and selecting Check for Updates. This option may appear in other pulldown menu locations on other platforms.

Tour

Let's take a look at a few key features of the user interface, and a short tour of VS Code's core functionality. When you first run VS Code, you should see a "Welcome" page similar to the screenshot below. If you don't see the Welcome page, you can access it using the Help > Welcome dropdown menu item.

User interface

The first thing you'll probably notice is how simple the interface seems to be. This is intentional, but hides the true power of this editor. For now, familiarize yourself with the main UI components.

One UI function you are likely to find quite valuable is the Command Palette (F1 on any platform, Ctrl + Shift + P on Windows, and listed under the View dropdown menu). It's a great starting place if you have an idea what you'd like to do in VS Code, but can't recall exactly how to do it.

By default, the Command Palette comes up in Command mode, signified by the > prompt. This mode includes most VS Code functionality, including finding keyboard shortcuts. But there's far more available here. For a list, press F1 + backspace to remove the command prompt (>) and type a question mark (?). Take a moment to explore these modes if you'd like.

Color themes

Changing the look of your editor is a big deal to most of us. VS Code makes it easy with Themes. On the Welcome page, select Color theme under Customize and you'll see something like the following.

 Note

You can also get to this list in other ways, such as the Command palette, pulldown menus, and keyboard shortcuts.

Take this opportunity to try our different color themes. If the default themes aren't satisfying for you, there are many extensions to bring even more visual functionality into the UI.

Tools and extensions

Click on the Tools and languages topic under Customize and you'll see the left pane expand to show the current list of available extensions, similar to what you see below. You can also use the View menu and select Extensions. Note that the first option adds the filter @category:"programming languages" to the extensions list, to show only extensions in that category. You can edit this filter yourself, or clear it with the Clear Extensions Input button (highlighted in the screenshot below).

We won't install any of these right now, but feel free to take a moment to scroll through the list to get an idea of the varied options available. We'll discuss extensions in more depth in the next unit.

Use and install extensions

In this unit, you'll learn how easy it is to locate and install Visual Studio Code (VS Code) extensions. As seen previously, VS Code installs with many built-in extensions, but it does not come bundled with support for every development language and environment. By using the Extensions Marketplace, you can locate the tools, languages, and debuggers you need for your particular workflow and personal preference. Additionally, there are many extensions that add to the powerful features of VS Code for even greater customization and control, efficiency, and maybe even some fun.

Extension Marketplace

In the previous unit, you saw the default list presented when you access the Extension Marketplace. Let's look more closely at that, and install a few things.

Searching for extensions

On the left of the VS Code UI is the Activity Bar. If you do not see an Activity Bar, toggle it on by navigating the pull down menu sequence: View > Appearance > Show Activity Bar. The Extensions icon is the highlighted icon in the following graphic.

By default, all activity icons are showing. If you don't see this icon, right-click in the vacant area of the Activity Bar to see the list of available icons, and select Extensions. Open the Extensions list by selecting the icon shown below.

 Note

There is a keyboard shortcut for extensions. Hover your mouse over the Extensions icon to see yours (varies by platform).

Since this is your first time installing any extensions, you'll see only a list of popular extensions on the marketplace.

This list is one way to browse, but with so many extensions available, it's usually quicker to use the Search box at the top.

To give you an idea of the variety of choices available for a given category of extensions, type icons in the search box. You should see many pages of extensions, sorted by default order (a combination of install count and rating). You can sort more specifically by choosing a sort from the ellipsis icon (...) in the upper-right corner of the Extensions area.

Installing and managing extensions

Installing is as easy as clicking the Install button on an extension entry in the Marketplace. Let's install a few now. Use the Search box to locate the extensions listed below, and then use the Install button on each (we'll get into the function of each of these later):

• Material Theme
• Prettier Now
• Bracket Pair Colorizer
• Live Server

While installing, removing, disabling, and enabling extensions, the button may change into a Reload button. Be sure to select it if applicable.

Material Theme

Just for fun, let's play around with this one a little bit. Once it's installed and ready, bring up the Color Themes (remember, there are many ways to get there, from pull-down menu sequences to keyboard shortcuts and the Welcome page). We use the direct shortcut Ctrl-K, Ctrl-T (Cmd-K, Cmd-T on macOS). Now use the up and down arrow keys to change the theme. You'll see the change immediately as you select new themes. Try out some of the Material Themes that now appear in the list to find one you like. Even if you don't select one you prefer now, if you're like many of us, you'll eventually enjoy a quick change to the color theme once in a while. Adding lots of choices can help you with this, so feel free to add more themes.

This extension is here to illustrate customization features. You can safely remove or disable it if you don't like it.

Prettier Now

This extension is a beautifier. In case you aren't already aware, this term refers to an editor's ability to format your code automatically using certain rules the designer has decided work well for the type of code you're' working with, so it can be a subtle but powerful tool to use. There are many beautifiers available in the Extensions Marketplace, but this one has a lot of options and is easy to use.

Again, if you don't care for this extension, feel free to disable it or choose a different one.

Bracket Pair Colorizer

As with the beautifier and theme we installed, this is an extension that can help you code more efficiently with visual feedback, but isn't required for web development. However, this extension can truly save you a lot of time troubleshooting, and provide your eyes some relief.

Live Server

This extension provides a local development server with a live reload feature for static and dynamic pages. This greatly eases web development by providing real-time updates to your content in a web browser. As with most extensions, there are other choices for this functionality in the Marketplace, but we'll use this one for now.

This is the only extension here that we'll be using in later units, and other modules might also direct you to install it or a similar extension. Next, we'll put together a simple web page and you'll see how this extension works.