GitHub Workflow Integrations: Using GitHub for Visual Studio Code

One of the fastest growing editors is Visual Studio Code (VS Code for short). With more than 2.6 million active users in the first 12 months in 2017, you have probably either used it or at least heard about it. Like Atom, VS Code is open source, which means you can see the development of new editor features at https://github.com/microsoft/vscode. In 2018, Microsoft and GitHub teamed up to build an open source GitHub editor extension that provides an in-editor pull request experience.

After you install VS Code, you can install this extension by going to the extension marketplace, searching for GitHub, and clicking the green install button for the GitHub Pull Requests extension, as shown in Figure 13-8.

You have to reload the VS Code window after you install the extension. Reloading should take only a couple of seconds, and if you have any projects already open, it shouldn’t be a problem.

After you install the extension, you can sign in to GitHub. You can sign in to GitHub in three ways (see Figure 13-9):

» Click the Octocat button at the bottom left of the VS Code window.

» Click the notification at the bottom right of the VS Code window.

» Use the Command Palette, which you can open by pressing gg+Shift+p and searching for the sign in by typing GitHub.

The sign-in process opens a web browser where you can authorize VS Code to access your GitHub repositories. Click through the prompts, and it redirects you back to VS Code. After you’re back in VS Code, you get a pop-up notification asking whether you trust the URL; click Yes.

1. Interacting with pull requests in VS Code

After you’re signed in, when you go to the Source Control tab on the left side of VS Code, you should see all the pull requests associated with this repo. Pull requests are grouped into five different sections:

» Ones that you currently have checked out

» Ones where you are marked as a reviewer

» Ones that you’re assigned to

» Ones that you created

» A list of all pull requests

When you unroll a specific pull request, you see the description of the pull request, along with all the modified files.

Clicking the description of the pull request displays the description as you would see it on GitHub, as shown in Figure 13-10. From this page, you can check out the pull request, leave a comment, merge or update the pull request, or complete a review. You have the entire pull request experience right inside of VS Code!

Another feature of this extension is the ability to add inline comments to the diff. Clicking a specific modified file shows you the side-by-side diff, just as it would look on GitHub.com. From here, you can add a comment to any of the modified lines, as shown in Figure 13-11. All these actions are reflected on GitHub.com.

2. Following the GitHub for VS Code pull requests extension

Because this extension is also open source, you can follow the development, report issues, or even contribute to it on GitHub.com. Go to https://github.com/Microsoft/vscode-pull-request-github to find the latest features and docu­mentation for how to use this extension to improve your development workflow.

The VS Code and GitHub teams working on this extension often use a tracking issue to track what they’re working on. You can find the most recent iteration plan for this project by going to the Issues tab on the GitHub repo and filtering the issues by the label iteration-plan.

Source: Guthals Sarah, Haack Phil (2019), GitHub for Dummies, Wiley.

Leave a Reply

Your email address will not be published. Required fields are marked *