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

Introduction

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!

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.

Features

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 + \

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!

minimap

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.

https://atom.io/packages/minimap

atom minimap

project-manager

Alt + Shift + P

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

https://atom.io/packages/project-manager

atom project-manager

highlight-selected

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

https://atom.io/packages/highlight-selected

atom highlight-selected

simple-drag-drop-text

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

https://atom.io/packages/simple-drag-drop-text

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.

git-plus

Ctrl + Shift + H

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

https://atom.io/packages/git-plus

atom git-plus

vim-mode

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.

https://atom.io/packages/vim-mode

merge-conflicts

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

https://atom.io/packages/merge-conflicts

atom merge-conflicts

color-picker

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

https://atom.io/packages/color-picker

atom color-picker

emmet

tab

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.

https://atom.io/packages/emmet

atom emmet

docblockr

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

https://atom.io/packages/docblockr

atom dockblockr

pigments

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

https://atom.io/packages/pigments

atom pigments

linter

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.

https://atom.io/packages/linter

atom linter

autocomplete-modules

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

https://atom.io/packages/autocomplete-modules

atom autocomplete-modules

auto-update-packages

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

https://atom.io/packages/auto-update-packages

atom auto-update-packages

custom-title

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 %>

https://atom.io/packages/custom-title

atom custom-title

file-icons

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.

https://atom.io/packages/file-icons

atom file-icons

Conclusion

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?

Michael J. Calkins

Ranger Steve is a fast paced multiplayer shoot-em-up game entirely in your browser!

https://rangersteve.io

I love creating innovative and challenging projects using JavaScript and NodeJS. I code one line at a time like everyone else.

http://www.michaeljcalkins.com