Quick Tip: How to Use Atom as a Git GUI

When you use Git as part of your workflow it can be very useful to have easy access to a GUI to help speed up your processes. There are a great many Git GUIs to choose from, but if you use Atom as your code editor you won’t have to go far to find some solid options.

Thanks the excellent ecosystem of extension packages created by the Atom community, as well as some in-built tools, there is a range of fantastic ways to get a Git GUI up and running right inside your editor. In this quick tip we’ll look at three of these methods.

Note: If you don’t have Atom and you’d like to get it, go to: https://atom.io/

1. git-control

The git-control package is my personal favorite as it makes working with Git a breeze. If, like me, you’re a bit more of a casual Git user and don’t have all the commands you need 100% memorized, this is the package for you.

The interface for git-control is contained in its own tab, so you can have it fill up the entire workspace or you can split it off to the side, as you’ll see I have in the image above.

You get a full range of easy access buttons to trigger common tasks like commit, pull, push and so on. It automatically detects new files, changed files and deleted files and shows them to you under Workspace in the sidebar on the left. Switching branches is as easy as clicking the desired branch in the same sidebar.

When you perform actions you’ll get a complete readout of everything happening in the log section running along the bottom of the git-control UI, so if something doesn’t work as expected it’s easy to see the error messages that have been returned.

To install this package go to Packages > Settings View > Install Packages/Themes, search for git-control and hit the corresponding Install button when you find it. To open it up once installed go to Packages > git-control > Toggle.

2. Native git Integration

If you’d rather not install any packages at all, another option for you is Atom’s own native Git integration, something you might naturally expect to find in a code editor made by GitHub. To open up the Git management panel move your mouse over to the far right edge of Atom and you’ll see a little semi circle with an arrow on it appear. Click it and you’ll see the interface pictured in the image above, which opens out as a sidebar on the right.

Through this interface you’ll see staged and unstaged changes, and you’ll be able to make commits with associated messages. There are two tabs in the interface, with the left being the one show in the image above, and the right being for GitHub specific integration. I’ve been using Gitlab of late so I can’t tell you too much about the GitHub section, but if you are a GitHub user I’m sure this native integration will be very handy.

3. git-plus

The git-plus package is the GUI for you if already know exactly what you want to do, you just want a convenient, inline way to do it. To install this package search for git-plus via Packages > Settings View > Install Packages/Themes.

Once installed, to use it go to Packages > Git Plus. Here you’ll see a list populated with quick shortcuts for all the commands you might typically run through a terminal.

So as you can gather, this package isn’t necessarily designed to help you find your way around if you’re new to Git, rather it’s to save you time and prevent you needing to switch applications when running commands you already know well.

Wrapping Up

Those are three ways to get yourself rolling with a GUI for using Git, right inside Atom editor. In my experience this makes working with Git a more pleasant, smooth and efficient experience. I hope you find one of the options here does the same thing for you!