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.
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:
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:
If you're already on a pushed branch, this is the panel that will open:
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.
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.
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:
- Create a Pull Request from Visual Studio Code
- Review a Pull Request from Visual Studio Code
- 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:
Feel free to follow me to get notified when new articles are out ;)
Top comments (11)
You should change the title into "create a pull request on Github". I mean, the world doesn't orbit around Github only
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 :)
Great, better in my opinion :)
Amazing article❤️, a tool I've been loving to use is github cli it deals with this perfectly.
GitHub CLI is indeed really cool, I should definitely talk about it in a new article/video :)
Looks amazing, I believe that this extension is cool stuff
It is! And I'll show even more in the next two articles :D
This is huge, thank you for sharing
Thank you! :D
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.