Atom Editor

Choosing the editor you are going to use to code is not a simple decision. Fortunately, nowadays you have many alternatives available.

I have to say that in my beginnings as a Java developer I was always an Eclipse fan. I know many of you hate it, because of it’s a heavy tool that consumes many system resources. But IMHO all its functionalities and programming aids it offers clearly compensate these problems.

After jumping to web development in general and WordPress plugin development in particular, I spent some time looking for alternatives to Eclipse. I tried Sublime for a while, but I had a lot of trouble maintaining a setup that worked without problems every time it had an update. I also used PHPStorm, and the truth is that the experience was good, being the closest alternative to Eclipse I found. But, unfortunately, its UI for Mac OS X did not convince me…

Finally I gave Atom a try, and I must say I’m quite happy with it! In fact, all my contributions to the development of our plugin Nelio Content have been made from this editor, including all the Node.js code in the server side of Nelio Content that runs in Amazon’s cloud.

Screenshot of Atom.
Screenshot of Atom.

If you do not know Atom, I recommend you to visit its website and take a look at it. From my point of view, it has the best package manager you can find today in a text editor. And to this day, Atom has not given me any headaches—it just works. And speaking of packages, here you have a list with the most interesting ones that I have installed and used in my developments. Let’s review them!

Most Recommended Atom Packages

Remember, these are the most useful packages to me—maybe you will find others that you like more or serve you better. Anyway, I’m sure you will also find most of them useful.

file-icons

This simple package adds icons and colors to the files that we have in Atom according to their specific file type so that it is easier to identify them.

Icons that file-icons plugin uses to identify file types.
Icons that file-icons package uses to identify file types.

At a glance you will know the type of file in front of you. It seems silly, but once you try it you can not stop using it.

minimap

If you are a programmer, you will probably find yourself editing very long files. With minimap you can see a representation of the contents of the file on the right side of the code. This way you’ll see at a glance where you are in the file without losing context.

Look at the mini map on the right side, highlighting changes in the code.
Look at the mini map on the right side, highlighting changes in the code.

And best thing here is that you can complement it with the package minimap-git-diff, which marks on the mini map the places where you’ve made changes.

pigments

This package shows you the colors it finds within your files. That’s particularly useful when editing CSS rules:

Ejemplo de uso de pigments para Atom.
Usage example of pigments for Atom.

color-picker

With this package you can easily select the color you want to include in your CSS style. Just right click and select “Color Picker” to open a color picker where you visually choose the color that best suits your needs. It is the best companion for the previous package.

Selector de color de colorpicker.
Color picker that opens with the color-picker package.

highlight-selected

This package adds a functionality that (surprisingly) is not included by default in the core of Atom. Just double-click a word in the editor and then Atom will highlight that word and any other occurrences in the rest of the file.

Funcionamiento del plugin highlight-selected.
Look how the highlight-selected package works.

If you’re a developer, it’s great to install it and see where variables or functions appear in the code.

goto-definition

An Eclipse functionality that I miss the most is to CTRL+click on a function, object, or class so that you can directly jump to its definition. Although it is not perfect, the best solution I have found in Atom is this package—I use every day to jump around my code!

Navegación entre archivos mediante el plugin goto-definition.
Navigation through code files using the goto-definition package.

You need to place the cursor over what you want to look for (the name of a function, for example) and do Alt+Cmd+Enter. This will either take you to the definition of said function or will open a floating dialog with all its occurrences in the project, so that you can decide where you want to jump to.

git-plus

This package integrates Git version control inside your Atom editor. This way you can do everything you do with Git from the terminal without the terminal.

Funcionamiento de git-plus en Atom.
Package git-plus on Atom.

I used to use it quite a lot, but I’ve been lately using the terminal counterpart. I’m more comfortable managing changes with Git directly from the command line instead of using this package in Atom, but I might give it a (second) try in the future).

git-time-machine

Another package that I have left apart but I still have installed is git-time-machine.

Funcionamiento de git-time-machine.
The timeline showing changes using package git-time-machine.

Given any file within a project controlled by Git, you can go back in time to see the changes you have made. It Includes an horizontal bar with the timeline showing the changes. Very useful when you want to see old modifications in your code.

merge-conflicts

When you use Git regularly and work with other developers, you’ve probably found yourself in situations where your code conflicts with HEAD.

Funcionamiento de merge-conflicts en Atom.
Package merge-conflicts in Atom.

Fixing these conflicts is complicated and you won’t be able to upload your changes until you fix them. Fortunately, the merge-conflicts package provides you with assistance in this task, making the process much more visual and simple. Don’t hesitate to try it.

todo-show

I bet you have your code plenty of comments pointing to stuff that should be improved or addressed in the future. But you never address them, because you forget about them. Well, luckily you can install the todo-show package, which opens a panel in Atom with all the comments it finds containing the words TODO, FIXME, etc.

Panel that includes all the comments with the tags TODO, FIXME, etc.
Panel that includes all the comments with the tags TODO, FIXME, etc.

This way, before launching your code to the public you can always quickly review it and see if you left something pending to fix.

linter

As a Java developer, I loved every time Eclipse was smarter than me and highlighted the errors it was detecting while I was programming code. It’s an incredible functionality that reduces errors to the minimum expression.

In Atom, the equivalent that works best for me is linter. It’s a package that adds control and visualization of errors in the editor itself. And even though it doesn’t detect everything, it helps me a lot.

Resaltado y control de errores con linter en Atom.
Highlight and error control with linter in Atom.

In addition to this basic linter package, my installation also includes the following linter extensions for Atom:

atom-beautify

This package will make your files look more beautiful and more readable as it is responsible for controlling that the indentation is correct. That is, it checks that the lines of code are well ordered and start at the proper place. It is especially useful for following style guides in files that have multiple nested loops or functions that call other functions inside. It also supports most of the languages you can use today to code.

atom-ternjs

Finally, another functionality that today is not properly solved in editors like Atom is autocompletion. In addition to making you more efficient as a programmer, a good autocomplete functionality will avoid errors while you write your code. In my case, most of the code I usually write in Atom is JavaScript, so I installed the atom-ternjs package, which manages autocompletion. Not perfect, but better than nothing ?

Bonus: atom-2048

If you want to take a break for a while from work, here is a package that allows you to play the popular game 2048 within the editor ?

Jugando al 2048 desde el propio Atom. ¡Que no te pille tu jefe!
Playing 2048 from inside Atom. Don’t let your boss catch you!

Final remarks

The Atom editor is my favorite code editor today. You have a lot of packages available and it’s pretty stable. However, there are always things that could be improved. In particular, I still miss the possibility of having a panel with the list of functions that are defined within a file. This is something I’ve been missing since I left Eclipse, and I have not yet found an editor that solves it well. I recently found a package for Atom that “works”, but its quality is appalling.

If you also use Atom and you think that I have forgot some packages, leave me a comment. Let’s complete the list together!

Featured image by Atom.

5 responses to “Essential Atom Packages For Every Web Developer”

  1. Quadryl Avatar
    Quadryl

    Hi Antonio Villegas, i’m new to Atom editor and i share same believe that it is the best editor a programmer can lay his hand on.
    I have not been able to install any package at all. i read some where that i need to install atom apm manually but i have not seen where i can do that.
    After installation, HTML and CSS works perfectly well but PHP and connection to database/xampp localhost as not been working.
    Guide lines on how to solve this will be appreciated.
    Best Regards.

    1. Antonio Villegas Avatar

      You should take a look at the official documentation. But you can install packages directly from Atom itself. No need to use apm if you don’t want to.

  2. Divakar Avatar
    Divakar

    This list is really good and is very much essential to be the web developer. Thank for such a nice article

  3. Manuel Avatar
    Manuel

    Thank you for this essential start essential packages guide!!!!

Leave a Reply

Your email address will not be published. Required fields are marked *

I have read and agree to the Nelio Software Privacy Policy

Your personal data will be located on SiteGround and will be treated by Nelio Software with the sole purpose of publishing this comment here. The legitimation is carried out through your express consent. Contact us to access, rectify, limit, or delete your data.