Atom: Your New, Favorite Text Editor

Post navigation

Atom, developed by GitHub, was released in 2014 and has gained huge traction since it first came out. There’s a reason why this free and open-source code editor has become so popular.

Let’s begin by reviewing its (arguably) best feature:

OPEN-SOURCE- Atom Editor

As mentioned before, Atom editor is open-sourced. This means that if you find bugs or want to make any improvements, you simply need to send a pull request to their repo. Any fixes or changes usually need to stand out for the Atom team to implement your code. However, it’s not uncommon to see user improvements appear in future updates. The ability for a community of developers to constantly refine Atom, gave this code editor a chance to stand out from others who are exclusive.

Picture 1-1

PACKAGES

The reason I said that open-source was “arguably” Atom’s best feature, is because an area where Atom truly shines, is its ability to add additional features, known as packages. By default, Atom includes a package manager which even has an apm command, where you can manage your packages and themes from your terminal.

There are currently 6,572 packages that are available for the Atom code editor (compared to 2,900 packages for Emacs which has been around for over 25 years). Best of all, they are all hosted on GitHub. It is clear that developers will never agree whether code should have double or quadruple indentation. If you’re a messy coder like I am, the atom-beautify package will make your code match everyone else’s.

Picture 1-2

GIT INTEGRATION

A major missing piece for developers, who rely on GitHub as an imperative part of their workflow, is Git integration in their current editors. You can do almost anything from the Atom editor, when it comes to GitHub. It is possible to do everything from initializing and cloning repos, to committing, pushing and pulling changes. It is even possible to resolve conflicts and review pull requests.

In the end, if you rely on GitHub, Atom will allow you to make smooth progress. You can see the GitHub guys pushing to Atom repos all day long. Therefore, you should be sure that there is plenty of support.

Picture 1-3

SNIPPETS

Picture 1-4

Snippets are chunks of code that you can quickly insert into program files. In Atom, you have the choice of creating your own snippets or choosing to use some built-in ones. Snippets are exclusively available to their respective file type. For example, if you are working on a file with an .html extension, only snippets belonging to HTML will be available for that file.

1

2

3

4

5

6

7

8

9

10

11

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<link rel=href=>

</head>

<body>

</body>

</html>

Let’s create a quick snippet that will make building the HTML structure much easier for those who are beginning to learn HTML.

To start, click Atom in the menu bar and choose “Snippets…” or you can check in your ~/.atom directory for a file called “snippets.cson.” Here’s an example of a snippet:

1

2

3

4

'.source.coffee':

'Console log':

'prefix':'log'

'body':'console.log $1'

Let’s go through the example line by line:

Line 1: The programming language is identified. In this case, CoffeeScript is being used.

Line 2: The name of your snippet.

Line 3: The prefix holds the shortcut that you want to use to insert your custom snippet into your file.

Line 4: The body is where the actual code you want to insert is placed.

Thankfully, Atom makes creating snippets fairly simple!

Inside the “snippets.cson” file, start a new line of code where the first line is the programming language you want to use. In this example, we will use HTML. To set the scope of the snippet, we need to use “.text.html.basic”, so Atom can read it.

On the second line, we will name our snippet “HTML structure” since that will be its purpose. Your code should look something like this so far:

1

2

'.text.html.basic':

'HTML snippet':

Let’s set line 3. The prefix, or shortcut, that we want to use is a simple “html”. This is the easiest word to type and remembering it won’t be an issue. Before assigning a prefix, it’s a good idea to make sure it isn’t already taken by a snippet for that language.

Remember that line 4 holds the actual code you want to insert. Therefore, let’s copy and paste the HTML structure into the body. You can customize this however you’d like. I decided to include an empty tag, so I don’t forget to insert a CSS file.

1

2

3

4

5

6

7

8

9

10

11

12

13

'.text.html.basic':

'HTML snippet':

'prefix':'html'

'body':'html'

'body':"""

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<link rel=href=>

</head>

<body>

Voilà! That’s it! You’ve just created your first snippet. It’s not as difficult as it looks. You can see how useful it can be. Go ahead and create an .html file and type out the words “html”. You’ll see the snippet pop-up.

THEMES

Atom is built using web technologies. Since it is web-based, you’re given plenty of control without having to do too much work. You can effortlessly browse editor themes, swap out colors and even modify colors with pure CSS. I’ve set my Atom editor to have a dark theme, which helps the eyes after coding for several hours.

Picture 1-9

Another thing about Atom’s look and feel is panes. Sublime Text also has panes, but you can’t split the window exactly the way you would like. With Atom, you can do anything with your panes. This is perfect for those who use several files at once. To split the panes, simply drag them to the side of the editor that you’d like it to sit on.

Picture 2-0

Pricing…Free!

IN CONCLUSION… For those developers who want to easily customize their editor, beyond what others provide, Atom is an essential tool. It is priceless to have the ability to access thousands of packages that will make your coding experience smoother. . It is important to remember that Atom is modular. Therefore, if you do not like a part of Atom, you can easily disable it and replace it. If you’d like more information, the Atom Flight Manual provides a great starting point for new users.