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).

Screenshot of Search Todo Show by Packages

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.

Screenshot of search for alert in FuzzyFinder

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.

Screen shot of ember tabs

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.

Screen shot of the Pigments package

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).

Screenshot of the Color Picker Package

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.

Screen shot of the minimap package

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.

Screenshot of installing Atom Packages

Happy editing!

  • Nice list! If you use a lot of TODO comments you might also like imdone-atom. It displays your TODO comments in a kanaban/trello board format, so you can drag and drop them between lists. Together with imdone.io, imdone-atom can also create, update and close related github issues!

    • Jaime Lightfoot Jaime Lightfoot says:

      Hey Jesse, thanks for the recommendation! I’ll be sure to check that out. : )

  • stíobhart says:

    I made a similar list myself, a while back, when I was first getting into Atom:


    With the benefit of hindsight, In not sure I’d give Autoclose-HTML a place on the list, if I was waiting the article again today. Compared to TextMate’s equivalent plugin, it’s annoyingly “dumb”: ‘The time I waste removing the unwanted tags it puts in and adding the tags I did want putting in that it didn’t , probably cancel out the time I save when it gets it right.

  • TH says:

    oh yeah already using picker and minimap, hands down some of the most useful things.

  • Comments are closed.