I recently decided to switch my main text editor for coding from Sublime Text to Atom by Github (mostly because my old work license expired when I changed jobs, but also because I liked Atom’s open-source nature). In the six months I’ve spent with it, I’ve grown to love it and wanted to share a few tips I’ve learned in the form of packages you should definitely install for almost any form of coding.
Really simple – makes files in your sidebar show up with file-type icons. Should just be part of Atom core really.
You’re linting your code for errors as you work, right?
A bit of a hangover from Sublime Text and probably not crucial but I love it just for familiarity. Again, should just be a core Atom feature.
Useful just to go back to where you were.
Super, super useful if you’ll be using Atom across multiple machines. It uses your Github account to sync your plugins/settings across computers – I use it to keep my work and home Atom instances in sync.
Working with text
Useful if you’re a bit OCD and want your import statements, object definitions or other repetitive code to be beautifully aligned.
Like aligner, but to the nth degree. I use this frequently when working with someone else’s (messy) code or improving things I’ve typed into the browser console etc.
Some days, you just want to feel epic when you code.
This one’s handy to just help you browse for files in your current project.
Gives you a shortcut for a handy color picker meaning you don’t have to leave your editor if you just want a half-decent colour.
I was initially sceptical of Emmet but decided to give it a try when building a few sites from scratch. Being able to type out a single line and get back dozens of boilerplate is great, and its CSS autocomplete shortcuts are nice too.
Super useful for me as I sometimes struggle to find my place when switching between Atom and other windows.
Another Sublime feature I missed – select a term and see where it’s used in other places.
The definitive colour preview package – it’s even clever enough to highlight interpreted variable colours and Sass functions if you enable the setting to do so.
I’d tried tern in the past and found it slow and unworkable (albeit for a massive project), but for smaller things I’ve found this handy – adds IDE-esque features to Atom allowing you to jump to the definition of a variable or function, and adds autocomplete tooltips for your own functions and modules to remind you what arguments they take (even inferring parameter types where it can).
A set of plugins to add a nifty toolbar menu to Atom allowing easy access to settings, splitscreen views and others.
These are the plugins and settings I use every day – I’d encourage you to try out a new editor for 2016 if you’re stuck on the non-free, slowly-updated Sublime Text. Github are putting a lot of work into Atom and it shows – my only criticism is its slow startup time but I can live with this, and a hackable, web technology-based editor is a welcome change. Give it a try.
Postscript: Kevin Mears on Twitter pointed out a nice Atom feature where you can “star” a package and then install another user’s starred packages. I just used
apm star --installed to automatically star all my installed packages, and you can install them with
apm stars --user mattandrews --install which will give you all my packages (there are a couple of misc extra ones not listed here, FYI). Thanks Kevin!