DIY Atom – An Intro to Hacking Your Text Editor

Atom.io – You know it, you use it, but do you really use it?

There are plenty of blog posts about what Atom is, and what plugins you should be using, so here is a quick run down in case you don’t want to go to any of those other blog posts:

Atom.io is a text editor created by GitHub, built on a Chromium browser with HTML, JavaScript, CSS, and Node.js, complete with access to the standard developer console window you know and love in Chrome. This means if you already know front-end development, you can modify Atom.io and add your own customizations to it pretty easily.

If your customizations get complex enough, or you think other people might like them, you can roll them into a package. Packages are based on Node.js, so if you want to, you can require any existing node modules in your own package. Some good packages are Minimap (which shows the full source code off to the right side of the editor window, and highlights which portion is currently active in the main editor window, which is useful for getting a good idea of where you are in a larger file), Highlight Selected (one of the numerous Sublime functionality copycats), and Linter (which is a parent wrapper for several language-specific linter packages you can install, which provide error checking and style checking for your code).

Let’s look at a few different ways you can start “hacking” Atom.

diy atom

Customizing themes

Since Atom is basically just a web browser, your entire editor window can be easily customized using Less, which extends CSS (but doesn’t replace it, so it’s not a huge deal if you don’t know it). You can download themes which will modify most of the CSS, or you can tweak a few things here and there by yourself. Open ~/.atom/styles.less (or use the shortcut provided in the Atom menu: Atom -> Open Your Stylesheet). Any CSS in here will override your selected theme. You can also open developer tools and use the element inspector to find the class name of any region of the editor.

Here’s an example making the file tabs smaller for using Atom on smaller screens (depending on your Theme, some values may need to be tweaked).

Before
atom

After
atom

The Code

.tab-bar {
  height: 15px;
  padding: 0;

  .tab {
    top: 2px;
    line-height: 10px;
    font-size: 8px;

    &.active {
      top: 1px;
      height: 15px;
      line-height: 14px;

      &:before {
        height: 15px;
      }
    }

    .close-icon {
      line-height: 10px;
    }
  }
}

Writing your own snippets

Snippets are a pretty cool tool to insert templates for blocks of code you use often. Most text editors have this ability, and Atom makes it easy to make your own. Type the prefix shortcut, hit tab, and then your code block will show up. If it was written properly, it will even put your cursor at the first logical text entry point, and let you tab to the next one.

Here’s an example snippet for jQuery’s click() method:

'.source.js':
  'jQuery onClick':
    'prefix': 'click'
    'body': """
      $('${1:#foo}').click(function(){
        ${2:// code...}
      });
    """

The .source.js tells Atom which type of file the snippet is for (it will only show up in JavaScript files). The second line is the name of the snippet. If you press Option+Shift+S, you can see a list of available snippets by name, or, as shown in the first image, it describes the snippet when you start typing the “prefix”, which is what is defined on the third line.

atom

The 'body': is where the meat of the snippet resides, and will be the text that is pasted into your browser upon tab-completing or selecting a snippet. If you’ve used jQuery before, you can see right away that we have some weird stuff in the element selector, and function body in our snippet’s code.

$1 tells Atom to place the cursor at this location after pasting the snippet. $2 adds a second tab stop for the cursor; after pasting a snippet, hitting tab will move the cursor to this new location in the pasted code. ${1:#foo} tells Atom to insert the text #foo and automatically have the whole string selected. This way, after inserting a snippet, you have example of what to type, and can immediately start typing over it without deleting anything or moving the cursor.

atom

Likewise, hitting tab will bring you to the function body, where // code... will be selected, because of ${2:// code...}.

atom

atom

Preparing to write your own package

Atom comes with a barebones package generator. It’ll create a small skeleton project with the following layout:

my-package/
  grammars/
  keymaps/
  lib/
  menus/
  spec/
  snippets/
  styles/
  index.coffee
  package.json

package.json containes the metadata used for Atom to run the package, but a good way to see these default files in use is to look at an existing package, like Linter. Looking at the first part of the Linter package.json, we see it contains info like name and version, but also information about where the main JavaScript file is.

{
  "name": "linter",
  "main": "./lib/main",
  "author": "atom-community",
  "version": "1.5.1",
  "description": "A Base Linter with Cow Powers",
  "repository": "https://github.com/atom-community/linter",
  "license": "MIT",
  "scripts": {
    "lint": "coffeelint lib && eslint lib"
  }

If we look at the lib/main.coffee file, we can see how the package is initialized, what config variables it uses, and how it consumes the add-on Linters (like Rubocop’s Ruby linter), and attaches itself to the bottom Status Bar. We can also see that it requires lib/linter.coffee, which itself requires even more pieces of the project.

atom

The developer console shows the html that adds the linter’s bottom panel to the editor window, which is in lib/ui/bottom-panel.js, called by lib/linter-views.coffee from the linter.coffee file. It’s pretty easy to follow along with the code in Linter to get a good idea of how all the pieces work together, and which parts interact with the Atom editor.

Read the Docs!

Digging through an existing, well-written package is just one way to learn how packages can integrate with Atom. The documentation itself can offer plenty of insight. Atom’s documentation has come a long way in the last year (many blog posts you’ll find about Atom from last year discuss the terrible state of the docs). But now there’s plenty of good info on the built-in functionaility, how to create packages, and the entire Atom API.

If this post seemed a little too beginner-level, future posts will dive into creating an actual plugin and working within the Atom API.

Love making great software? Let’s talk!

Apply to work with us!

Revelry provides Executive Advising Services, Custom Software Development, and Design Sprints.
Keep in touch by subscribing to CODING CREATIVITY.

More Posts by Brad Huber:

<div class="row">
<div class="columns large-9 medium-centered">
<h2>Kubernetes, Delivered</h2>
<p class="Lead">Deploy your first app within 24 hours. Book a demo to get started.</p>


</div>
</div>