Atom Extensions
What feels like eons ago, I applied to a few front-end development roles at some startups. During one interview, I was asked which text editor I used. The interviewer seemed amused by my response of SublimeText, adding “Well at least you don’t use TextWrangler.” I smiled weakly, having switched to SublimeText from TextWrangler only weeks before. At the time I chalked it up to some kind of developer snobbery, but the more time I spend coding, the more I see good text editors as real productivity enhancers that allow you to bypass much of the tedium of coding in favor of focusing on the important stuff. A good text editor can be more than the sum of its parts.
Though it can at times be somewhat laggy, especially when dealing with larger file sizes, Atom seems generally easier and faster to customize than SublimeText, allows you to view images, and is free. The fact that it was made by the people at GitHub to me also speaks to its quality. For this and a few other reasons, I really like Atom. (I’m not going to go into Vim and Emacs because the learning curve seems really steep and they just look kind of ugly).
git time machine
By pressing ALT-T on files that have been tracked with git, you can see a history of commits made and their commit messages. If you click on the message Atom will pull up that version of the file to the right of the current version.
minimap
Minimap shows you a mini version of your file on the right hand side, borrowing from Sublime’s interface. It added almost half a second to my startup time (significantly more than anything else), so weigh that against its utility.
linter
Think of linter as like a spellcheck for code. It’s helpful because it shows you errors as they are created, rather than having to trawl back through all your code when it doesn’t work.
It differentiates between warnings (orange) as things that are bad form, and errors (red) as things that will definitely break your code, though this is customizable.
emmet
In a nutshell, emmet lets you work faster by using a lot of shorthand. In the below example, it takes a css-like syntax and transforms it into formatted html after you hit tab.
color picker
Press CMD-SHIFT-C activate wherever you want the color to go, choose your color, and then click on the color value text to insert it.
pigments
Pigments takes your color values and displays them for you, including applicable words.