Recommended packages for Atom

If you have read my previous article, you may have chosen to give Atom a try.
The best way to describe what Atom is, is to quote its website (https://atom.io/):

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.

Atom works. It’s simple, yet very powerful. It relies on community plugins to extend its base features. Ah, and it’s available on Windows, Mac and Linux (meaning you don’t have to follow all three previous tutorials on Ubuntu to test it).

In this article, I’ll show you some of the best plugins (called packages) that you definitively should check out.

If you are starting Atom for the first time, you’ll probably see this welcome screen.
Atom Welcome Screen

It will basically summarize the first steps you can take in Atom :

  • Open a Project : This will open the project tree on the left, and set it as your workspace
  • Install a Package : This is the main topic we will discuss later on. Packages are extensions that can add features, shortcuts, etc. Even the core features of Atom are bundled as packages, making it very modular and hackable.
  • Choose a Theme : Themes will allow you to customize Atom, from the editor colors to the button skins. In the previous screenshots, I was using the default One Dark theme.
  • Customize the sytling : If you want very deep customization of the interface, you can even add your own CSS.
  • Hack on the Init Script : You can use it to change the behavior of Atom by editing the startup script
  • Add a Snipper : Create you own code snippets to generate code from a predefined prefix.
  • Learn Keyboard shortcuts : This should be self-explanatory. All IDE comes with lots of key-bindings, and learning them is often a good idea.

Themes

Themes can be install by opening the Edit > Preferences Menu, and then going into the Install section. Don’t forget to click on “Themes” when searching by names.
Installing new themes in Atom

One-Light

For those that don’t like dark themes, here is the default One-Light theme. I was a big fan of light themes when I started coding. Then I discovered IntelliJ and its Darkula Theme, and it was love at first sight. This is a major improvement from Eclipse‘s dark themes (they just don’t work… too much contrast maybe)
Atom One Light Theme

Atom-Material

After some customization (no custom CSS, I only used the configuration screen installed with the theme), this is what I came up with using the “Atom-Material-UI” theme. If you are not familiar with Material Design (by Google), I recommend you to read this article : http://design.google.com/resources
Atom Material UI Theme

Packages

Based on what you will mostly use Atom for, you may need very different packages. I’ll try to cover a bit of everything by showing you what packages I’ve installed. Installation is done similarly to Themes, by switching to Packages before searching.

Markdown Writer

As I’m using Markdown syntax to write this blog, this package was one of my top priority. It allows to automatically insert elements, tables, etc by using the packages menu. Note that by default, Atom includes a markdown preview package that will show you a live preview of what you are typing.
Atom Markdown Writer

Atom Hexo

Sometimes, I feel lazy and I don’t want to switch to the terminal. This package will allow me to trigger some of the Hexo commands within Atom. If you want more integration, you’ll find another alternative below.
Atom Hexo

File Icons

File-icons gives more “life” to you project files by using improved and colored icons. Here is a comparison with and without the plugin.

Minimap

I’m not personaly using it, but some people likes to have a small scrollable view of their code. That’s exactly what this package does.
Atom Minimap

Pigments

Pigment is very useful for CSS developers. It will actually show the color behind each color codes. By default, It will look like the left picture.
But I like it a bit more subtle, so I’ve changed the configuration to use the gutter mode instead.

Terminal plus

Terminal-Plus will embed your Ubuntu terminal inside Atom. This means you’ll have access to the same commands in your editor. Unfortunately, the last version is bugged, so you’ll need to follow these instructions once the package has been installed

  • First, we’ll need to edit ~/.atom/packages/terminal-plus/package.json
  • Then, replace "pty.js": "git+https://github.com/jeremyramin/pty.js.git#28f2667"With "pty.js": "git+https://github.com/jeremyramin/pty.js.git"
  • Now, you just have to type in these commands :
    1
    2
    3
    cd ~/.atom/packages/terminal-plus/
    npm install
    apm rebuild

Restart Atom, and it should work as below.
Atom Pigments

Note : the installation guide tells you to install node-gyp first (it’s a dependency). Simply open a terminal and type

1
npm install -g node-gyp

Complete instructions are available here : https://github.com/nodejs/node-gyp#installation (I didn’t need to install the other dependencies though…)

BONUS : Active Power Mode

This very important packages will bring more satisfaction to every letters you type in your code. I recommend to have 3D acceleration for a more smooth experience.


Conclusion

I hope that you liked this post, and that I gave you some motivation to test Atom.
For now, this is my favorite editor at home, for my personal projects (at work, I’m using IntelliJ Ultimate, but I don’t have to pay it myself. At home, a free alternative is more than welcome).
We will probably meet again soon in the next post, where I will show you some tricks with Gimp !

Share Comments