Atom Text Snippets

Text editors are powerful tools to increase your efficiency.  I’ve finally gotten around to learning about customizing Atom’s text snippets, and I have a few tips to share here.

In all the time I’ve been learning to code, I have tried to avoid optimizing my text editor or even learning too much about its functionality.  I believe in muscle memory.  Typing code, over and over, helps me to internalize the syntax and structure of a programming language.  This is not entirely scientific on my part, but I come from a background of first learning to play guitar, and then practicing martial arts for many years.  Both of these disciplines require hours of repetition, day after day.

When I started learning to code, I found that Zed Shaw’s Learn Ruby the Hard Way gave me the most bang for my buck (yes, I know it’s free) because he requires you to type out the code, and then reread it, instead of just reading about the concepts.

But at some point, learning becomes doing, and now I find myself getting paid to reskin an app.  This requires entering the same code in multiple places across many files.  Providing value to my client requires speed.

Ag is a useful tool for finding the code I want to change (if you aren’t using it, stop reading this and start reading this).  But knowing is only half the battle.  I also have to go into each file, delete the old code, and type in the new.

Snippets allow you to type a short abbreviation, and expand that to whatever you want.  As an example, I have the following code in my snippets.cson file:


This allows me to open a new file, save it as an html file, and then type ‘html5sk’ and hit enter.  An tabbed-in html page appears in a puff of smoke!

The atom/snippets page really has all the information you’ll need to get things set up, and there are several tutorials out there as well.  But setup can be a little finicky.  One of the most useful bits of information is figuring out what context your snippets need – especially with Rails.  I struggled with this for a while, because ‘.text.html’ seems to work in some cases but not others, ‘.text.erb’ works in a different set of cases, and so on.

The easy way to determine this is to open a file that you want to use a snippet in.  Then hit ctrl-shift-p.  A box will open up at the top.  Type “Editor: Log” and you’ll see “Editor: Log Cursor Scope”.  Click on that or hit enter if it’s highlighted, and you’ll see the scope for that file.

Also, don’t forget to put a dot before the scope in your cson file, eg ‘.text.html.ruby’.

With a little experimentation you should be well on your way!

Linter to the Rescue

I’m currently using the Atom text editor.  I’ve been trying to stay text-editor agnostic, figuring that I will have plenty of time to optimize later.  But lately I’ve been hearing that Vim is worth learning.  This thoughtbot post pushed me over the edge, and so this weekend I gave it a shot.  I’m still nowhere near ready to use it all the time but working on it.

So tonight I started working on learning to use React with a Rails app.  I decided to start building in Atom at first, since that’s what I’m used to.  After a while though I figured I’d try Vim.

Of course, I jacked up the spacing on the file I was working on, and gave up (for tonight).  I went back into Atom and started working.   I edited the component I was working on, refreshed the browser, and:

ExecJS::RuntimeError  SyntaxError: [stdin]:5:10: unexpected . (ExecJS::RuntimeError)

The error was coming from layouts/application.html.erb, which was all auto generated code.  Wth?  I looked back over all my code, looking carefully at the indentations of the coffeescript.  Everything, line by line, was correct.

Luckily, Atom has a package manager and so it was easy to install coffee-lint. Sure enough:  I had added a line that somehow got pushed down below the code I was looking at.   Since the whole file was only a few lines long, I didn’t think to scroll down.  But the linter found the error immediately.

So… Atom 1, Vim 0.  I see that Vim has some linters available though so I’ll be giving it another shot.