Today I started working with the awesome Atom Editor instead of my usual tool MacVim.

Atom is open source and free, produced by the people at GitHub. To introduce Atom, what can I say that they can't say for themselves?

Atom is a desktop application based on web technologies. Like other desktop apps, it has its own icon in the dock, native menus and dialogs, and full access to the file system.

Open the dev tools, however, and Atom's web-based core shines through. Whether you're tweaking the look of Atom's interface with CSS or adding major features with HTML and JavaScript, it's never been easier to take control of your editor.

So basically Atom is a code editor built on top of a browser. Meaning, as a web developer you already have all the skills needed to extend the code base, or write a custom Atom package (plugin). Due to Atom being based on a browser engine (Blink) you even have the usual Chrome developer tools available to you!

Atom Editor preview showing Dev Tools

Why Change?

The main reasons I am trying out a new editor are:

  • Ease of use - Vim is powerful but can be painful too
  • Packages - Atom is easy to extend and has a large community, no Pathogen or Vundler required
  • Customisation - I'm a web developer, making packages easy to write
  • Teamwork - Many colleagues don't know Vim, or at least everyone has different key bindings
  • Look and feel - Atom is beautiful

Some Tips for Beginners

Key Combinations

Arguably the most attractive feature of Vim is the powerful key combinations + motions. For example, in Vim you can type 10dd to delete the next 10 lines. Atom does not have this built in, although there is of course a package for that, many of the more common combinations are available by default. A few useful ones that helped me switch are:

  • ⌘-⇧-K - Delete line
  • ⌘-⇧-D - Duplicate line
  • ⌘-Enter - New line below
  • ⌘-Delete - Delete to end of line
  • ⌘-Backspace - Delete to start of line
  • Ctrl-g - Jump to line
  • ⌘-/ - Comment selection

As in Vim, similar motions are available for words as well as lines.

  • Alt-d - Delete to end of word
  • Alt-Backspace - Delete to start of word
  • Alt-left - Move to start of word
  • Alt-right - Move to end of word
  • Ctrl-⇧-W - Select word

There are also built in commands to jump to files or between tabs, no plugins required.

  • ⌘-b - Search for open buffers (tabs)
  • ⌘-t (also ⌘-p) - Fuzzy file finder
  • ⌘-f - Find in document
  • ⌘-⇧-F - Find in project

And even more default combinations inspired by Vim.

  • ⌘-k-u - Convert selection to uppercase
  • ⌘-k-L - Convert selection to lowercase

There are many more combinations beyond these. To get a better feeling for Atom, have a look over this cheatsheet explaining the main key combinations:

Or even install the keybindings-cheatsheet package and view all combinations directly in the editor! (⌘-Alt-/ to activate.)

Packages

In Vim you often use community written plugins that help extend the native functionality. In Atom this concept is no different. Here are the main packages I have started with, baring in mind I work most often with Ruby on Rails and JavaScript.

These extensions can be installed from the Settings section of Atom or from the terminal using the Atom Package Manager (apm), apm install awesome-package.

linter

Linter is similar to Vim's Syntactic, showing warnings that your syntax has errors or can be improved, for many programming languages. This is achieved by installing linter packages for the desired syntax, such as:

sublime-style-column-selection

This package allows you to hold Alt while making a selection to select blocks of text, in the same manner as Vim visual block mode, or the column selection in Sublime.

autocomplete-plus

This is similar to Supertab in Vim. While typing the editor will scan the open buffer for words matching what you are typing and offer a suggestion. Simply hit tab to autocomplete the word.

Once you have this installed, you can install autocomplete-html and autocomplete-css to make writing your markup a breeze.

html2haml

This is specific to the Ruby world. html2haml allows me to select HTML content and automatically convert it to HAML syntax.

language-haml

Syntax highlighting for HAML. There are many other "language" packages for other syntaxes too.

Custom Packages

Most of the above packages have been written and contributed by the Atom community. I found that writing my own was actually easy, as you are given a scaffold project which can quickly be modified.

As I've said earlier, having the plugin written in JavaScript really helps make the package creation process feel comfortable. The Chrome developer tools make debugging simple too. Compared to writing VimScript, this is very attractive.

Once you've written a package, it can be published to the Atom Package index, simply publish with apm publish my-package.

Search

One of the other great features of Atom is the search. Atom can search within a tab, within a project, through open tabs, or for methods within a file too.

The search interface feels very intuitive, especially if you have used Sublime before. There are options to search using regex patterns, limit to your visual selection, and to match case.

When searching within a project you can limit the search with powerful directory patterns such as app/**/*.js (finds all JavaScript files recursively under app/).

Markdown

Atom even comes built as a Markdown editor by default, which suits me perfectly.

Right now I am writing this article with a live markdown preview, updating as I type (⌘-⇧-M to activate).

Atom comes built with spell checking built in too, making the editing process feel seamless.

Atom as a markdown editor

Conclusion

I have only been working with Atom for one day but I already feel comfortable with it. All of the core functionality I need to be productive is at my fingertips and I have quickly found many packages to fill any gaps in the default features, even writing my own package for a feature I could not find.

Although I am still referring to the cheatsheet at the moment, I look forward to getting even more comfortable with Atom and hopefully have it take over as my primary code editor in the near future.

I'll still love Vim for quick file editing and when I'm working on a Unix server but for project work I'm excited to use a code editor that is fresher and simpler than what I'm currently used to.

I now just need to learn to stop typing :w!