Essential Atom Packages For Every Web Developer

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.

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.

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.

Nelio Content

I’m so happy about Nelio Content that I will sound like a payed advocate… but here’s why you’ll love it: it works as promised, its auto-scheduling feature is top-notch, Nelio’s value for money is unmatched, and the support team feels like your own.

Panozk

WordPress.org

View Plans

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.

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:

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.

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.

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!

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.

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.

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.

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.

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.

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

• linter-alex: controls that you write better. That’s useful in your comments.
• linter-csslint: error detection in CSS files.
• linter-jscs: error detection in JavaScript files.
• linter-jsonlint: error detection in JSON files.
• linter-php: error detection in PHP files.
• linter-phpcs: error detection in PHP files using PHP_CodeSniffer (useful to follow WordPress style guides).
• linter-shellcheck: error detection in SHELL scripts.
• linter-swagger: error detection on Swagger files (used to define APIs).
• linter-write-good: error detection when you’re writing English texts.
• linter-xmllint: error detection in XML files.
• minimap-linter: highlights linter-detected errors in the minimap.

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 ?

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.