Have you ever used Atom and wondered what all the colors in the gutter, tree view, and status bar mean?
The answer is Git. Atom has built-in support for projects stored in a Git repository, providing core APIs and also including packages that add Git-specific features.
Today, I'd like to walk you through some of my favorite Git features in Atom and explain a bit about how they work and how they can be tweaked.
First off, the packages and features mentioned in this post are all built around Atom's core Git API.
atom.project global has a
getRepo() method that will return a
Git repository for
the current project. This object can be used to access information about the
state of the repository and details about a file's status and changes.
Checkout HEAD revision
Now onto the features, starting with my favorite,
cmd-alt-z. This keybinding
checks out the HEAD revision of the file in the editor.
This is a quick way to discard any saved and staged changes you've made and
restore the file to the version in the HEAD commit. This is essentially the same
git checkout HEAD -- <path> and
git reset HEAD -- <path> from the
command line for that path.
This command goes onto the undo stack so you can use
cmd-z afterwards to
restore the previous contents.
Git status list
Atom ships with the fuzzy-finder package
cmd-t to quickly open files in the project and
cmd-b to jump
to any open editor.
The package also comes with
cmd-shift-b which pops up a list of all the
untracked and modified files in the project. These will be the same files
that you would see on the command line if you ran
An octicon will appear to the right of each file letting you know whether it is untracked or modified.
Atom can be used as your Git commit editor and ships with the language-git package which adds syntax highlighting to edited commit, merge, and rebase messages.
You can configure Atom to be your Git commit editor with the following command:
git config --global core.editor "atom --wait"
The language-git package will help you with your brevity by colorizing the first lines of commit messages when they're longer than 50 and 65 characters.
You can tweak these styles by adding the following snippet to your
~/.atom/styles.less file. Click the Atom > Open Your Stylesheet menu item to
Status bar icons
The status-bar package that ships with Atom includes several Git decorations that display on the right side of the status bar.
The currently checked out branch name is shown with the number of commits the branch is ahead of or behind its upstream branch.
Also an icon is added if the file is untracked, modified, or ignored. The number of lines added and removed since the file was last committed will be displayed as well.
The included git-diff packages colorizes the gutter next to lines that have been added, edited, and removed.
This package also adds
alt-g down and
alt-g up keybindings that allow you
to move the cursor to the next/previous diff hunk in the current editor.
The included tree-view packages colorizes folders and files that are untracked, ignored, and modified.
Want to make modified files bold in the tree view? Add the following snippet
You can also use the
.status-ignored classes to style
those types. In the screenshot below, new files are green, modified files are
orange, and ignored files are dark grey.
You can open the styleguide using
cmd-alt-shift-g to see more of the Git CSS classes that the built-in
styles and themes use.