How to Manage Git and GitHub Projects with Atom

By Anna Monus. in Coding. Updated on October 31, 2017.

Great news for my developer friends; Git and GitHub integration have been just shipped with the new Atom release. The new feature was available as a beta for a while but now with Atom 1.18, it’s ready for use to the general public as well. From now on, you can perform common Git and GitHub operations without leaving the code editor.

As Atom started as GitHub’s internal tool, the step of integrating Git and GitHub is not super-surprising, however it will further improve Atom’s development workflow for sure. With the new release, Atom also strengthens its position in the code editor scene, as Visual Studio Code has already offered the same feature for a while.

Initialize a Git repository

Atom got two new tabs, one for Git and another for GitHub, through which you can handle your Git operations. You can access them either by clicking the View > Toggle Git Tab / Toggle GitHub Tab menus in the top menu bar, or by clicking the little > hover icon on the right-hand side of the editor pane.

(If your top menu bar is hidden you can reveal it by pressing the Alt key.)

You can also use the following keyboard shortcuts to access the tabs:

Git Tab: Ctrl + Shift + 9
GitHub Tab: Ctrl + Shift + 8

Click the Create repository button and choose the folder where you want your repo to be saved. Finally, click the +Init button.

And that’s all, your Git repository has been initialized without having to touch the command line. This is how the starter screen of an empty Git repo looks like:

As you can see, the layout is as convenient as it can be. You can see the staged and unstaged changes under each other, and make a commit at any time. Plus, you can switch the Git tab on and off by simply hitting the little > icon.

Although the “Project” pane on the left-hand side doesn’t show it, the repo, as it should, contains the hidden .git folder with your Git settings.

Stage changes

I quickly created two test files, index.html and style.css, to see how staging works.

Atom puts both files into the “Unstaged Changes” section in the Git pane on the right. And, in the “Project” pane on the left, the names of the unstaged files appear in green.

There are three ways you can stage the changes:

Stage File – stages only one individual file
Stage Selection – stages a part of a particular file
Stage All – stages all unstaged files

Stage an individual file or selection

If you want to stage only one file then just click on the file name in the “Unstaged Changes” section. A new tab will open up in the editor pane where you can choose if you want to stage the whole file (Stage File) or only a selection of it (Stage Selection).

Stage all unstaged files

If you want to stage all unstaged files at once just click the Stage All menu on the top-right corner of the Git tab.

The staged files are moved to the “Staged Changes” section. And, if you change your mind you can unstage them by clicking the Unstage All menu at top of the “Staged Changes” section.

Commit changes

The “Stage Changes” section is basically your staging area. When you reach a milestone in development you need to commit the changes. By committing, you save the momentary state of the project into the Git version control system so that you can return to it (if you want) without losing anything.

To commit your staging area, type a commit message (that shortly describes the changes you made since the last commit) into the Commit message box, and click the Commit button.

As a result, both the “Unstaged Changes” and “Staged Changes” section will be cleared and the color of file names in the “Project” pane will be changed back to white.

Other Git operations

There are a bunch of other Git operations you can also perform right from the Atom editor. For instance, you can create a new branch by clicking on the branch name at the bottom of the Git tab. Here, you can also switch between the different branches.

However, not all Git operations are available from Atom yet. For instance, you can’t delete branches, or make configurations. To perform these tasks, you still have to use the command line. Atom’s Git integration is still very new, so hopefully, support will be added to these less frequently used operations in the future.

You can access a list of all Git-related features via the Command Palette by using the Ctrl + Shift + P key binding and typing “Git” into it.

Clone a GitHub repository

Atom’s new Git integration feature doesn’t only work locally but you can clone a GitHub repository as well.

To do so, open the Command Palette by hitting Ctrl + Shift + P and select the GitHub: Clone command. Then, add the URL where you want to clone from (the URL of the GitHub repo) and the folder where you want to clone the repo into. Finally, click the Clone button.

Authorize GitHub for Atom

To make changes in a GitHub project, you need to authorize GitHub for Atom. Follow the instructions you see inside Atom’s GitHub tab. First, visit the github.atom.io/login URL and sign in to your GitHub account. Here, you can generate a token with which you can perform the authorization.

Enter the authorization token into the input field you can see in Atom’s GitHub tab and log in to your account.

From here, you can access the three most common GitHub operations: fetch, push, and pull requests by clicking the down arrow icon at the bottom of the GitHub tab.