Must Haves

Atom Beautify

The most annoying thing about reading other people's code is that they always seems to be using a different indentation and formatting to you. With this package, you can convert almost any code (supports stupid amount of programming languages and frameworks) to a clean and nice to read format. If there is something you don't like about the default settings then there's option to customise each language and how it converts them.

Files Icon

There is no reason not to install this package, no matter what you use Atom for this will make it easier for you by changing the default file icon to these nice looking icons. This will make files standout from each other, and in general improves the look and feel of the whole editor. Trust me when I say once you start using this, there is no going back. I mean take a look at these nice icons :D

For more advances users, there are also setting to resize, change colours and etc.

Project Manager

I have quite a few projects going on at one point, switching between them is really annoying. Now with this package, you can switch between any project with a short cut.

Sync Settings

Switching between computers means setting up everything, and it is a pain to re-configure IDE/Text Editors. With this package you will be able to backup everything on Github Gist.

It could sync almost everything:

• Sync Atom's and package settings
• Sync installed packages
• Sync user keymaps
• Sync user styles
• Sync user init script
• Sync snippets
• Sync user defined text files
• Manual backup/restore to a gist

Pigments

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. This works with CSS or even SASS/SCSS, and makes it a lot easier to read other people's code as well.

This package has a lot of settings, the image below shows all the different visual ways to show the colour indicator. I personally prefer the coloured dot.

Minimap

This is a package ported over from Sublime Text I believe. It replaces the scroll bar of the opened document with a shrinked version, so when you won't ever need to scroll blindly anymore. If you are familiar with the page layout, it might even be possible to go to the correct section by simply clicking on it.

If you do decide to use Minimap, here's a few other packages to be used with this one minimap-highlight-selected and minimap-pigments.

Team Tools

Linter

Code linting is amazing, it forces consistency and ensures the whole development team is following the same format. I don't know how many versions of indentation I saw in previous projects before, the answer is too damn many. With linter, you won't be the "guy" that breaks the style everyone agreed on. In my previous work place, we went as far as making passing linter a process in the build process. So for each of the wrong styling added, it will throw and error/warning.

Obviously, this is the base package for language specific linters e.g. eslint for Javascript.

Linter Write Good

If you have heard of or used Grammarly, this is basically a simpler version of that in an Atom package. It will give writing suggestions and makes sure you write in proper English. I don't think the suggestions are as good, but it can help to identify some simple grammatical errors.

Editor Config

Following on from the Linter package, this is also designed to keep the code conssitent in a dev team. Unlike the linter, this will not throw any errors/warnings. Instead it will update the current editor's config to whatever configuration is set. Let's the use the indentation example again, if someone sets the indentation to 4 spaces in the config I will automatically get that setting when I load the project.

Highlight Selected

Double click on a word to highlight it throughout the open file. There's not much else to say really!

Indent Guide Improved

The default indentation on Atom is not very good, this package will show the indentation line depending when you click. See the Gif below to see it in action.

Web Development focused

Auto Close HTML

Note: Used for web development

In a lot of IDEs and TextEditors this would be a built-in feature, but since Atom is designed to be modular. The community has taken up the responsibility to add in these kind of useful features. This package will automatically add closing tags when you complete the opening tag. Sometimes it can be annoying in some scenario and I wish it can be a bit cleverer. But compared to the default behaviour, this is fantastic and makes writing HTML way easier.

Random And Fun

Atom Clock

Sometimes I want to cut all distractions out, and maximizes the Atom window to prevent myself from seeing notifications and etc. Hiding everything can be annoying when I want to check the time. With this package you will see a little clock on the bottom status bar, neat right? This package also allowing many variations of date/time formats and also available in different languages.

What Else? Well, Just Be Creative

The best functionality of Atom is not any of its packages, the ability to combine x number of packages to achieve one desired purpose. Here is a quick example of how I used different packages together to create a new feature.

When I'm working on web development projects, I often finds it annoying how I have to manually navigate to a HTML and double clicking on it to open it in a browser. I wanted an easy to do this when playing around with HTML, CSS and JS on my machine. The first package I installed is Tool Bar, it creates a empty toolbar in Atom. To populate the empty toolbar, I installed another package Flex Tool Bar. This adds the necessary buttons. The final package I needed was Open In Browser, which does what the name suggests. I to add a button to the Flex Tool Bar, I added the following cson into the config file.

{
  type: "button"
  icon: 'chrome'
  callback: 'open-in-browser:open'
  tooltip: 'Open in Chrome'
  iconset: 'icomoon'
}

Some may think this is stupid, why don't they just create a package that does by default? Well, by splitting up the modular package like this, it makes it a lot easier to build on top of other people's work rather than keep reinventing the wheel.

Final Thoughts

I personally have way more packages installed. Since a lot of it is focused on the work I am working on right now and might not apply to a lot of people, so I have decided to leave them out of this post. But there is a page on Atom's website which lists the popular packages and themes, it is worth checking it out every so often and see if there's anything new that's been added. Finally, I hope this has been useful and leave me any package suggestions in the comments below!