Eight Atom Editor Packages for Easier Web Development

I’ve never been one to customize my editor much: With a background in embedded systems, I wrote most of my (C) code in Notepad++. But part of agile development is embracing change. As I learned web development over the past year, I’ve started changing my editor to fit my workflow better.

My coworker Matt discusses what makes a good editor in his post IDE vs. Text Editor. In his words, a good editor is one that “allows for efficient text manipulation, is available in all the environments in which you work, is configurable to your preferences, is under active development, and minimizes mental distractions.”

Atom is a “hackable,” open-source text editor that checks all of these boxes. It draws on the strength of its community to offer an editor that is customizable both in look and functionality, through the use of add-ons called packages. As I’ve grown into web development here at Atomic, I’ve leveraged Atom’s packages to minimize frustrations that come along with web dev and make my workflow better.

Here are eight Atom packages that I use for web development every day:

1.  Vim or Emacs

No text editing conversation would be complete without a mention of Vim and Emacs. If you’re accustomed to using one of these editors, a couple of package installs will give you the same experience within Atom.  For Vim, I use Atom’s “vim-mode” package, as well as an additional plug-in called “ex-mode” that allows for Vim’s Ex mode.  For Emacs, there is the “emacs-plus” package.

2.  TODO

I write a lot of TODO messages to myself, especially when I’m working on personal projects where I don’t have a project management tool or backlog. The ‘todo-show’ package finds all of your TODO (and FIXME, HACK, etc.) comments and lists them in one place. It also supports various search options, ignore paths, and regex to narrow your TODO results.

Once installed, you can open up Todo Show by Packages > Todo-Show > Search… or by CTRL + SHIFT + T (Mac) or ALT + SHIFT +T (Windows).

3.  Fuzzy Finder

Fuzzy Finder comes built-in and has quickly become something I can’t live without.  CMD + T will open the file finder, but there are a number of less well-known shortcuts that are just as useful:

• CMD + T opens the file finder and shows search results for all files in a project.
• CMD + B opens a list of the file names of the currently open tabs.
• CMD + SHIFT + B opens a list of Git-modified and untracked files.

4.  Autoclosing HTML Tags

Need I say more?  The https://atom.io/packages/autoclose-html package can be found here.

5.  Atom Beautify

Missing the formatting capability of Visual Studio, I was happy to find Atom Beautify, which will beautify part or all of your file (if nothing is selected). To use, open Packages > Atom Beautify > Beautify or CTRL + ALT + B.

Atom Beautify has support for HTML, CSS, JavaScript, PHP, Python, Ruby, Java, C, C++, C#, Objective-C, TypeScript, SQL, and others.

6.  Ember Tabs

Working with Ember means having multiple files with very similar or identical names (but different paths)–for example: routes/page.js, controllers/page.js, templates/page.hbs.

Ember Tabs will prepend the containing folder’s name on the tab in Atom so that you don’t see just page.js, page.js, page.hbs, etc.

One downside to this package is that it doesn’t seem to work with components.  If I have ‘…/components/page.js’, I’d expect to see ‘components/page.js’ in a tab, but only see ‘/page.js’.

Along with Ember Tabs, you can also use the file-icons Atom package to display the file type’s icons on open tabs, and in the Tree View. I prefer to use this package in “colourless” mode because it gets visually busy otherwise.

7.  Pigments

My current project has a fairly large palette of colors, and although we use Sass variables to avoid hard-coded values, it can still get confusing.  The Pigments package will highlight hex values, RGBA values, and color variables with their corresponding colors.

This was a big help in a recent design audit that my team had.  We found that we had several similar but not quite matching colors in our app.  Type CMD + SHIFT + P to open the Command Palette, and then search for Pigments: Show Palette to display a list of all colors used in the project, with an option to show (and merge duplicates).

If you don’t have a pre-determined palette for your app, the Color Picker package allows you to visually select a color and generates the color values for it.

8. Minimap

Minimap is a popular Atom package that shows a miniaturized view of the entire file, à la Sublime. You can extend Minimap’s functionality with add-ons that will show Pigments, Git Diffs, and Linter messages in the minimap.

And More…

If you have a language-specific need, chances are that you can find a package on Atom’s Packages page. Checkout Atom’s base Linter along with its list of language-specific linters for your current project.

How to Install Atom Packages

To install an Atom package, open up Atom, then select File > Preferences.  A new pane will open up. On the left-hand side menu, select “Install” and search for the package name. To view already installed packages, select “Packages.” You can disable, update, or uninstall packages from the Packages view.

Happy editing!