My favorite Atom packages for backend web development


Released by Github in 2015, Atom ( is a powerful, extensible, free, and open-source IDE. It’s a powerful graphical text editor based on Chromium, Google’s open-source browser technology. As well as, Node.js with some bridges to C++ for rendering native UI elements. Every file you view and edit is essentially a locally rendered webpage running in this native cross-platform browser. It also comes with some handy command line tools for interacting with the editor from the terminal.

Out of the box, Atom is quite powerful but it really shines when you leverage the huge collection of packages that can extend and enrich the editor’s functionality. Since there are so many possible Atom configurations, I wanted to share a few of my favorite packages that I use most the time in my day job as a web developer.


  • custom-title: Allows you to customize the title bar of your editor. I prefer displaying my project name, the current file, and the current git branch in my titles. I find this helpful when working on multiple repos simultaneously.
  • expose: Like Mac OS X’s Exposé feature, this package shows a preview of all open tabs and easily lets you switch between them.
  • file-icons: Assigns flashy file icons to the tree-view by type. It helps you visually scan for files of a given type more quickly.
  • git-plus : Allows you to interact with GIT without a terminal, a huge time-saver for add’s, commits, diff’s, etc.
  • git-projects: Quick launcher for all your git based projects, requires setting a path to your repos in the package settings.
  • highlight-selected: Highlights every instance of the current word that’s selected. Great for visualizing variable or method usage in source code, and is especially powerful when used with minimap.
  • minimap: Shows a compressed preview of your current editor’s contents.
    • minimap-highlight-selected: Works in conjunction with the highlight-selected package to show you the currently selected word in the minimap.
    • minimap-git-diff: Visually displays the line’s you’ve changed as you work.
  • qolor: Better syntax highlighting for SQL.


  • genesis-ui: There’s nothing worse than unnecessary distraction when you’re coding. This Atom theme, helps reduces the opacity of the on-screen clutter to only what you need to be focusing on in the moment.

A developer’s suite of tools and their setup is a deeply personal thing, but if you want to dive into the setup I’ve described here, I have created a simple BASH shell script that installs all the atom packages listed above. You can grab it here: After installing Atom and it’s command line tools, download and chmod 770 and run with ./

Happy coding!


Leave a Reply

Please log in using one of these methods to post your comment: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s