A Beginner’s Guide to Version Control in Visual Studio Code with Git
Did you know that Visual Studio Code, Microsoft’s cool new code editor, has an awesome feature called Integrated Git support? With Git, you can keep track of your work, switch between different versions, and even work on different branches simultaneously. Github, the super popular Git repository hosting service, also uses Git.
Here’s the best part: Visual Studio Code already has built-in support for Git! You don’t need to install anything extra. Just open the Side Bar and click on the Git icon to access the Git View.In a hurry? No problem! Just press Ctrl + Shift + G. Easy peasy!
Contents
Okay, but how do you get started?
Before I can get started with Visual Studio Code, there’s one important thing I need to do: install Git. You might be wondering, what even is Git? Well, it’s a tool that helps me keep track of changes I make to my code. Pretty cool, right? To install Git, all I need to do is go to Git’s official website and download it. Easy peasy. Just make sure you get at least version 2.0.0, so that everything works smoothly when I start using Git with VS Code.
Hey there! If you’re interested in learning how to use Git through the command line, I’ve got you covered. Visual Studio Code is great for managing Git visually, but sometimes it’s helpful to know the command line too. Here are some awesome resources to get you started:
- Check out Github’s interactive Git tutorial. It’s a fun and immersive way to learn.
- Atlassian, the company behind Bitbucket (similar to Github), has a fantastic Git tutorial too.
- If you just need a quick refresher, Atlassian’s Git Cheat Sheet (PDF) is perfect.
- For a more comprehensive dive, go through the entire Pro Git handbook. It’s a treasure trove of Git knowledge.
Let’s Get Started: Initialize Your Repository
If your workspace isn’t using Git yet, no worries. You just need to initialize a new repository. Simply click the “Initialize git repository” button in the Git View, and you’re good to go!
When you use VS Code, it does some behind-the-scenes work to keep track of your changes. It creates a special folder called “.git” in your workspace, which is hidden, so you won’t see it in VS Code. However, if you look in your project’s root folder using a file manager, you’ll find it there. Additionally, VS Code will add any new files that you haven’t started tracking to the Side Bar for easy access.
Setting up Your Git Repository
Once you’ve set up your Git repository, it’s time to make your initial commit. A commit is like a snapshot of your entire repository that you can return to later. But before you commit, you need to add the files you want Git to keep track of. This is called staging the changes.
To stage a file, simply click the “+” button that appears next to it when you hover over it. This moves the file from the Changes folder to the Staged Changes folder, indicating it is now in the staging area.
If you want to stage all your files at once, you can click the “+” button next to the Changes subtitle. This will stage all the files in one go.
Commit Changes
When I make changes to my code, they are not immediately saved. I have to take an extra step and commit them. By committing my changes, I can keep track of the current state of my repository and easily revert back to it if needed. It’s important to add a descriptive commit message that explains the changes I’ve made since my last commit.
Since this is my first commit, I’ll use the impactful message “Initial Commit”. I’ll type this message in the input bar at the top of the Side Bar and then click on the little tick icon. Now I’ve completed my first commit, and the initial state of my repository has been saved.
When I look at my Git View and it shows 0 changes, it means that my Git working directory is clean, and all the changes I made so far are being tracked. But if I start making new changes, they will appear in the Side Bar, and I’ll have to commit them again once they reach a certain amount that’s worth committing. Take a look at the screenshot below to see how your code editor should look like after committing.
Tracking Changes
As you continue working, it’s natural to wonder how the current version of your project compares to the last one you saved. Luckily, Git allows you to easily check for any differences. Within the Git View, simply double-click on the file you want to analyze, and VS Code will display a side-by-side comparison of the current version and the previous one. This feature enables you to quickly spot any changes and compare them with ease.
When we talk about the changes we make in Visual Studio Code, it’s also crucial to understand how the gutter indicators work. These indicators annotate the modifications compared to your previous commit, even if you don’t have the side-by-side view open. Visual Studio Code has three types of gutter indicators that it uses:
- I’ll use a red triangle to show what I delete
- I’ll use a green bar to show what I add
- I’ll use a blue bar to show what I change
Let’s Make Some Branches!
In Git, I can work on different branches at the same time. It’s great because I can try out new ideas without messing up the main project. It also makes teamwork easier because everyone can work on their own branch, but we can also stay on the same branch if we want.
Using Visual Studio Code, making a new branch is simple. Just open the Quick Open palette by pressing Ctrl + P (or Cmd + P on a Mac). Then, type in “git branch” and add the name of your new branch after the command. That’s it!
When creating a new branch, like test-branch in our example, I’ll use the command git branch test-branch. You can choose any name you like for your branch. To keep track of the branch you’re currently working on, just look at the left side of the status bar at the bottom of the screen. In the screenshot below, you can see that I’m currently on the master branch.
Switching Between Branches
To move between branches, simply type “git checkout” into the Quick Open palette (Ctrl + P / Cmd + P). You will then be able to choose from your list of available branches. Look at the screenshot below. Notice from the status bar that I am currently on the branch named “test” (which I made after creating “test-branch”). If I want to switch to a different branch, I can select either “master” or “test-branch”.
Using Git Commands from the Command Palette
Hey there! Did you know that you can easily access Git commands right from the Command Palette? It’s super convenient! On Windows and Linux, just press F1, and on Mac, press Shift + Cmd + P to open it up. Now, all you have to do is type “Git” in the Command Palette, and voila! A handy dropdown list appears, showing you all the Git commands you can choose from. No need to go searching for them anywhere else!
Mastering Git in Visual Studio Code
Hey there! Let’s dive deeper into Git in Visual Studio Code. I’m going to show you some advanced operations that will take your Git skills to the next level. Get ready!
So far, we’ve covered the basics of using Git in Visual Studio Code to keep track of our work. But did you know that VS Code also offers some awesome advanced Git features? That’s right! With these features, you can take complete control of your repositories, tackle conflicts like a pro, and even customize VS Code as your ultimate Git editor. How cool is that?
And here’s the cherry on top: the Visual Studio Code Marketplace has a treasure trove of Git-related extensions that can supercharge your Git workflow. These extensions are designed to make your life easier and make you look like an absolute Git pro. Trust me, you’ll love them!
As I was learning about Git, I came across a super cool extension called Git History. It’s a real game-changer! This extension lets you dive deep into the details of each commit and easily compare any two previous commits side by side.
I have to say, it’s been a lifesaver for me. When I want to see what changes were made in a commit, I can just click on it and Git History shows me all the files that were modified. I can even see a color-coded diff to quickly spot the changes. It’s like having a magnifying glass for your commits!
And the best part? You can use Git History in Visual Studio Code. If you’re a front-end developer like me, I highly recommend checking out my previous article where I talk about Git History and other awesome VS Code extensions. Trust me, it will make your life so much easier!
