Digital Geography

29. December 2016

The Atom Code Editor

There is this time of the year when the presents are unboxed and the new year hasn’t started yet, when a lot of people (including me) find some time for tinkering on personal projects. And I guess I am not the only one around here who is working on software projects. But because a proper code editor can make a huge difference,  I want to introduce you to my favorite tool for the job: Atom, a free, open source, modern and extensible, cross platform editor.

“Well”, you might be asking, “I am using program xy for writing my code already, and I don’t see a reason to change that”. Of course, in the end, it is always just plain text that you are saving in your editor, and you might be able to write huge programs even in Textpad on Windows. But once you have discovered the productivity boosts and little helpers that you can find in modern code editors or IDEs (Integrated Development Environments), you probably wont ever look back. But to make it clear right away, I don’t want to push you to using Atom explicitly, I just want to show why this is my editor of choice. There are plenty alternatives out there, but if your doing coding for a living, or even just write some scripts for your thesis, I recommend giving it a try.

Long story short, here is my love story with the Atom editor, starting with this fun video:

Features

Atom is a text editor initiated by GitHub, made for writing in plain text, especially code, but not only.  I also wrote my thesis on that, in LaTeX, with syntax checks and highlighting, and automatic recompilation. It is available for all major platforms such as Windows, Mac and Linux. Internally, it is built on web technologies, such as Javacript, which makes it significantly slower compared to some other code editors like Sublime Text (also popular, but neither free nor open source), but you wont probably notice the difference unless you open up some really huge data files (like CSV or GeoJSON), which is a bad idea anyway.

Core features of Atom are:

  • open multiple files in tabs
  • show project directory in tree view
  • syntax highlighting
  • auto completion
  • side-by-side editing in multiple panes
  • find and replace
  • package manager for functional extensions and themes
  • fully customizable
  • Git support (highlight code changes etc.)

The real strength of Atom is its ecosystem of extensions. There is really a lot of things to explore, just head over to https://atom.io/packages for packages or to https://atom.io/themes for syntax color schemes and user interface themes. Here is a shot of my personal setup, using Atom Material UI and Atom Material Numix Syntax. On the left, you can see the project directory in a tree view. In the main view, you can see one tab with a Python file opened, and nicely colored the syntactic structure of the code. On the right side, there is the a miniature view of the code, nice for scrolling with an overview, provided by the minimap package.

Extensions

As mentioned above, the most interesting thing about Atom is its extension ecosystem. I will show you which packages I use and recommend. You can install packages either via the Settings menu or via the command line package manager called like “apm install <package>”.

Programming Language Packages

Atom ships with a number of supported language definitions by default, which enables Atom to auto-complete and highlight code for these programming languages. If you are missing this for your favorite language, see if someone already created a package for that, which is normally the case, even for quite exotic languages. They typically follow the naming convention of “language-<name>”.

Coding Style

Linters are standalone tools that check source code files for syntax errors and coding style errors. If you have worked with Python before, you may have heard of pep8 for example, which does exactly this. Not every language comes with a strong opinion about how the source files should look like, but it has a number of advantages to stick to some best practices when formatting your code, like making it easier for collaborators to review your code, making it easier to read for yourself, or simply avoiding bugs. In the example image above, you can see the yellow dots depicting lines containing code style errros. Those errors won’t stop the code from running, but it tells me where I can do better, and it’s a great gamification to try to delete all coding style errors from your source code, resulting in much better code quality.

So, in order to install such linters, you have to install several components, depending on your language and platform, so please refer to the appropriate docs. The linter packages typically contain additional information on that. Atom comes with a base package “linter” by default, which provides the basic user interface elements, but you have to also install the appropriate linter language package (like “linter-pep8” for the Python pep8 linter) and the standalone linter itself (pep8 for Python), which is not an Atom package and has to be installed separately. Personally, I only use the pep8 and shellcheck linters as of now, the latter one being a great help writing better shell scripts.

In addition to linters, which check for bad coding style and report the errors line by line, I use the atom-beautify package to automatically fix those problems. But to be honest, I mostly use it for reversing uglified code such as Javascript, where whitespace has been removed to make it more compact when send over the wire, which is often the case with GeoJSON files.

Colors: Pigments and Color Picker

Pigments is a very helpful package if you are working with color codes. It colors the background of color formating strings according to the referenced color, making them easily distinguishable. Because, who remembers what color is #742c2c? Besides of that, it sums up your projects colors in a palette and is highly configurable in general. It also works well with the color-picker package, which allows you to edit and convert color codes in a nice color picker, without leaving Atom for another tool.

File Previews

Sometimes it is also nice to view some files without ever leaving your working environment, and that is why I like to use file previews in Atom. By default, Atom supports preview for Markdown files, so you can write your documents in one panel and have a live preview side-by-side. It can also preview raster image files, only for vector graphics in SVG format you need to install the additional svg-preview package. But the most useful previewer is of course geojson-preview, which shows your currently loaded GeoJSON file in a slippy map with just a keystroke (Ctrl-Shift-G). (Edit: the geojson-preview package currently fails to install. Check the GitHub repository if you want to help out).

So finally, I hope I could show you some of Atoms potential. Give it a try.