Git and Visual Studio Code

It’s been a looong time since I last wrote something here. I was so excited about the blog, and about sharing my journey. But then a lot of stuff happened. I lost focus.and motivation. I kept studying, though. I took the Azure Administrator certification exam, and passed. I took the Terraform Associate exam, and passed too. But then I sat for the AZ-500, the Security Engineer Associate exam, and I failed. I was sad, obviously. But it’s OK. I’ll try it again. This time I’ll pass!

Enough of that!

I’m now bootcamping with Cloudskills, the best provider for cloud training out there. All the teachers are cloud wizards. I’m on their Cloud Native DevOps bootcamp, and I’m loving it! Ten weeks of lectures and projects, with all we need to know to get started in the magic universe of DevOps.

Last week’s lecture was about Git, GitHub, and version control. Knowing version control, and using GitHub is not anymore something exclusive for programmers. We IT professionals, no matter our area, should be comfortable with Git and GitHub, and get used to storing documentation on GitHub. It’s not just for storing code!

In this article, I wanted to talk about the Git, GitHub and VS Code integration. They work together perfectly! Once you get the hang of it, which doesn’t take long, you’ll love it. I love it! It doesn’t mean, however, that you’ll never again need the CLI. You will, and you must also practice the commands regularly using the CLI. But the GUI is your ally in this case. Let’s see some of it.

Git Operations Using VS Code

VS Code has the super handy integrated terminal, which helps a lot when you’re working with Git commands, but you should consider giving the Git integrated features a chance. They come installed by default, you just click on the source control icon on the activity bar to access the source control view.

Cloning a repository

The first step to start working locally is to clone the remote repository. To do it from VS Code, you need to access the Command Palette by typing Ctrl+Shift+P (macOS: Cmd+Shift+P). In the search box, just enter clone, and the drop-down option will show you Git: Clone. Just click on that, paste the URL of the repository you want to clone and hit Enter. You’ll be prompted to select a folder in your local machine where you want to keep the repository. All the files will appear in the Explorer view, and you can start working on the files.

Creating a new branch

To create a new working branch, we’ll use the Status Bar, on the bottom left side of the screen.

The Status Bar shows the current working branch. In my case, I’m in the main branch. To create a new branch, simply click on the branch name. This opens the Command Palette. Now, you can either switch to another existing branch or create a new one. The asterisk next to the branch name indicates that changes were made to files in this branch, and they’re waiting to be staged.

When the files move to the staging area, the asterisk turns into a plus (+) sign, as you can see above. The files sitting in the staging area are ready to be committed and uploaded to the remote repository. I committed the file, and you can see below what happened to the Status Bar. There are 2 arrows, one facing up and one facing down. The number one next to the arrow facing up indicates there’s one change pending to be synchronized. To sync the change, click on the Synchronize Changes icon (the circle with arrows).

Now let’s move to another part of the VS Code user interface, the Source Control View.

Staging and committing your changes

If you look at the activity bar on the left hand side, you’ll see the Source Control icon. If you change anything to the files in your working branch, you’ll see there’s a number attached to the icon.

If you click on the icon to expand the view, you’ll see this right here:

The Changes tab show the files that were changed, but are still sitting just in your working directory. They still haven’t been added to the staging area. To add a file to the staging are from the CLI, you would type git add filename. In VS Code, you click the plus (+) sign next to the file name. The file will then move up to the Staged Changes tab. Here, you can see I have a file over there already. If you want to move a file back to the working directory and out of the staging area, hover over the file name and click on the minus (-) sign.

When all the files you wish to commit are in the Staged Changes tab, click on the tick () icon, on the Source Control top menu. A window will popup, where you can write your commit message. Then, back to the Status Bar on the bottom, click on Synchronize Changes.

That’s it for now. That’s the super basic of the Git commands. But I want to diver deeper in a later article. There’s so much more you can do with VS Code! You can integrate it with GitHub in several ways, and I want to talk about that too!

Was it clear? My intention is to keep the articles short. Trying to put more stuff out there, and willing to fail more, and faster. 🙂

Please let me know what you think!


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s