03 Oct 2015
My Atom Setup
“A collection of useful packages for the Atom editor”

UPDATE: —As of late 2017, I no longer use Atom and no longer recommend it as a text editor. I hadn’t realised quite how sluggish and what a memory hog was until, one day, I tried to open a largeish database dump file [about 20MB] and Atom would spin its cogs for about five minutes and then crash and burn, every time.

I fired up my former favourite text editor, TextMate and it not only opened the big file easily, but did so in a couple of seconds.

As I worked on the file in TextMate, I realised that it was a far superior application to Atom in almost every way. So I switched back to using TextMate and abandoned Atom. About the only thing I miss from Atom was the brilliant 'Terminal-Plus' package.

Sometimes "old" and "faithful" beats "new" and "shiney"!

I’m a bit of a recent convert to the Atom text editor. But I’ve been using it as my main mangler-of-text for a month or two now. So I thought it was high time I did one of those nerdy "Here’s my setup" type posts. These are the themes and packages I’m finding useful at the minute:

Themes

I’ve not gone for anything 3rd-party with regard to themes. I’m quite happy enough with the built-in options, as I was already using Solarised Light in Textmate and Vim:

atomsetup01
Theme choices

Built-In Packages Disabled

As every additional package you install will slow the editor down a fraction, I’ve disabled quite a few of the built-in ones which I don’t need or want, to hopefully redress the balance a bit.

Redundant Language Support

First up, support for a slew of languages I don’t use:

atomsetup02
Not speaking your language

And a couple more:

atomsetup03
Not speaking your language

On the face of it fairly useful but, in reality I’ll never remember the keyboard shortcut and it’s not exactly much of a hassle copying and pasting a URL into a browser window:

atomsetup04
Link

Metrics Package

Naughty! Naughty! –love your editor Atom. But collecting user data and passing it to Google Analytics AND having that preference enabled by default is just not cricket. So, off goes the Metrics package!

atomsetup05
Metrics

Open on Github Package

Another potentially useful package, were t’not for the fact I use BitBucket instead of Github. Luckily "There’s an App Package for That" too [see later].

atomsetup06
Open on Github

Package-Generator & Styleguide Packages

The next two; Package-Generator and Styleguide are only needed if you’re developing your own Atom packages. Which I’m not, so I don’t need them either:

atomsetup07
Package-Generator and Styleguide

Welcome Package

And finally, Welcome which displays some useful 'getting started' info, when you first launch Atom. Been there. Done that. RTFM. So that can go beddy-byes too:

atomsetup08
Welcome

3rd-Party Packages Installed

Here are the 3rd-party packages I’ve got installed at the moment. I’m trying to keep them to a minimum as I don’t want to overload my editor with a load of bloat. But these I’m finding useful:

Autoclose-HTML Package

Autoclose-HTML works similarly to the tag autocompletion in Textmate. You type an opening tag, say <p> and Autoclose-HTML adds the closing tag and moves the cursor between them. Works with other tags too, such as Golang Template {{ ... }} tags, which is handy.

atomsetup09
Autoclose-HTML

Config-Import-Export Package

Config-Import-Export allows you to export your Atom configuration as a .json file, which you can then import into another copy of Atom, whereupon it will set all options the same and install any required packages. Very handy, although you will need to manually install at least this package itself on your other copy of Atom, so you can run it and import your config.

It defaults to saving the config file in ~/AtomBackup which is understandable but a bit useless. Luckily you can change this in the settings and I’ve set it up to save my config files to my Dropbox, which then allows me to easily import them into Atom on all my other comps.

atomsetup10
Config-Import-Export

File-Icons Package

File-Icons is not exactly a productivity-enhancing package but it makes Atom look even nicer by adding custom icons [in the 'Tree View' in the sidebar] for a load of different filetypes.

atomsetup11
File-Icons
atomsetup12
File-Icons in action

Go-Plus Package

Go-Plus adds a load of useful Golang related commands to Atom.

As my attempts to learn Golang tend to be intermittent, I’ve not done much more than 'kick the metaphorical tyres' on this package. But I keep it around anyway, to act as a spur to my Golang-neglecting guilty conscience. This package takes quite a bit of setting up, as it has a few dependencies and needs telling about various configuration infos relating to your Golang setup.

atomsetup13
Go-Plus

Less-Autocompile Package

Using a CSS pre-compiler is another one of those things that I’ve long felt I should be doing, but never really found a workflow for, which didn’t involve stepping outside my editor and firing up an additional app –and therefore seemed like more hassle than it was worth.

That changed when I discovered the Less-Autocompile package. You just add some basic configuration options [see below] as a comment at the top of your .less file and then, every time you save the file, Less-Autocompile re-generates the resulting CSS file. As regards not interrupting your existing work-flow, that’s about as seamless as you can get.

atomsetup14
Less-Autocompile
atomsetup15
This comment at the top of my .less file is all that’s needed for Less-Autocompile to work its magic

Markdown-Themeable-PDF Package

One of the inexplicable omissions that Atom has [or 'hasn’t', rather] is that it doesn’t provide a hook into the system Print function at all. In fact, way back in the day when I first downloaded the editor, this is what completely put me off adopting it. It’s not that I’m in the habit of printing out source code all the time, but I do tend to also use my text editor for composing simple electronic documents in Markdown, and having no way to 'print' these to PDF was a real deal-breaker for me.

Luckily on my tentative return to Atom, I came across Markdown-Themeable-PDF, a package which allows you to export Markdown documents to PDF. It’s not perfect by any means; by default it puts an ugly header at the top of exported PDFs and, although you can turn this off in the settings, that still leaves a space where the header used to be. So the PDFs have a big gap at the top. But at least it’s a partial solution until someone comes up with a way of adding 'proper' printing to Atom.

atomsetup16
Markdown-Themeable-PDF

Markdown-Writer Package

If you’re working in Markdown a lot [as I tend to] you need Markdown-Writer. It expands on Atom’s basic Markdown support by allowing you to use keyboard shortcuts like CMD+I and CMD+B to quickly surround selected text in the appropriate markdown Bold and Italic tags. It also adds auto-list-item creating and a wee bit of syntax colouring.

One thing I found was that 'out of the box' it used underscores for Bold and Italic markup, rather than the asterisks I prefer. But luckily that’s easy enough to fix by editing its config file.

atomsetup17
Markdown-Writer
atomsetup17a
Markdown-Writer in action

Open-On-Bitbucket Package

As I said above, I disabled the built-in Open-On-Github package because I use Bitbucket instead. The Open-On-Bitbucket package is pretty much a clone of Open-On-Github and, as the name suggests, allows you to open the current version of the file you’re working on, in your corresponding Bitbucket repo.

atomsetup18
Open-On-Bitbucket

Open-Recent Package

Along with with the bewildering decision not to hook into the system 'Print' dialogue, the Atom developers also decided not to bother hooking into the system 'Recent' menu, so there’s no Open Recent... function in Atom. The Open-Recent package restores some sanity.

atomsetup19
Open Recent
atomsetup20
Yes folks. This actually needs a plugin!

PDF-View Package

Out of the box, Atom can view image files inline in the editor, which is really useful when working on web projects. PDF-View complements this by adding the ability to also view PDF files directly in the editor. This can also come in handy. For the same reason…​ or just to browse a bit of documentation, without having to fire up a separate PDF viewing app.

atomsetup21
PDF-View

Pigments Package

Pigments is a package which 'colourises' your colour declarations [both Hex and Colour Name] within your CSS files, so you can spot at a glance where certain colours are being used and what the code for them is.

atomsetup22
Pigments
atomsetup23
Pigments in action

Actually, out of the box, Pigments colourises hex definitions and colour names in almost any kind of file, which can be a bit distracting. Finding out how to make it behave more sensibly is a bit confusing and I had a bit of a [polite] argument with the developer about this on Github. He did send me the following option, which will tell pigments to only colourise in .CSS files [You can see why it would be hard to work this out for yourself!]

atomsetup24
Pigments setting to only colourise within .CSS files

Project-Manager Package

Effectively you can work with projects in Atom by just dragging a folder full of files onto the Atom icon, whereupon the 'Tree View' browser sidebar thingy will allow you to access all the files within that folder. The Project-Manager package makes this a bit more user-friendly by allowing you to label a folder full of files as being a 'Project', which is then available to open from a menu at the top of the editor window, which you invoke by pressing CTRL+CMD+P.

A nice wee time saver.

atomsetup25
Project-Manager
atomsetup26
Project-Manager in action

Split-Diff Package

If you split your Atom editor window into two panes, and load a different file in each, the Split-Diff package allows you to apply a *nix-style 'diff' function, which highlights the differences between the two files. Back in the days before I discovered the joys of Git and rolling-back cock-ups, this was the kind of thing I resorted to, when trying to put stuff I’d broken back together again.

atomsetup27
Split-Diff
atomsetup28
Split-Diff in action

Terminal-Plus Package

Terminal-Plus provides a wee pop-up terminal pane at the bottom of your editor window. What’s nice about it is that it hooks into your system terminal settings so, as you can see in the screengrab, I’m getting my custom prompt and my ZSH terminal. Terminal-Plus isn’t as full featured as my terminal of choice, iTerm2. It doesn’t do tabs, for a start. But for simple tasks like rebuilding my Hugo site, or committing changes to a git repo, without having to leave the editor, it’s pretty damned nifty.

atomsetup29
Terminal-Plus in action
atomsetup30
Terminal-Plus in action

Todo-Show Package

And last, but by no means least, we have Todo-Show. This package will hunt through all the comments in the source code of your files, looking for keywords like TODO, FIXME, etc and then present you with a nice list of them all, so you can get to work righting the wrongs and fighting for bracketty justice. Another one I’ve not used in anger yet, as I’m not currently working on anything which contains much in the way of 'fix-this-later' sections.

atomsetup31
Todo-Show
Back to Top