September 10, 2018 Kenneth Auchenberg, @auchenberg
Like many other open-source projects, the Visual Studio Code community collaborates through pull requests to land fixes and new features. Starting this past spring, our team has been working to bring you a new integrated pull request experience so that you can collaborate, comment, review, and validate GitHub pull requests directly from within Visual Studio Code.
Today, we are announcing the public preview of GitHub Pull Requests for Visual Studio Code, closing a gap in the workflow that we and millions of engineers experience every day: The ability to review source code where it was written – inside the editor.
Review and manage Pull Requests
- Sign in to GitHub by using Visual Studio Code. Use Visual Studio Code to search GitHub for repos. Clone a repo from Visual Studio Code. Publish a local project to GitHub by using Visual Studio Code.
- Open the GitHub pane by typing GitHub into Visual Studio Quick Launch (Ctrl+Q). Create Pull Requests from Visual Studio Turn a branch into a Pull Request directly from Visual Studio. In the GitHub pane, click the Create New link to create a new Pull Request on GitHub.
View Pull Requests in Visual Studio. View all of the Pull Requests for your project in the GitHub pane, and sort and filter them by Open/Closed state, Assignee and Author. Open the GitHub pane by typing GitHub into Visual Studio Quick Launch (Ctrl+Q).
The new GitHub Pull Requests extension is designed to help you review and manage pull requests (PR) from within Visual Studio Code, including:
- Ability to authenticate and connect Visual Studio Code to GitHub.
- List and browse PRs from within Visual Studio Code.
- Interact with PRs in-editor, including in-editor commenting with Markdown support.
- Validate PRs from the editor with a new local
checkout and runworkflow for rich language features such as Go To Definition and IntelliSense. - Terminal integration so that the Visual Studio Code UI and command-line tools like
gitcan co-exist.
Collaboration with GitHub
As part of our broader efforts to bring pull requests into Visual Studio Code in the past year, we reached out to numerous partners. After learning that the GitHub Editor team was already thinking along these lines, we began to work together in April to create a new pull request experience in Visual Studio Code. We developed a new extension to create and review pull requests integrated directly into Visual Studio Code through a set of new Visual Studio Code extension APIs.
A more natural PR experience
Today when reviewing source code, many of us are forced to leave our editors to use a simplified web interface or third party review tool that presents changes in a different editor. This makes it easy to get a visual overview of the changes, but most of the time you don’t have full context of where the changes were made and how they affect surrounding source code. Being outside of your normal coding environment also means that you don’t have your favorite keyboard shortcuts, themes, and customizations. More importantly, it means that you don’t have an environment with the power to navigate the source code and validate that the changes you are reviewing actually work as expected.
The new pull request extension changes this with a new Pull Requests explorer inside the Source Control view in Visual Studio Code, where you can browse and interact with pull requests.
New open extension APIs
Our new pull requests experience is powered by a set of extension APIs that allow Visual Studio Code extension authors to create extensions that manage pull requests and their related metadata. This open extension model means that pull request providers work just like our existing source control providers and anyone can write an extension for Visual Studio Code that provides in-editor commenting and capabilities to review source code hosted on their platform. You can read more about the new APIs in our August 2018 release notes.
If you are interested, you can read more about how we are introducing new APIs, and the details for our extension API process here.
Going forward
We are excited about bringing pull requests into Visual Studio Code, as we believe it will simplify the way you review source code. Our GitHub extension is just the first example of integrating source control platform providers for code reviews in Visual Studio Code.
Please try out the public preview of GitHub Pull Requests for Visual Studio Code, and as always, we are eager to hear your feedback, so don’t hesitate in reaching to us on GitHub or @code on Twitter.
One more thing, today we are also releasing Azure DevOps, and the new Azure Pipelines extension on the GitHub Marketplace. For more information, visit https://aka.ms/azurecicd.
Kenneth Auchenberg (Microsoft), Rachel Macfarlane (Microsoft), Kai Maetzel (Microsoft), Peng Lyu (Microsoft) , Sarah Guthals (GitHub) and Andreia Gaita (GitHub)
and on behalf of the Visual Studio Code team:
Happy Coding!
Overview
GitHub has grown from being a fledgling source control provider into a formidable DevOps solution in just a few short years. Along with the portal experience, GitHub provides great integration for apps like Visual Studio to deliver a superior experience integrated within the environments developers spend their days in. In this lab, you’ll learn about GitHub support in Visual Studio 2019.
If you’d like to learn more about the basics of Git, please check out this lab.
Prerequisites
In order to complete this lab you will need the Azure DevOps Server 2019 virtual machine provided by Microsoft. Click the button below to launch the virtual machine on the Microsoft Hands-on-Labs portal.
Alternatively, you can download the virtual machine from here.
Exercise 1: Getting Started with GitHub using Visual Studio 2019
Task 1: Setting up a GitHub project
Log in as Sachin Raj (VSALMSachin). All user passwords are P2ssw0rd.
Install Google Chrome from https://google.com/chrome. GitHub does not support Internet Explorer, so use Chrome for the remainder of this lab.
Fork the project at https://github.com/Microsoft/PartsUnlimitedE2E into your own account.
Select the Settings tab.
Enable Issues by checking its box.
Select the Issues tab.
Click New issue.
Create a new issue called “Update to v2.0” and click Submit new issue. Fixing this issue will be the focus of this lab.
Note the ID of the newly created issue.
Task 2: Cloning and configuring a GitHub project in Visual Studio
Open Visual Studio.
Click Continue without code. Note that you also have the option to start the cloning experience from the welcome dialog.
From Team Explorer, click the Manage Connections button.
Under GitHub, click Connect. Complete the process to sign in to your GitHub account.
Click Clone.
Select the project cloned earlier and click Clone.
After logging in, Team Explorer lights up with a variety of shortcuts and features to make your experience with GitHub as seamless as possible. Many of the buttons are shortcuts to the GitHub portal page for this project, such as Pulse, Graphs, and Wiki. Click Settings.
You can configure settings at two levels. Click Global Settings to review those first.
The Global Settings view provides a way for you to set global defaults that apply to all projects. In this case, the User Name and Email Address are already configured. However, you may want to change them for your instance. Click the Back button.
Click Repository Settings.
These settings are specific to the current project. Click the Home button.
Task 3: Exploring GitHub version control integration
Visual Studio And Github
To get started on the work item created earlier, click Branches. The work will be done on a separate branch and merged in after a review.
Right-click the master branch and select New Local Branch From.
Set the name to “dev” and click Create Branch.
The new branch will be checked out after creation. Note that you can see the current branch and perform common options using the button at the bottom of the window.
Right-click the dev branch and select Push Branch. This will push the locally created branch to the server.
From Solution Explorer, search for “_layout” and open the _Layout.cshtml from the PartsUnlimitedWebsite project.
Add “v2.0” to the h1 tag text and Save the file.
In Team Explorer, switch to Changes.
The source change made earlier will be shown here. Enter a commit message of “Updated to v2.0” and select Commit All | Commit All and Sync. This will commit your change and push it to the server.
Task 4: Exploring GitHub pull request integration
Visual Studio And Github
Although the dev branch has been updated with the necessary change, it still needs to work its way back in to the master. This can be done with a pull request. Click the Home button.
Click Pull Requests to start the pull request process.
Click Create New to create a new pull request.
Set the branch to merge into to master from your project. Note that it will default to the Microsoft project, which you do not want to use. Set the comment to “Fixes #1.”. Note that you may need to replace the #1 with the ID created earlier if it were different. By tagging the pull request with the issue ID, you can automate closing the issue later on when the request is merged. Click Create pull request.
From the project dropdown, select the forked version in your GitHub account.
The newly created pull request will be visible. Double-click it to open.
The pull request view includes all the information you need to review changes and make comments. Double-click _Layout.cshtml to open it in the diff viewer.
The diff viewer makes it easy to understand what changes were made and where.
You can also leave line-level comments. Click the Add Comment button at the changed line and add a comment. Click Start a review.
Your review is now visible as part of the pull request. Click Continue your review.
Enter a review summary and select Submit review | Comment only.
In the GitHub browser window, select the Pull requests tab.
Click the pull request to open it.
All of the information added from Visual Studio is visible in the pull request. Others can comment or review the changes as well. Click Resolve conversation to resolve the comment left during your review.
Click Merge pull request.
Confirm the merge.
Navigate back to the Issues tab. Note that the issue created earlier has been closed now that the pull request was approved.