Setting up Atom for Web Development

In the vein of these Sublime Text 3 recommendations for Rails development, here's my Atom setup for developing web apps.

After using Sublime and Vim for several years, I switched to Atom a year ago, and have not missed one feature from the other two so far. Since Atom is in continuous development by the core team and the community, it only gets better as time passes. Also, it's free.

First, an FAQ/C:


No need to install any package manager for Atom. The editor is composed of over 50 open-source packages, and so the package manager is built in. There's a phenomenal package repository online, or you can search for them directly on Atom's Settings -> Install. And, since Atom is open source and built using web technologies, creating new packages or extending exiting ones is easy. Here are the ones I use:

vim-mode: the bread and butter of my editor usage. I missed some .vimrc tweaks I had from my MacVim days at first, but I found ways to substitute them with the packages, settings and shortcuts listed here.

tabs-to-spaces: For the few times when someone screws up and uses tabs for indentation, this package fixes it in a pinch.


Following the Default is King philosophy works very well with Atom, since it comes with a great set of defaults. For example, something like GitGutter already comes built in. Another nifty feature is that it automatically knows which kind of tab policy to use on every file you edit, by infering it from it's structure: no need to tweak this either.

For the things you do need to change, there's no need to mess with JSON. Atom comes with a *gasp* settings panel, with all the dials and levers you need to customize your experience:

There is one small thing I do like to enable, which is autosave on blur. It has saved me countless ⌘ + S, and I've yet to find an instance where I've thought "I should not have saved that document".

Snippets and commands

Do you know "save_and_open_page"? Best way to debug integration tests in Rails, period. Only downside? So many characters to type. That's a snippet right there. Looking for more? Install language-ruby, and bask at its awesomeness.

Key mappings

Again, great defaults: I use the key mappings that come with the editor as much as possible. Here are my favorites:

⇧ + ⌥ + K: Delete line
⌘ + D: "Magic" selector, just like Sublime Text:

⌘ + L: Select line
Ctrl + ⌘ + Up/Down: Move line(s) up and down
⌘ + Z,Y: Go back to where I was (hacky, but works!)

And for everything else, there's vim-mode.


If you've made it this far, either you use Atom already, or you're seriously thinking on switching to it. For the almost-atom users, here's one last thought. Would you rather invest decades of use on a propietary editor, or on an open-source one that you can hack on top of, at every level? The more us devs use Atom, the better it gets.


  1. I am happy to find this post Very useful for me, as it contains lot of information. I Always prefer to read The Quality and glad I found this thing in you post. Thanks web developers

  2. Today even the businesses run online with their online productivity overshadowing their real world productivity. The web has become an inimitable marketplace for people to buy and sell all kinds of products and services.affordable website design