GitHub Atom: 5 Tips For Getting Started

A good text editor can be a developer’s best friend. 

Unlike the default Notepad or TextEdit apps on Windows and OS X, coding-specific text editors help developers shortcut common tasks to program applications more quickly. 

The one downside? Learning to use a text editor can be a chore in itself. Some of them, like Vim, can only be customized in a specific language (Vimscript). Others, like Nano, are so old and simple they don’t even respond to the computer mouse—just arrow keys. 

See also: GitHub Open Sources Atom, The Text Editor Beginners Can Use

Atom, GitHub’s new open source text editor, was designed to steamroll over the old way of doing things. You use modern conveniences instead of fighting the text editor—for instance, you customize it with a graphical user interface (GUI)—so you can focus on your code alone. In short, it’s a text editor designed with beginners and amateur developers in mind.

I met with Corey Johnson from GitHub’s Atom’s development team to try it out for myself. We walked through a few different tweaks to show Atom’s ease of customization; anywhere else, most of these adjustments would have to be made on the command line.  

How To Install A Package

The toughest part about developing Atom, according to Johnson, was making sure each user could select the right amount of tools for her needs. Some people will want tools to parse HTML; others will want Python debuggers. But if Atom came with all of these already installed, it’d be huge, unwieldy, and full of features that are useful to some and useless to others. 

So instead, Atom uses “packages,” mini-plugins that you can install to add new features to your workspace. And since Atom is coded in JavaScript, anybody that already knows JavaScript can build a package that meets their exact specifications.  

“The cool thing about Atom is it’s hackable,” Johnson said. “We left out a feature people wanted, and already three developers built packages to fill the gap.” 

Hit command + , (the command key and the comma key) to open up Settings. Suddenly, your editing screen will be eclipsed by a GUI. On the side, you’ll see a list of options, followed by the packages you already have installed.

In order to add new packages, simply click “packages” on the left. You can search for a specific package, or install one of the ones Atom has featured. 

How To Use A Package

Once you’ve installed any package, either click on the “Settings” button right below its name, or click the package itself in the left-hand column. This will take you to a list of keystrokes you can use to summon that package’s features. 

This is Color Picker, a package that adds a GUI to color hex code selection. It only has one keystroke—command + shift + c—in order to activate its abilities.

I’ll go over to some CSS I’m editing, put my cursor on the body text, and hit that keystroke. Voila! A GUI pops up to help me visually gauge the right color for my project. 

How To Remember Shortcuts

“Wait a minute, what does it do again if I press the command key and the comma key?” There are two basic ways to figure out essentially every keystroke. 

First, there’s command + . (the command key and the period key pressed together). Press this and a window will pop up at the bottom of your screen. As long as it’s up, hit any keystroke you like and it’ll tell you what that keystroke does. (To make it go away, hit command + . again.)

There’s also command + shift + p, which brings up a scrolling list of every possible thing you can do in Atom with your current package configuration. For example, if I forgot how to split window panes, I can press command + shift + p and then write “split” in order to find the solution—which is to hit command + k and then an arrow key.  

How To Get Coding Hints

By default, Atom hints are hidden behind the editor windows and they’re only visible when you X out all the windows you have open. Then, subtle hints for using Atom will appear. 

“We didn’t want to be Clippy,” Johnson explained. And for good reason! 

But if you are looking for more explicit hints, you can bring up the developer tools. Hit command + option + i to bring up the Developer Console. If it looks familiar, it’s because it’s the same tool used in Chromium, which you’d be using if you’re testing code in Chrome. 

For even more specific help—you guessed it—there’s a package for that. They’re called “linters” and Johnson describes them as a kind of “spell-check for code” that flags down possible errors and issues in your code while you’re writing it. He recommends atom-lint, which was built by a community member named yujinakayama.

How To Live Preview Markdown

Of course, it wouldn’t be a GitHub-developed text editor if it didn’t have features especially designed to work with GitHub. Atom is especially primed for coding GitHub Flavored Markdown, an ultra-simplistic plain text format that transitions well into HTML pages. On GitHub, markdown is used for everything from read-mes to basic web sites. 

In Atom, hit command + shift + p and search for “markdown” to find the command, or just hit control + shift + m to activate a live markdown window. You can now monitor your changes live while you type them. Coding doesn’t get any simpler than that. 

Have you tried out Atom? Did you find it easy to use? Let us know!

Facebook Comments