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 code editor called Atom which shook the “code editor battlefield”. The official announcement stated that Atom began as an experiment – likely 6 years ago according to this tweet by one of Github’s founder – which then became part of the internal tools in Github; in fact Atom is built using Atom itself.

Atom is claimed to be extremely hackable, extensible, yet could still be user-friendly to entry-level users. At the time of the writing, Atom is still in beta stage and available as an invite-only app. It is also currently only available for OS X platform – though the Windows and Linux version is reportedly in progress. I’ve got my hands on it, and I would like to walk you through through this app, see what that it has to offer.

Let’s check it out.

Overview

If you are a die-hard Sublime Text user, the first thing that may raise eyebrows when Atom is launched is the UI. Take a closer look at the following screenshot – can you spot which one is Sublime Text and which is Atom?

Answer: The left is Sublime Text, and the right is Atom.

Aside from the look, Atom has also borrowed some Sublime Text’s symbolic functionalities that you may be familiar with, for instance: Command + T will allow you to switch between files, and Command + Shift + P to launch Command Palette.

You can also do a so-called auto-pairing quote and parentheses to select code block, and selecting multiple-line simultaneously, just like in Sublime Text.

But, I found that Atom is not yet capable of enclosing tag automatically. Sublime Text is quite smart, it can find matching tags to close just by typing </. Another feature that also I caught absent from Atom is Wrap Selection, where you can press Control + W and define the tag to wrap selected area, or Control + Shift + W to automatically wrap it with a p tag.

Recommended Reading: 12 Most-Wanted Sublime Text Tips And Tricks

Language Support & Syntax Highlighting

Code Editor is created to help developers write codes correctly with the help of proper code syntax highlighting. Without this capability, a code editor is nothing more than just a Text editor, which is pretty pointless.

Atom supports many prominent programming and web languages including Sass and LESS. In Sublime Text, we would have to install third-party packages, before it can handle these two.

To view all in the list, click on the Language indicator of your current document at the status bar, as shown below.

Atom Packages

Atom is extensible with Packages. Each week the number is growing fast; it has more than 500 packages at the time of this writing. Below are my top 5 packages to get:

• Color Picker – a color picker that is able to generate HEX and RGBA color.
• JSHint – an inevitable tool to make your JavaScript code "error-less".
• Autocompletion – it is a surprise that this kind of functionality is not integrated in the core.
• Prettify – code also should look pretty.
• Rdio – listen to the Rdio with it.

Installing Packages

We can install Packages through Atom; launch Package Control, then search Install Package. Unlike Sublime Text, which load and show Packages at the same dialog window, Atom will redirect you to a new screen.

In the new screen, you can see the Packages shown like in the App Store or Google Play, each with an Install button. Atom features a few of the Packages, but you can search for the rest through the search box.

Recommended Reading: 18 Essential Plugins To Get More Out Of SublimeText

Markdown

Github is built around Markdown. The first README file that would be picked up and shown in the repository is one that is written in Markdown. Github Pages is built with Jekyll, and Markdown as well. So it is reasonable to integrate Markdown into Atom.

You can try writing a few lines of Markdown syntax, hit Control + Shift + M, and you will see how the syntax will turn out.

Recommended Reading: Writing Web Content With Markdown

Git Integration

Atom added a few helper functionality for those working with git. As you add some additions, or make changes in your git project, you will see a color mark as shown below (it’s barely noticeable). In Sublime Text, this kind of feature can also be achieved using a plugin named GitGutter.

I’m expecting Atom to be tightly integrated with Github in the next few releases so we might be able to perform Commit, Pull, and Push git repository right from Atom – that would be a really nice feature addition.

Chrome Dev Tools

Atom is built around Web technologies – HTML, CSS, and JS – and is designed to build the Web. So, why not add Web Inspector in it too. If you hit Alt + Command + I, you will see the Chrome Dev Tools.

These Dev Tools could help you customize Atom as well as develop themes or packages for it.

Recommended Reading: Getting Started With Chrome Developer Tools

The Settings

The Settings in Sublime Text, which irks many people, is done through plain JavaScript objects. Despite the very close resemblance to Sublime Text, Atom offers a nice GUI when it comes to Setting configuration, as you can see below.

You can change the font size, the theme, the color highlighting scheme, and even personalize the keybindings.

Final Thought

Atom looks really promising, and I can see it could be a serious contender for Sublime Text. By having similar UI, features, and keyboard shortcuts, it should not be difficult for people to switch over to Atom.

Interested to try Atom? Grab your invitation in Atom.io, or mention me in Twitter @tfirdaus, I have 2 invites left.

Lastly, I’ll look forward how Atom goes in the future. Will it be the next great code editor to replace Sublime Text?