Observations on Atom Customization
Preface: So this is my first article here on Medium! I’m going to have a lot to say at some point. Learning programming at this point in my life, with so many experiences under my belts — well, let’s just say it gives me a perspective. Thanks in advance for reading!
This article is about customizing the Atom environment. I’ll discuss the specifics of how to do it as well as reasons for doing it in the first place — the how and why.
On Customizing a Software Environment
Some undisclosed number of years ago I was a drafter/designer. Though later in my career I used 3D modeling software like SolidWorks and Pro-Engineer, the main tool I used was AutoCAD. I was pretty good at my job, I think. I was able to work on some amazing projects at good companies, and was often a go-to guy helping new drafters and engineers who weren’t familiar with the software.
I certainly wasn’t perfect, but my managers would often commend me on the speed at which I could draw, create objects, and place dimensions in AutoCAD. I was proud of the fact that when looking over my shoulder people would have to catch up to figure out what I was doing. I’d sometimes get comments like “How did you do that so fast?” and “Wait…. you can do that?”. I remember one of my bosses seeing me create an array of objects that were already spaced by a needed dimension, using them as essentially construction lines to make new markers, then deleting them, all in a matter of a few seconds — his reaction was “Ahhh man, that’s cheating!” (said with a pleased grin).
The main reason I was fast was because I made extensive use of Autocad’s ability to create customizable shortcuts through what they call “lisp routines” after their scripting language Lisp. These are very simple lines of intuitive code that make shortcuts — type in the identifying letters and the rest happens. Here’s an example of what they look like:
As you can imagine, you use the mouse constantly when using a drawing program. So (unlike these examples) I wrote 15 or so shortcuts that took advantage of my left hand staying on the keyboard. Point-and-click with my right hand on the mouse and quickly enter related commands with my left.
Setting up my work environment provided several benefits. Raw speed is a good thing (especially if you have to rush to get something changed — I remember last-minute changes that people were waiting on, in a few cases literally holding up someone in the machine shop or a welder in the field!). But another underrated benefit is fluidity. You can get into a real rhythm while working when the software starts to “get out of your way” and just do what you want it to do. You find it’s much easier to get “in the zone” and are spending more of your time thinking about what you’re trying to accomplish than how to get the software to do what you’re thinking of. And, for me at least, it made work more fun! I just got a kick out of sitting down and being able to crank out lines and objects and quickly build stuff.
The Atom Environment: Snippets and Keybindings
So now I’m learning software development at Turing and am using Atom daily (for many many hours a day, in fact!).
When I first started I noticed some similarities between AutoCAD and Atom. Atom provides quite a few handy built-in shortcuts, and numerous other speed-enhancing measures (such as smart bulk copying and moving of code, a quick finder that almost entirely eliminates hunting for files, and many more). It also give you access to user-created packages that further increase speed and accuracy, such as ones that give instant feedback on missing ends or other syntax issues and adding easily-recognizable icons giving filetype feedback.
But Atom is also highly customizable and encourages users to make the environment their own. The main way this is done is by two means of shortcut-making: snippets and keybindings.
Atom Snippets
Snippets are short blocks of code that will perform commands when you select them. If you have autocomplete set to tab only (HIGHLY recommended!) you select a snippet by typing in a few letters (or one) and hitting tab for what comes up. The best way to do this is to type until the snippet you want has been isolated to the top of the list, allowing you to select it without using the down arrow. Here’s what the snippet popup looks like:
Atom comes with a decent number of built-in snippets. You can find these by getting into the command palette (cmd + shift + p) and entering “snippets: available”.
Getting to know these built-in snippets is obviously handy. But in my view the real boost comes from creating your own snippets. And doing so is really quite easy. (I invite you to open Atom and try it. Just do it!)
Create Your First Snippet
In the Atom pull-down menu select “snippets”. This will open a CoffeeScript file where you can enter snippet code. Odds are good that you’ve already done some coding (why else would you be reading this article?) so what you see shouldn’t overwhelm you. The coding demands are minimal. You don’t have to actually know how to code in CoffeeScript to create snippets for two reasons. The first: the file gives you essentially a “quick start” guide in the comments, pointing you to Atom’s online manual for greater details. The second: Atom comes with a snippet-making-snippet triggered by typing “snip”….
The four parts of a snippet from top to bottom are: the language identifier, the snippet name, prefix, and body.
The language identifier is meant to be a heading for a group of snippets that work for a specific programming language. The example above from the “snip” snippet is for JavaScript — meaning that the snippets in this grouping will only be available when you’re working on a JavaScript file.
The snippet name is just for us silly humans. The prefix and body are where the actual work is done.
The prefix is the combination of keys that will trigger the popup that allows you to select the snippet. Choose this carefully. You’re going to want to using a unique but short letter combination. If you choose one that already exists yours will come up in its place — fine if the one you essentially overwrote is not useful but there might come a time when you want it. If your prefix is unique but very similar to an existing snippet it might not come up at the top of the popup menu. Hitting tab won’t get you what you want, and nothing can ruin your workflow more than spitting out a block of code that makes you mentally and “physically” backtrack to delete it.
The body of the snippet is the output of the shortcut — what will appear in your code. Obviously this should be tested for accuracy and syntax. But more than just spitting out a handy block of code, CoffeeScript gives you access to a few clever tricks.
From my code above the ‘pry’ snippet is very simple but extremely handy. I never have to remember to require pry — whenever I need it it’s four keystrokes away.
In my ‘en’, ‘dfi’, and ‘arr’ snippets you’ll see \t and \n. These are escape codes that result in tabs or new lines being output.
In my ‘en’ snippet you find a $1. This moves the cursor back to this location on completion of the snippet. (This is one of my favorite snippets because it means I can quickly add an end and will end up with the cursor exactly where I need it — all in three keystrokes.)
There’s a Snippet For That
I recommend creating a snippet when you find you’re typing something fairly long over and over again, or when you have to repeatedly enter something that’s counter-intuitive or has very persnickety syntax. But fun is also a totally respectable reason! I think you’ll just get a kick out of writing these and using them (especially when someone is watching you code).
Trick out your system. You’ll get out of your own way and enjoy coding just a little bit more.
