Living with Atom

In Technology, Tips

Sublime Text used to be my goto editor on Mac for years now, however there were some things I didn’t like about it. It is fast and works well. There are some downsides however; it’s paid software (to be fair, you can evaluate it forever if you’d want), the price however for a real license is $70 which always prevented me from buying (bit too pricey for what it is). At the moment Sublime Text isn’t very actively maintained and doesn’t have native package support. It is possible to install packages and there are plenty of them available but they tend to stop working randomly as a result from conflicts with other packages and updates. It just doesn’t feel as good as it should anymore.

Enter Atom; Atom is a text editor that’s modern, approachable, yet hackable to the core—a tool you can customize to do anything but also use productively without ever touching a config file. Having gotten in touch with Atom because of it being the core of the excellent Particle Dev environment that we use in the LightSaga development and it’s star role as the editor in which the Api Workbench (for RAML) plugin runs I’ve been using it as my main editor the last months and I’ve been very happy with my experience. While it was missing some features in its core set of packages that I’ve come to love from Sublime Text, I was able to find a community package for any of those features that filled my need.

Some of my favorite packages include:

sublime-style-column-slection

68747470733a2f2f7261772e6769746875622e636f6d2f626967666976652f61746f6d2d7375626c696d652d73656c6563742f6d61737465722f73637265656e73686f742e706e67

Enable Sublime style ‘Column Selection’. Just hold ‘alt’ while you select, or select using your middle mouse button. Also similar to Texmate’s ‘Multiple Carets’, or BBEdit’s ‘Block Select’

file-icons

68747470733a2f2f7261772e67697468756275736572636f6e74656e742e636f6d2f44616e42726f6f6b65722f66696c652d69636f6e732f6d61737465722f66696c652d69636f6e732e706e67

Assign file extension icons and colours for improved visual grepping. A number of icons and colours are provided by default for a range of common file types. If you have file that you would like custom icons for you can easily add this yourself.

highlight-line

687474703a2f2f692e696d6775722e636f6d2f666133325774722e706e67

Highlights the current line in the editor; really simple.

hightlight-selected

687474703a2f2f692e696d6775722e636f6d2f4335466e7a7a512e676966

Highlights the current word selected when double clicking throughout the open file.

minimap

68747470733a2f2f6769746875622e636f6d2f61746f6d2d6d696e696d61702f6d696e696d61702f626c6f622f6d61737465722f7265736f75726365732f73637265656e73686f742e706e673f7261773d74727565

A preview of the full source code. A lot of extra plugins to extend the functionality of the minimap are also available; such as Highlight SelectedPigments and many more.

pigments

68747470733a2f2f6769746875622e636f6d2f61626533332f61746f6d2d7069676d656e74732f626c6f622f6d61737465722f7265736f75726365732f7069676d656e74732e6769663f7261773d74727565

Pigments will scan source files in your project directories looking for colors and will build a palette with all of them. Then for each opened file, it will use the palette to evaluate the value of a given color. The legible source paths can be defined through various settings either at the global or per project level.

Pigments supports out of the box most of the color transformations functions and expressions of the three biggest CSS pre-processors out there, namely LESS, Sass and Stylus. However, it doesn’t mean pigments is able to parse and understand all of these languages constructs.