10 Essential Atom Add-onsBy Craig Buckler
For more on text editors, check out our screencasts on Working with Sublime Text.
Trending posts on SitePoint today:
- What is HTTP/2?
- Tame Unruly Style Sheets With These Three CSS Methodologies
- Your Regular WordPress Maintenance Checklist
- Shared Server Hosting: the Pros and Cons
- Why Every Website Needs HTTPS
- 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:
- open the + Install panel in the Settings tab then search for a package by name, or
- 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 …
More from this author
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:
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:
If you require something a little more sophisticated, try Project Manager:
You’ve started Atom, opened a folder — what next? TODO-show reveals comments scattered through your project containing keywords such as
CHANGED, but you can also add your own regexs:
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:
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:
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
<li></li>) and which create newline blocks.
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:
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:
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.
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.
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:
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):
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.