Source Control in Visual Studio Code

Visual Studio Code supports different source control providers via extensibility, but it offers integrated support for Git. Git ( https://git-scm.com/ ) is a very popular distributed, cross-platform version control engine that makes collaboration easier for small and large projects. One of the reasons for its popularity is that Git is open source, and therefore it has always been loved by large open source communities.

Visual Studio Code works with any Git repository, such as GitHub or Visual Studio Team Services, and provides an integrated way to manage your code commits.

Notice that this chapter is not a guide to Git; rather it is a place to learn how Visual Studio Code works with it, so for further information, visit the Git official page. Also, remember that Visual Studio Code requires the Git engine to be installed locally, so make sure it is available on your machine or download it from https://git-scm.com/downloads . In order to demonstrate how Git version control works with Visual Studio Code, I will use a small TypeScript project called Greeter, available in the TypeScript Samples repository from Microsoft ( https://github.com/Microsoft/TypeScriptSamples ). You can download the repository on your system and extract the Greeter subfolder on your disk. Obviously, you are totally free to use another example or another project of your choice, regardless of the language. At this point, open the project in Visual Studio Code to start collaborating over the source code.

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.

Managing Repositories

With Git, version control requires both a local and a remote repository to work. This section explains how to create both, supplying information that you will not find in the documentation especially for remote repositories.

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.

The next step is associating the local repository to the remote one by typing some Git commands. This can be accomplished directly within VS Code, through the Terminal (Terminal ➤ New Terminal). When the Terminal is ready, type the following command:

> git remote add origin https://github.com/YourAccount/YourRepository.git

where YourAccount represents your GitHub account and YourRepository represents the name of your repository, such as GreeterDistilled in the current example. This command associates the local repository with the remote repository. The next command you have to type is the following:

> git push -u origin master

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.

Handling File Changes

Git locally tracks changes on your code files, and the Git icon in VS Code shows the number of files with pending changes. This number is actually updated only after you save your files. In Visual Studio Code, handling file changes is very straightforward. In Figure 7-6 you can see how the number of changes is highlighted in the Git icon but also how files that have changes are marked with a brown M (where M stands for Modified), whereas deleted files are marked with a red D (where D stands for Deleted).

By clicking a file in the list, you can see the differences between the current and previous versions of the file with the Diff tool. Figure 7-7 shows an example.

On the left side, you have the old version, while the new one is on the right. The line highlighted in red represents code that has been removed, whereas the line highlighted in green represents new code. This is a very important tool when working with any version control engine.

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.

Managing Commits

The … button provides access to additional actions, such as Commit, Sync, Pull, Stash, and Pull (Rebase). Figure 7-9 shows the full list of built-in Git synchronization commands available in VS Code.

When you are satisfied with your work on the source code, you can select the Commit All command to commit your changes. Remember that this action commits files to the local repository. You have to use the Push command in order to send changes to the remote repository. You also have an option to undo the last commit and revert to the previous version with the Undo Last Commit command. Pull and Pull (Rebase) allow to merge a branch into another branch; Pull actually is nondestructive and merges the history of the two branches, while Pull (Rebase) rewrites the project history by creating new commits for each commit in the original branch. The Sync command performs a Pull first and then a Push operation, so that both the local and remote repositories are synchronized. There is also a command called Stash, which allows for storing modified tracked changes and staged changes in a cache, so that you can switch to another branch while having unfinished work on the current branch. Then, with the Pop Latest Stash and Pop Stash commands, you can retake the latest version of your unfinished work and a specific version of the unfinished work, respectively. Every time you work with Git commands, such as Commit and Push, Visual Studio Code redirects the output of the Git command line to the Output panel. Figure 7-10 shows an example.

You will need to select Git from the dropdown in the Output panel in order to see the Git output. You can also open the Output panel using the Show Git Output command from the popup menu as you can see in Figure 7-9.

Working with the Git Command Line Interface

The Command Palette has support for specific Git commands which you can type as if you were in a command line terminal. Figure 7-11 shows the list of available Git commands, which you can see by typing Git in the Command Palette. The list is quite long and cannot be totally included in Figure 7-11, but you can scroll it to see all available commands.

For instance, you can use Git Sync to synchroniz the local and remote repositories, or you can use Git Push to send pending changes to the remote repository. A common scenario in which you use Git commands is with branches.

Creating and Managing Branches

For a better understanding of what a branch is, suppose you have a project that, at a certain point of its lifecycle, goes to production. You need to continue the development of your project, but you do not want to do it over the code you have written so far.

You can create two histories by using a branch. When you create a repository, you also get a default branch called master. Continuing with the example, the master branch could contain the code that has gone to production, and now you can create a new branch, such as development, based on master but different from it. In Visual Studio Code, you have different options to create a new branch. The first option allows creating a branch from the Command Palette, where you can type Git branch. Then select the Git: Create branch option, and you will be asked to specify a new branch name, such as development. This will create a new branch locally, based on master. The second option is clicking the current branch name in the status bar (master in this case) and then click the Create new branch command (see Figure 7-12).

You will need to enter the new branch name, and then press Enter. When a new branch is created, the status bar shows it as the active branch; when you are ready, you can publish the new branch to the remote repository with the Publish Changes button, represented by the cloud icon (see Figure 7-13).

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).

Note

Remember that the branch that receives the merge is the active branch, so make sure you have switched to the proper branch before starting a merge operation.

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

Adding Power to the Git Tooling with Extensions

The integrated tools for Git cover all the needs that you, as a developer, can have when working with local and remote repositories to manage your source code, but there are extensions that provide additional power to the integrated tools.

This section describes the most useful free extensions that will improve your collaboration experience in Visual Studio Code.

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.

Note

If the commit authors have associated a picture to the Git credentials, Git History will show the picture near the author name.

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.

Note

All the preceding commands described are also available via shortcuts that you can find on the upper right corner of the code editor bar (see Figure 7-21).

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.

Working with Azure DevOps and Team Foundation Server

Azure DevOps ( https://azure.microsoft.com/en-us/solutions/devops ), formerly Visual Studio Team Services, and Team Foundation Server are the complete solutions from Microsoft to manage the entire application lifecycle, from development to testing to continuous integration and delivery. Azure DevOps is a cloud service, whereas Team Foundation Server works on premises. Among the many features, they both provide source control capabilities based on two engines: Git and the Microsoft Team Foundation Server engine.

In this section I will explain how to configure a Git repository that you can use for source control with Visual Studio Code. I will use Azure DevOps so that you do not need to have an on-premise installation of Team Foundation Server.

Before going on reading, you will need to install the Visual Studio Team Services extension for Visual Studio Code, following the steps you are already familiar with. This extension suits for both Azure DevOps and Team Foundation Server.

You obviously need an account on Azure DevOps, which you can create by using a Microsoft account. If you do not have one, you can get a Microsoft account at www.outlook.com , and then you can get an account on Azure DevOps at https://aka.ms/SignupAzureDevOps . Follow all the instructions required to configure your account for the first time. When in the home page, click the Create Project button. As you can see in Figure 7-24, you will need to supply a team project name, a source control engine, and a work item process.

Enter a project name of your choice, such as VS Code in the example, and make sure that Git is selected as the source control engine. Leave Agile as the choice for the work item process, and finally click Create. After a few seconds, your new team project will be ready. At this point, the Azure DevOps site will show a page with all the information about your new Git repository. Before cloning the repository on your local machine, a good idea is providing your Azure DevOps credentials to Visual Studio Code. To accomplish this, in VS Code open the Command Palette and type > Team Signin. The login popup will appear, so enter the Microsoft account credentials you used to set up your Azure DevOps workspace and wait for VS Code to authenticate. Now, if you go back to the web portal, you will simply need to click the Clone in VS Code button (see Figure 7-25).

By clicking this button, you will be asked to grant VS Code the permission to open the remote repository. When permission is granted, VS Code will ask you to specify a local folder for cloning the remote repository. Once you have specified the folder, the cloning process will start, and after it completes, you will have both a remote and a local repository. The target folder will be opened in Visual Studio Code after cloning the repository, and you will now be able to use all the Git capabilities described in the previous sections. Moreover, the extension adds a few shortcuts to the status bar, as you can see in Figure 7-26.

More specifically, from left to right, after the branch name and the Synchronize Changes button, you can see the name of the team project, then a shortcut that allows for browsing pull requests on the web portal, a shortcut for opening build definitions on the web portal, a shortcut for viewing pinned work items, and a feedback button you can use to share your thoughts about the extension.

Though most of the operations that are not strictly related to Git, such as opening build definitions and work items, must be done in the web portal, both Azure DevOps and Team Foundation Server are very popular and widely used services among enterprises, so having an option to connect them to Visual Studio Code so easily will save you a lot of time.

Summary

Writing software involves collaboration. This is true if you are part of a development team but also if you are involved in open source projects, or if you are an individual developer who has interactions with customers. In this chapter you have seen how Visual Studio Code provides integrated tools to work with Git, the popular open source and cross-platform source control provider.

You have seen how to create a local repository with the Git bar and how to associate it to a remote repository with a couple of commands from the integrated terminal. Then you have seen how you can handle file changes, including commits, and how you can create and manage branches directly from within the environment. In addition, you were introduced to some useful extensions, such as Git History, Git Lens, and GitHub Pull Requests, that will boost your productivity by adding important features that every developer needs when it comes to team collaboration. Finally, you have seen how easy it is to open in VS Code a Git repository hosted on Azure DevOps, the premiere cloud solution from Microsoft to manage the whole application lifecycle. Behind the scenes, Visual Studio Code invokes the Git command in order to execute operations over your source code, and it is preconfigured to work with this external tool.

However, it is not limited to work with a small set of predefined tools, rather it can be configured to work with basically any external program. This is what you will learn in the next chapter.