Improving Productivity with Atom Editor

As a web developer, I’m always looking for new applications/technologies to improve my efficiency. With a large percentage of my time being spent in a code editor, what better place to look to improve productivity?

In the past, my code editor of choice was Coda 2, but after a recommendation I switched to Sublime Text as my primary editing tool. Sublime Text had a lot of great features, but one feature it lacked was the ability to position the sidebar. I decided to explore some other options to see if there was a better fit for me. Of the editors out there, I considered Brackets, Coda 2, Sublime Text 3, Light Table and Atom. After trying Atom, it quickly became very comfortable to use and better yet, I was able to choose the position of my sidebar!

What really sold me on Atom is the fact that Github built Atom on common web technologies like HTML, CSS, Node and JavaScript so it’s easily customizable without having to learn another language.

One of the easiest ways to customize Atom is with the community built packages. My top 5 packages are listed below:

Emmet isn’t exclusive to Atom, but it was definitely a selling point when making the switch. Emmet is a plugin for many popular text editors which greatly improves HTML and CSS workflow. It makes it possible to quickly write large amounts of code. If I could only install one package, this would definitely be it.

As the name implies, this a package that mimics the way tabs work in Sublime Text. The main benefit of Sublime Tabs is that it allows you to quickly preview a file without having to open it. This greatly assists in preventing tab clutter in your environment.

Minimap is nice for being able to quickly scan large files. I find it especially useful for looking for code within projects using Foundation. I can look at Minimap to find sections in the file where I have uncommented variables, etc.

Autocomplete Plus works in conjunction with Emmet – it provides a dropdown list of options as I type, which increases the speed in which I can write code.

File Icons isn’t as elaborate as some of the other packages, but I find this to be useful when you’re looking at hundreds of files in the tree view. It visually separates the files, making it quicker to locate the file I’m trying to find.

Other ways you can modify Atom to be the editor you want is with a combination of available themes for Atom. My personal choice is the default Atom Light UI theme with the Dimmed Monokai syntax theme.

Themes are another way that Atom allows you to have exactly what you want in an editor, instead of making those choices for you.

The difference between good and great is in the small details that might not be important to someone else. The great thing about Atom is if it’s not exactly what you want out-of-the-box, you can customize it. Between the default features of Atom, the community contributions of Packages/Themes, and it’s overall ease-of-use, Atom quickly became my default editor. It has increased my productivity as a developer, and hope it does the same for you.