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.

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.

Login or Create Account to Comment
Login Create Account