10 essential Atom add-ons
- Ngoc Huynh
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:
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:
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:
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:
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:
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:
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:
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:
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):
Source : http://www.sitepoint.com/