How to Manage Git and GitHub Projects with Atom

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.

A Look Into Atom: Github’s New Code Editor

.no-js #ref-block-post-19566 .ref-block__thumbnail { background-image: url(“http://media02.hongkiat.com/thumbs/250×160/atom-code-editor.jpg”); }

A Look Into Atom: Github’s New Code Editor

Github, a popular git repository that hosts a ton of open source projects, has recently announced a new…Read more

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.

Atom with GitHubAtom with GitHub

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.)

Open Git tabOpen Git tab

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.

Init Git repoInit Git repo

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:

Starter screen of Git repoStarter screen of Git repo

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.

Unstaged changesUnstaged changes

There are three ways you can stage the changes:

  1. Stage File – stages only one individual file
  2. Stage Selection – stages a part of a particular file
  3. 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 individual fileStage individual file
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.

Staged changesStaged changes

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.

Clear staging areaClear staging area

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.

Create new branchCreate new branch

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.

Clone GitHub repoClone GitHub repo

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.

Authorize GitHub for AtomAuthorize GitHub for Atom

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

Enter authorization tokenEnter authorization token

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.

GitHub operations available in AtomGitHub operations available in Atom
How to Add Custom Code Snippets to Atom

.no-js #ref-block-post-28067 .ref-block__thumbnail { background-image: url(“http://media02.hongkiat.com/thumbs/250×160/add-custom-code-snippets-atom.jpg”); }

How to Add Custom Code Snippets to Atom

It’s not a coincidence that Atom, the source code editor created by Github is popular in the web…Read more

Source: http://www.hongkiat.com/blog/manage-git-github-atom/

Advertisements

Leave a Reply

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

WordPress.com Logo

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

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s