DEV Community

Cover image for Create a Pull Request from Visual Studio Code on GitHub
Leonardo Montini for This is Learning

Posted on • Updated on • Originally published at leonardomontini.dev

Create a Pull Request from Visual Studio Code on GitHub

Did anyone say the word Productivity? We're all used to the GitHub User Interface so we usually navigate to GitHub, then search for our repository and then click the button to create a Pull Request.

But did you know that you can do all of this from Visual Studio Code? In this article, we'll see how to create a Pull Request from Visual Studio Code in literally two clicks.

This article will also be the first of a trilogy about the Github+VScode workflow, you better stay tuned to see what else you can do! ;)


If you're new to my articles, you know I usually match them with a YouTube video. Fun fact: while recording it I noticed the Visual Studio Code extension had a little bug, the perfect opportunity to contribute to the project and to use the extension to create a Pull Request fixing a bug of the extension itself. I'll tell you more in the video:

In any case, if you don't really like watching videos, I'll do my best to explain everything down here with some screenshots to make it easier to follow.

Install the official GitHub Extension

The first thing you need to do is to install the official GitHub Pull Requests and Issues extension for Visual Studio Code. You can find it in the marketplace by searching for "GitHub" or by clicking here.

GitHub Pull Requests and Issues

Note: make sure to not get confused, the extension called "GitHub" is and old one and deprecated. The new one is called "GitHub Pull Requests and Issues".

As soon as the extension is installed, you'll see a new icon in the Activity Bar on the left side of Visual Studio Code:

GitHub Pull Requests and Issues Icon

Opening it the first time will ask you to login to GitHub, just click on the button and a browser tab will open where you can login to your GitHub account.

Create a Pull Request

Now that you're logged in, you can create a Pull Request from Visual Studio Code by clicking the icon on the top bar:

GitHub Pull Requests and Issues Header

If you're already on a pushed branch, this is the panel that will open:

GitHub Pull Requests and Issues Preview

Merge Changes From

The first panel you will see allows you to select the origin branch that is the one containing the changes you want to merge. By default, it will select the current branch you're on.

You can also select the remote in case you have more than one. In the most common open source situation you'll have your fork and the original repository. In this panel, you might want to select your fork.

Into

Similar to the previous panel it allows you to select a remote and a branch. This time it's the destination. If you're working on your own project the remote will likely be the same as the one you selected in the previous panel, but if you're contributing to someone else's project you'll likely want to select the original repository.

Branch is usually main but make sure to read the project's contribution guidelines to see if there's a specific branch you should use.

Title

You PR's title. By default it will use the message of the last commit, but you can change it to whatever you want.

Description

You PR's description. If the project has a template in .github/PULL_REQUEST_TEMPLATE.md, you will see this box already filled with the template. Similar to the title, you're free to change it.

Create as draft

The final option before the Create button is a checkbox that allows you to create the PR as a draft. This is useful if you want to create the PR but you're not ready to merge it yet.

Create

Once you're happy with the options you selected, you can click the Create button and the PR will be created on GitHub!

Compare changes

Waaaait a moment, before clicking the Create button, you can also open the Compare changes panel right below.

From this panel you can see all changes that will be included in the Pull Request in the diff format you're used to see on vscode, so green files are added, red are deleted and yellow are modified.

Compare panel

Add labels

Aren't labels also supported? I can't see them in the screenshot... well, that's because the button only shows up if you hover the mouse over the top bar.

To be honest I'm not sure this is a feature or a bug, I might open an issue on the extension's repository to ask about it.

Anyway, if you click that button, the quick pick menu will open on vscode letting you select the labels you want to add to the PR from the list of labels available in the repository.

Add labels

And as I mention in the video, this is exactly where I found the bug!

Allow empty labels array to be pushed to set-labels to remove all of them #4637

This PR fixes #4634

If there are no checked labels from the quick pick menu, the command set-labelsis not posted, preventing the possibility to remove all (the last one) selected labels. I didn’t remove the if because labelsToAdd can be undefined if the menu is closed with esc, but the length control is causing the bug hence should be removed.

Creating the Pull Request

Ok, at this point we've seen pretty much everything we needed, we created the Pull Request from the Create button and if you go on GitHub you can see it's there, ready to be reviewed.

Speaking of reviewing Pull Requests... wouldn't be cool if this was also possible from Visual Studio Code? Well, you're in luck, because that's exactly what we're going to see in the next article of this three articles series! Stay tuned!


The video series

As mentioned at the beginning of the article, this is the first of a trilogy about the GitHub+VSCode workflow.

Each article will be accompanied by a video on YouTube, you can find them here:

  1. Create a Pull Request from Visual Studio Code
  2. Review a Pull Request from Visual Studio Code
  3. GitHub Issues on Visual Studio Code

Thanks for reading this article, I hope you found it interesting!

I recently launched my Discord server to talk about Open Source and Web Development, feel free to join: https://discord.gg/bqwyEa6We6

Do you like my content? You might consider subscribing to my YouTube channel! It means a lot to me ❤️
You can find it here:
YouTube

Feel free to follow me to get notified when new articles are out ;)

Top comments (11)

Collapse
 
crisz profile image
crisz

You should change the title into "create a pull request on Github". I mean, the world doesn't orbit around Github only

Collapse
 
balastrong profile image
Leonardo Montini

Thanks for the comment! I didn't want to make the title too long so I added the #github tag below, but probably tags aren't noticed too much.

I specified "on GitHub" in the title :)

Collapse
 
crisz profile image
crisz

Great, better in my opinion :)

Collapse
 
renaldodev profile image
Renaldo Mateus

Amazing article❤️, a tool I've been loving to use is github cli it deals with this perfectly.

Collapse
 
balastrong profile image
Leonardo Montini

GitHub CLI is indeed really cool, I should definitely talk about it in a new article/video :)

Collapse
 
corners2wall profile image
Corners 2 Wall

Looks amazing, I believe that this extension is cool stuff

Collapse
 
balastrong profile image
Leonardo Montini

It is! And I'll show even more in the next two articles :D

Collapse
 
lotfijb profile image
Lotfi Jebali

This is huge, thank you for sharing

Collapse
 
balastrong profile image
Leonardo Montini

Thank you! :D

Collapse
 
krlz profile image
krlz

Wow, this is so exciting! Pre-rendering is definitely the way to go for better performance and SEO. I encourage you to keep exploring this concept !. I particularly love how Next.js allows us to choose between static generation and server-side rendering, depending on our needs. And the fact that we can fetch data at build time is just amazing! Keep up the good work, man!

Some comments may only be visible to logged-in visitors. Sign in to view all comments.