We all know that Visual Studio Code (VS Code) is the BEST overall text editor out there, but even with that- most people still are not aware of all of its amazing features. We’re going to dive into what I believe is one of the most powerful ones, the built-in version control tools for VS Code. We’ll look at how you can utilize them to save time on running those repetitive git terminal commands. Let’s jump into it!
The version control tools in VS Code are extremely powerful and there is no way we could cover them all in one blog post, so today we’re going to talk about some of the most basic ones that will help you be more productive from day one! Also, for the purposes of this blog the git platform we will be working with is GitHub, because 1) I do what I want and 2) GitHub is the most widely-used at this time. But know that VS Code has the ability to work with nearly every git-based platform.
Cloning a Repo from GitHub
Cloning a repo from GitHub is something that Software Engineers will do very frequently. A coding boot camp student like myself will even do it multiple times a day for different labs and assignments that come along with the curriculum. We all know the drill, go get the clone link, cd to where we want to store the repo on our system, then run “git clone” and paste the link, then cd into the newly cloned folder and open it up, blah blah blaaahhh. Now… see how simple and quick this can be with using VS Code instead. Here is where we would get our clone link:
But instead of running the terminal commands, we simply do this:
Isn’t that amazing??!! All of those terminal commands narrowed down to just a few clicks. But this is just the beginning!
Staging, Committing, and Pushing
Let’s say you’re working on a project that is being hosted in a remote repository on GitHub. You have edited multiple files, and now you’re ready to make a commit so that all of your world-class code is saved forever. Normally to do this you would have to run multiple terminal commands such as:
- git add . / or git add <file-name>
- git commit -m “whatever-commit-message”
- git push origin master
But again, with VS Code this is done in just a few easy steps. Let’s see what this would look like:
You can type your commit message, hit the check mark, and you’re ready to go. You can even have it automatically stage the changes for you with every commit. But wait! What about pushing the commit you ask? Well, that part is even easier. Let’s see how it’s done in VS Code:
Not only will the sync button on the bottom push your commits to GitHub for you, that same button will also fetch any changes that have been made to the remote repository by others. It can even automatically fetch changes periodically for you. Also, it will tell you the number of commits that are ready to be pushed, and the number of them that are ready to be fetched as you can see below.
Oh, and that thing to the left of it that says “vnext*”. Well, that is showing you what branch you are currently in. For example, on this image we are currently in the default branch that is named “vnext”. And yes, you can even create branches from within VS Code.
Don’t forget about the small stuff
VS Code even makes some of the small stuff easier. These tasks won’t necessarily take a long time to do in the terminal, but VS Code still makes them even quicker! For example, let's say you just started a new project and you haven’t initialized git yet. Well, normally you would have to cd into that directory and run “git init”. But in VS Code, if you have that project open you can simply click the “+” next to “Source Control” and you have officially initialized git.
Hmmm…. what if I don’t necessarily want to one of my files to go to the remote repository? To keep that from happening I would normally have to go add that files path to the .gitignore file. But in VS Code it’s as simple as right-clicking the file.
There is more where that came from
The examples in this blog are just a few of MANY features that VS Code has in its version control arsenal. Just click the version control tab and the ellipsis up top and you can see the full list of options available.
I hope you enjoy these time-saving features like myself! If you want to learn more about version control in VS Code, feel free to check out the official Visual Studio Code documentation on the subject here: https://code.visualstudio.com/docs/editor/versioncontrol
