10 Essential Atom Add-ons

For more on text editors, check out our screencasts on Working with Sublime Text.


Trending posts on SitePoint today:


GitHub’s Atom is rapidly maturing into one of the best code editors available. While it lost to Sublime Text in last year’s SitePoint Smackdown, many issues no longer exist:

  • version 1.0 has been released
  • it’s easy to install on Windows, Mac and Linux
  • speed has significantly improved, and
  • it’s still free but betters many commercial offerings.
--ADVERTISEMENT--

The number of add-ons has increased exponentially, with more than 750 themes and 2,400 packages at the time of writing. The reason: Atom can be extended using web technologies. If you’re working on Node.js or front-end projects, Atom is a great choice.

Package installation is simple. You can either:

  1. open the + Install panel in the Settings tab then search for a package by name, or
  2. install from the command line using apm install <package-name>.

Here are ten essential add-ons, plus a few bonus ones, to make Atom even better …

1. Seti UI and Themes

Themes are subjective, and I’d normally avoid recommending one. However, Seti makes Atom look gorgeous and includes a wide range of icons for file types including SCSS, LESS, JSON, grunt configuration, gulp configuration and more. Combine it with the Monokai theme for a Sublime-busting experience:

Atom Seti UI and Monokai theme

https://atom.io/themes/seti-ui
https://atom.io/themes/monokai-seti

2. Open Recent

Like Sublime, Atom uses simple folder-based project management. The Open Recent package makes it easy to jump to recently used folders or files:

Atom Open Recent

https://atom.io/packages/open-recent

If you require something a little more sophisticated, try Project Manager:
https://atom.io/packages/project-manager

3. TODO-show

You’ve started Atom, opened a folder — what next? TODO-show reveals comments scattered through your project containing keywords such as TODO, FIXME and CHANGED, but you can also add your own regexs:

Atom TODO-show

https://atom.io/packages/todo-show

4. Minimap

Minimap is one of Atom’s most popular packages, displaying a condensed view of your code for quick navigation. The feature enters your subconscious; you won’t think you’re using it, but you’ll miss it when it’s not there:

Atom Minimap

https://atom.io/packages/minimap

5. Highlight Selected

When you select a keyword or variable in Sublime Text or Notepad++, all other instances are shown. Highlight Selected brings the feature to Atom and is even better when combined with minimap-highlight-selected:

Atom Highlight Selected

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

6. Auto-close HTML

This may be simple, but I couldn’t live without auto-closing HTML tags: it doubles your mark-up creation velocity! The package allows you to define which tags should complete inline (such as <p></p> or <li></li>) and which create newline blocks.

https://atom.io/packages/autoclose-html

7. Pigments

You may have seen CSS hex-color previewers before, but few match Pigments. It parses colors, understands pre-processor variables and even executes color-changing functions:

Atom Pigments color preview

https://atom.io/packages/pigments

8. Linter

You can run linters from the command line, but it’s not as quick or effective as live, in-editor code validation. Linter is one of the best; it’s fast and less intrusive than some competitors:

Atom Linter code validation

Note that Linter is the core package, which provides an API to other helper add-ons: dozens of languages are supported. The HTML, CSS and JavaScript versions work instantly, but most depend on installation of specific engines or further configuration:

https://atom.io/packages/linter
https://atom.io/packages/linter-htmlhint
https://atom.io/packages/linter-csslint
https://atom.io/packages/linter-jshint

9. Indentation and Beautification

Coders will never agree whether it’s tabs or spaces in two, four or eight characters. I usually opt for whatever annoys the most people (3-character hard tabs?) — but, with Auto Detect Indentation, you need never worry again. Alternatively, make your code match everyone else’s settings using atom-beautify.

https://atom.io/packages/auto-detect-indentation
https://atom.io/packages/atom-beautify

10. Miscellaneous

A few special mentions to finish. The first is Emmet (previously known as Zen Code) which expands CSS-like expressions into HTML. I keep trying to use Emmet but forget — you may fare better.

https://atom.io/packages/emmet

If you’re creating REST web services, Atom’s REST Client provides a quick testing tool. It’s no match for powerful alternatives such as Postman, but does the job:

Atom REST Client

https://atom.io/packages/rest-client

Bonus After-hours Add-ons

If your key count (https://atom.io/packages/keycount) proves you’ve done enough for the day, relax by reading xkcd comics (https://atom.io/packages/xkcd-comics) or blast your code in Asteroids (https://atom.io/packages/asteroids):

Atom Asteroids

Have you started using Atom? Have I missed your favorite add-on?

Choose the best tool for the job. Watch our screencast on Sublime Text to learn about it’s features, and ways to maximise your productivity with this tool.