Don't overcomplicate git ๐Ÿ™‡โ€โ™‚๏ธ

Featured on daily.dev

I recently talked to someone who was confused by git commands in the terminal, and it was just not working.

I again was confused about why this person was trying to push a simple commit using terminal commands?

Call me lazy, but there are visual tools to do just this for you.

In this case, the person wasn't aware of these, so I'm writing this article.

Use the right tools for the right job.

Don't get me wrong, I can commit and do a lot of stuff with the git terminal commands, but why not leverage visual interfaces?

Today I'll show you two ways to create commits not having to open your terminal!

Note: The article is based on Mac, there might be a difference for Windows interface.

1. Using Visual Studio Code

My goto editor Visual Studio Code comes with a build-in git interface, and it's so simple to push and commit code.

Let me show you how it works.

Step 1. Finding the git window

To find the git window click the "tree" icon on the left, you will see all your changes that haven't been committed yet.

Git window in Visual Studio code

Here we see all our changes that are not yet committed.

Step 2. Selecting files to commit

You have the option to either commit all files (default) or choose which files you want to commit.

In my case, I'll only commit the files that need to go live.

Click the little plus if you hover a file.

Stage changes

Once we clicked this plus, it will look like this.

Stages vs. unstaged

Only the top two files will be committed now. The other ones will stay on our local machine for now.

Step 3. Writing the commit message

In the box up top, you'll see "message" this is where you write the commit message.

Commit message

Step 4. Commit your changes

Ok, now it's time to commit. There are two ways of doing that.

  1. Click the checkmark icon
  2. Or click the three dots -> Commit -> Commit

Commit code

Step 5. Pushing the commit

The last step in this process is to push the commit we just did.

Click the three dots again -> Commit -> Commit

Commit in Visual Studio

That's it. We now did a visual commit to GitHub via Visual Studio Code.

2. Using the GitHub app

Another way to do this is by using the GitHub app, which has a similar experience.

Download the GitHub desktop application first.

Step 1. Selecting the repo and files to commit

First, make sure you're on the right repository, or add it by browsing for the folder on your machine.

Then select the files you want to commit (Default is all)

GitHub Desktop

Step 2. Writing the commit message

We can then add our commit message and even add a description.

You see the little commit box at the left bottom of the application.

GitHub desktop commit message

Step 3. Commit the files

The next step is to commit the files.

Click the big button at the bottom.

Once you clicked that, the commit will be set. You'll see the number of commits on top now.

Commit in GitHub desktop

Step 4. Push the commit

Now we can click the button up top to push the actual commits.

You can push multiple commits at once.

Push commit in GitHub desktop

That's all. We now saw two ways to commit using a visual interface!

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Ayan's photo

Sorry, but I beg to differ.

You can create aliases and it'd be much faster than committing using GUI.

g a file.txt
g c "Write a meaningful commit message"
g p

Note that, I have aliases set: g=git, c=commit and p=push.

Chris Bongers's photo

It's not about speed here Ayan, How do you know that file.txt is changed?

I have about 20 files and like to have an overview of what changed.

But like anything luckily everyone has their own preference and style.

Ayan's photo

Yes Chris, you are absolutely right. Everyone should use what s/he is comfortable with.

How do you know that file.txt is changed?

I have about 20 files and like to have an overview of what changed.

You can do that by git status command.

Rutik Wankhade's photo

Commiting through vscode seems very easy and fun. And seeing it visually is interesting . BTW Chris, what theme are you using for vscode? It looks stunning.

Chris Bongers's photo

Hey, thanks!

I'm using Dracula theme.

Also, check out my list on top VSC extensions: daily-dev-tips.com/posts/top-10-visual-stud..

Dฦฐฦกng ฤแป—'s photo

Hey, can you share your VS Code setup above (theme, icons, font)? They look so cool ๐Ÿ˜

Benny Cohen's photo

I agree that visual tools are helpful. But that's what they should be, a tool to speed up a process. Not a replacement for understanding git (which is what it usually ends up being).

Someone who does not the way git works (i.e. can execute the proper set of command via a terminal to achieve a certain result), will usually be able to mess things up because they are unaware of the abstracted choice the GUI makes.

Chris Bongers's photo

100% this is not a replacement for NOT understanding git and not the point of the article. It's about giving people a view this is a way to do something.

The same could be said about any article in tech, if you copy-paste the code it's not a good idea. Let's just hope everyone gets that. ๐Ÿ”ฅ

Rahul's photo

Yes, this person is me maybe. ๐Ÿ˜ฅ Amazing article. And thanks for this tutorial again, explained in a very best way.

Chris Bongers's photo

Haha yes, thanks for the inspiration, glad you're sorted on the git commands now ๐ŸคŸ

Rahul's photo

Not only just sorted. Now pro in pushing ๐Ÿ˜‚Chris Bongers

Al Gonzalez's photo

Nice article. I believe step 5 in VS Code workflow should be "Click the three dots again -> Push"

Charlie Arehart's photo

In the same vein, the references in section 1 step 2 seem they should all be "staged" rather than "committed". Folks not familiar with things may be confused otherwise when they see that in the ui. Like Al, I'm just trying to help, not knocking the otherwise vey helpful article. :-)