Visual Studio Code for Software Development

Introduction

In the past few years, Visual Studio Code has gained enormous popularity and credibility as a first class development tool. Though the name might suggest a tight coupling with Microsoft technologies, Visual Studio Code (also VS Code or Code) is free, cross platform, and open source. It's not a .NET app, but it is written using Electron, a project from Github that makes it possible to develop desktop apps for Windows, macOS and Linux using web technologies such as HTML, CSS, and JavaScript, or TypeScript. In addition, the range of what you can build with Visual Studio Code extends far beyond .NET apps. The default installation of Visual Studio Code does not provide support for .NET development. Instead, that is added later through one of a large selection of extensions provided by both Microsoft and the community.

This guide will explore features of Visual Studio Code that are not language- or framework-specific.

You've likely heard of Visual Studio, Microsoft's flagship integrated development environment, or IDE. This leads many people to misconceptions that Visual Studio Code is like Visual Studio "Lite," that Visual Studio Code is tied to Windows, or that it has a cost. While Visual Studio is a fantastic product, sometimes you don't need an app with all of the features of Visual Studio. It can be overwhelming. Microsoft has done a great job reducing the required Visual Studio footprint, but if you want a consistent experience across platforms, it's not the tool for you.

Visual Studio Code starts off with just a minimalist experience. As mentioned above, the default install omits .NET app development support. Out of the box it's just a text editor, with a few other essential features that will be useful in practically any project. Let's take a look at the default install.

To download Visual Studio Code, go to https://code.visualstudio.com/.

The page will detect the platform you are using and suggest an appropriate download. You can also see all of the downloads by clicking the drop down menu to the right of the download button.

For production development, use the Stable Build. The Insiders Build contains features that are not quite baked yet. These may not work properly, could crash, and might not ever be included in a stable build. However, both can be installed side-by-side.

Depending on the platform you are using, you may have different installation options. You may want to add Visual Studio Code to the PATH variable on your machine and will see why later in this guide. Visual Studio Code does not depend on GUI features such as wizards and dialogs to guide you during development. Instead, many commands are issued through a terminal or command line window.

Opening Visual Studio Code for the first time, you'll see something like this:

The icons on the left will differ from this example, where several extensions are installed, but the overall UI should look the same. Go to File -> New File, or press Ctrl-N / Cmd-N (all shortcuts in this guide will be for macOS) to open a new file in a new tab. Next, press Ctrl-B / Cmd-B to open the sidebar to the left. Finally, use the shortcut Ctrl-` on all platforms to open a terminal windows below the editor.

These are the most basic parts of Visual Studio Code. The above example emphasized keyboard shortcuts for navigating the UI. You could accomplish the same result with mouse clicks, but it's much faster to use keyboard shortcuts. As a developer, you can't avoid typing, but you can reduce the number of mouse clicks.

The terminal window has opened up a PowerShell Core prompt. PowerShell Core is an implementation of Windows PowerShell that, like Visual Studio Code, is cross-platform, so the user experience is consistent on Windows, macOS, and Linux. However, with Visual Studio Code you can select the default shell you want to use. This brings up the first use of the Command Palette which is accessed with Ctrl-Shift-P / Cmd-Shift-P.

Start typing into the search bar to see potential matches. For this example, the command to select the default shell is Terminal: Select Default Shell. The command will detect the available shells on your system and prompt you to select one.

You'll use the Command Palette extensively inside of Visual Studio Code.

Another useful keyboard shortcut is Ctrl-P / Cmd-P to quickly open files when a folder or directory is open in the Explorer pane. If the Explorer pane is not visible, use the shortcut Ctrl-Shift-E / Cmd-Shift-E. You could open a folder by clicking on the Open Folder button and using the native file system navigation dialogs, but we're trying to be productive and use the keyboard. In the terminal, navigate to the directory you want to open and the run the command :

Here you'll see why you installed the Visual Studio Code to the PATH. The code command will start Visual Studio Code from the command line. The -r option will reuse the existing instance instead of opening a new one, and the . is the path to the directory. You could of course pass a path relative to the current directory and then add a couple of plain text files to the directory. Here is how to do that with PowerShell Core :

The files will be shown in the Explorer pane.

You can create new files and directories by right-clicking in the Explorer, but it's often easier to transition to the next step if you keep your hands on the keyboard. Press Ctrl-P / Cmd-P and begin typing the name of a file.

Notice that Visual Studio Code matches the file name, regardless of the path. Therefore, file4.txt is still matched, even though it is in another directory. Getting used to using this shortcut will save you a lot of time.

Using a source control system is part of every developer's workflow these days. Visual Studio Code comes out of the box with integration for Git. If the directory open in the Explorer is a Git repository, Visual Studio Code will recognize it as such and you can track changes, make commits and more from the Source Control pane (Ctrl-Shift-G / Cmd-Shift-G).

Currently there is no Git repository for this directory. Create one by clicking the Initialize Repository button or the command line. The Source Control pane updates to show the untracked status of the files. The icon for the Source Control pane shows the number of changes.

As the hint in the text box suggests, add a commit message and press Ctrl-Enter. Accept the offer to automatically stage changes when committing by clicking Yes. The changes are now committed and the Source Control pane is empty. If you are working with a service such as Github, you'll want to push these changes to the cloud. Click the three dots in the upper right and select Push.

As you can see, there are other options to pull new changes, create branches and other Git tasks and more extensions for Git in the Visual Studio Code Marketplace such as GitLens.

This extension will add additional features to Visual Studio Code that will show ownership of changes in the editor and more.

The last section showed how to push changes in a Git repository using the mouse. You could do the same thing by opening the Command Palette and searching for Git: Push.

But pushing changes is something that you'll do a lot during development. This is a good opportunity to take advantage of custom keyboard shortcuts. Press Ctrl-K followed by Ctrl-S to open the Keyboard Shortcuts tab.

The existing shortcuts will be shown first, and you can change these. But first, search for the Git: Push command.

Use the arrow keys to highlight the first item in the list, and press Ctrl-K twice.

A dialog box will prompt you to enter a new shortcut. If you enter one that already exists, such a Ctrl-X, you'll be warned.

In this case, either choose a new shortcut or add a second.

Press Enter and you'll be able to push changes by pressing Ctrl-X followed by Ctrl-G and save your hands some travel time.

This guide only scratches the surface of the functionality of Visual Studio Code. There are many more commands and extensions that you may find applicable. Watch for future guides that will show even more ways that you can use Visual Studio Code. Thanks for reading!