We're live-coding on Twitch! Join us!
Best of Atom: Features, Plugins, Acting Like Sublime Text

Best of Atom: Features, Plugins, Acting Like Sublime Text


Atom is an open source text editor made by GitHub that lets you easily customize every aspect of it. The entire application is written in JavaScript, CSS, and HTML so hacking the core and writing packages is much more straight forward.

  • Cross-platform: Works on OS X, Windows, and Linux.
  • Package manager: There are thousands of plugins created that make Atom amazing. Atom Packages.
  • Autocompletion: An extensive autocomplete system for every language out there.
  • File system browser: The filetree and fuzzy finder make opening projects and files very simple.
  • Multiple panes: Split your workspace into multiple panes to compare and edit code across files.

Why Atom?

A text editor for the home of tomorrow...today! https://youtu.be/Y7aEiVwBAdk

The main goal of Atom is that anyone can hack the core to make it do what they want. Everything is customizable via CSS or JavaScript. If you want a feature that doesn't exist it's very easy to start writing your own package.

Themes in Atom are often high quality and are flexible. When you install one of the 1,246 themes available, anything you don't like can be changed by editing one of the .less files in it's package folder.


Atom doesn't have features in the traditional sense, it creates packages that add to it's hackable core. Any of the 91 (at this time) packages Atom uses can be found on their website. This allows for a lot of creativity because when a package doesn't exist it can easily be created or extended.

Fuzzy Finder

Ctrl + T

Atom indexes your current project and makes it easy to search from the Fuzzy Finder for any file you want. Mind you unless you tell the settings for filetree to ignore folders like node_modules or vendor you can end up with slow searches or sluggish performance due to the number of files typically present in these folders.

atom fuzzy finder

Tree View

Ctrl + \

better.dev Get Started w/ JavaScript for free!

View and open files in your current project. Provides many common actions like cutting and pasting folders, copying the proejct path to a file, or opening a file up in your native file explorer.

atom tree view

Package Installer

When you want a new package or theme installed, open your settings and click Install. Here you can search for packages or themes, and when you find one you want click install. Typically you shouldn't need to restart Atom but in rare cases it's necessary.

atom package installer

Best Settings

First couple things you want to change in the main settings for Atom is:

  • Setting the files you want ignored under Ignored Names this will enhance Atom's performance greatly.
  • Setting the Project Home where projects are assumed to be.

atom settings

  • Check the Hide Ignored Names from your file tree so that .DS_Store and .git don't appear needlessly.

atom settings

Plugins to Make Atom Act Like Sublime Text

The following plugins give Atom some of the most popular features that Sublime Text 3 has.

If you see any missing please comment!


A preview and easily scrollable view of the full source code. A bunch of plugins have been written from Code Glance to Linter that greatly enhance minimap's helpfulness.


atom minimap


Alt + Shift + P

Easy access and management to all your projects. Allows for project specific settings and options.


atom project-manager


When you double click a word, it and every other matching word in the file becomes highlighted.


atom highlight-selected


Highlight text to drag n' drop it somewhere else in your file.


atom simple-drag-drop-text

Best Plugins

The following plugins are what I feel makes Atom's already great feature set, amazing. I use these in my day to day work to increase productivity.


Ctrl + Shift + H

Shortcuts to common git actions without needing to switch to your terminal.


atom git-plus


Provides most of Vim's features to Atom blending the two together. Large portions of Vim have been reproduced but is still being added to.



A very helpful tool for finding, previewing, and resolving merge conflicts within your project.


atom merge-conflicts


When a color is detected and the color picker is activated a very helpful window opens that lets you


atom color-picker



A personal favorite because it saves so much time typing when building out pages. Just give it some hints about the html you want made and it will expand that into true html.


atom emmet


Makes writing documentation faster by detecting the details of the function below it and autofilling much of the comment.


atom dockblockr


Detects and displays colors behind the representative text so you don't have to remember what color a number is.


atom pigments


Probably one of the most helpful packages made, this visualizes and notifies you of errors within your project. Be sure to install all relevant linters so it can detect errors for you using eslint, phplint, or etc.


atom linter


Autocompletes require/import statements for you by following the path you type and showing you the available files at that location.


atom autocomplete-modules


Updates your packages automatically by checking for updates at the interval defined in it's settings.


atom auto-update-packages


Lets you set the template for Atom's title bar letting you show the relevant information about your current project, git, and file.

Here's the template I use:

<%= projectName %> <% if (relativeFilePath) { %>- <%= relativeFilePath %> <% } %> - <%= gitHead %>


atom custom-title


Pretty and good for visual grepping, these filetype icons appear next to files in your filetree, fuzzy finder, and tabs. You have the choice of colored or monochrome icons.


atom file-icons


My personal must-have/favorite is git-plus because the shortcuts it provides have clearly made me more productive.

If you'd like to browse what Atom has to offer checkout Atom Packages for helpful plugins and Atom Themes for any themes or color schemes you want.

If you'd like to try out my personal setup for Atom:

  1. Install the config-import-export package to Atom.
  2. Create an AtomBackups in your home directory.
  3. Download this JSON file to your AtomBackups Directory.
  4. Click Packages -> Config Import Export -> Import and select the freshly downloaded JSON file.

Recommended font replacements for Operator Mono:

What's are your favorite packages for Atom?

Like this article? Follow @michaeljcalkins on Twitter