Web
Article

10 Essential Atom Add-ons

By Craig Buckler

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?

  • Ralph Mason

    This great, Craig. I love Atom, and it’s the only editor I’ve so far installed on my new machine. Bye bye Sublime—this is better, imho. Installing add-ons is insanely easy—an aspect I really love about Atom.

    For me, Emmett was a must-have. I love it. But I’m looking forward to using some of what you’ve listed above, particularly auto-close and highlight-selected.

    • Craig Buckler

      Thanks Ralph!

  • M S i N Lund

    Black, black, black….

    Is it easy turn off the dark theme?
    Like one click, and everything works perfectly after, with no contrast/comparability issues, or extra tweaking etc?

    I simply H*A*T*E black/dark backgrounds, and this is a 100% hard limit for me
    Nothing worse than trying to read dark grey text on slightly darker grey background.

    Whenever i see a tool presented like this, with black screen-grabs, I usually just ignore the tool.

    So, should I just get my coat?

    • http://huphtur.nl/ huphtur
    • http://linnertmedia.de/ Andreas Linnert

      Theming is even better than in other editors. At least with the default theme – I don’t know if this works with all themes though. The default theme takes the color of the editor (background color behind the code) and uses a slightly different tone for the area around the code (tabs, project files etc.). That way the colors always match, may it be black, gray, neutral/cool/warm white, sepia or whatever.
      At least I don’t like it if the IDE background color is neutral gray and the code background is like yellowish or bluish white. This won’t happen in Atom.

      • M S i N Lund

        Are there any screen-grabs somewhere, of how it looks with white backgrounds on everything?

        I want to make sure code highlighting, etc looks right, with good contrast.

        Im on Netbeans now, and that’s how id like my tool to look.

        • http://linnertmedia.de/ Andreas Linnert

          What your code and highlighting looks like depends on your “Syntax Theme”. And there should be more than enough to choose from. That’s what you’re looking for.

          Then there’s the additional “UI Theme” (colors, shape, look & feel for project files, tabs, status bar etc.). The default one (called “One Light” or “One Dark”) takes the color tone of the “Syntax UI” and adopts it. So it’s even more flexible than I originally thought, since you can mix dark syntax with light UI and vice versa, if you want to.

          Just found this example: http://blog.atom.io/2015/02/18/one-themes.html

          There you can see, what I mean. But it’s even more flexible than what you can see in these screenshots (every syntax theme can have a light and dark UI). Maybe the blog post explains it a little better. Or you try it out to see it for yourself.

          I think every editor and IDE should have this feature.

        • http://huphtur.nl/ huphtur

          Check out atom.io / themes and search for “light”. Tons to pick from!

        • http://huphtur.nl/ huphtur

          Check out /themes on the atom site and search for “light”. Tons to pick from! (sorry, can’t link direct as sitepoint doesn’t allow links in comments)

    • Craig Buckler

      I used to prefer light backgrounds but dark ones have grown on me over the years … perhaps it’s something you prefer as you get older! But it’s not a problem: Atom has more than 700 themes to choose from and you can create your own.

      • M S i N Lund

        OK, thanks.
        But that’s far to much work for me to bother with it.

        I clicked on a couple of those “themes”, and almost all seems to be trendily low-contrast, which i hate.

        Ill stick with netbeans, which does this OK out of the box.

      • Mateus Souza

        I hate light backgrounds when coding. I simply can’t concentrate with a light BG, and looking at something light for too many time kinda hurts my eyes :. I use Seti UI with Monokai Seti as syntax theme (I love Monokai, because I started coding with Sublime Text).

  • http://linnertmedia.de/ Andreas Linnert

    I’ve discovered Atom as my favorite Markdown editor on Windows. Within atom you can manage a set of .md files in folders and subfolders as a project what you can’t do in “real” Markdown editors. So you can use it as a potential authoring software. Plus: it supports syntax highlighting in code blocks. For that purpose I recommend the packages “typewriter” (by braver) and “wordcount” (by nesQuick).

    For coding I actually prefer IDEs over text editors.

    • Craig Buckler

      The split screen markdown previewer is bundled with Atom now.

  • http://huphtur.nl/ huphtur

    The “less-than-slash” package is great for closing open tags.

    • Craig Buckler

      Thanks – I’ll look into that one…

    • http://tassedecafe.org Jérémy Heleine

      Just tested this add-on, great thanks for the discovery! In fact, it’s better than autoclose-html.

    • http://www.alexgoodwinmedia.com/ Alex Goodwin

      Exactly what I’ve been looking for. Autoclose-html wasn’t quite it. Thanks!

  • Justin Bailey

    “I usually opt for whatever annoys the most people (3-character hard tabs?)”
    Oh, you. lol

    Great article by the way!

    • http://Phi.Lho.free.fr/ Philippe Lhoste

      Actually, the size of hard tabs isn’t annoying at all, since I can set them the size I want…
      And it has to be proved that “most people” use soft tabs…
      Side note: 3 space soft tabs is the standard at the place where I work… :-)

  • http://www.seoyoochan.com/ Yoochan Seo

    These addons are awesome to have! I will try them right now. Thank you.

  • Chris Ward

    Loving Atom, I use some of these extensions. My other favourites are Markdown Writer, Word Count and the Writer theme.

  • wickedAnonymous

    Little buggy at times, but I like autohide-tree-view @ https://github.com/olmokramer/atom-autohide-tree-view

  • Chris Ward

    Very timely… http://blog.atom.io/2015/08/06/new-package-roundup.html

    Some REALLY good ones here :)

  • Luan Haddad

    Git-control is a pretty awesome add-on. Provides a GUI interface to manage all commonly-used git commands. https://atom.io/packages/git-control

    • Sedokun

      And it’s may be dangerous. Since potentially dangerous functions doesn’t have confirmation dialog. You could reset the repo in single click.

      • RD

        Command line rules (git bash to the rescue!)

  • Olivia Smith

    But doesn’t it create disk corruption on Linux server??

  • Yair Mondragon

    I was trying the number 5. Highlight Selected
    but it doesn’t work, I mean, I don’t know which CSS file, I tried putting the code in several LESS files and it didn’t work
    Can someone help me?

    • Ralph Mason

      This add-on isn’t really about putting code anywhere or dealing with CSS files. It simply highlights all instances of a word in the file you are working on.

  • Z33STUDIOS

    I love your theme. I would love to have dark version/option to match the new dark option on OS X and the Seti syntax theme.

    • http://www.ferdinandvoger.com Ferdinand

      Yes, I’m currently working on the dark theme. I will adapt to the colors used in your syntax theme.

  • sax

    Thanks for the list. BTW there is a wrong link for linter-jshint.

    • Ralph Mason

      Thanks for pointing that out. :-)

  • Ben Coleman

    Just found this article, great round up! Just installed a few that I liked from the list and they are great. For working on php the ftp client packages (There are many, find one you like) that save to your local machine and upload the new file to there server are a god send!

  • Ralph Mason

    Not sure about Atom, but that sounds a bit like what Brackets does: http://brackets.io/ Still, you can create your own Atom packages: http://www.sitepoint.com/how-to-write-a-syntax-highlighting-package-for-atom/

    • eduardo

      I think after atom brackets is dead.
      main points: git support, don’t brake with big projects

      • OneCar Wood

        Brackets is going into Dreamweaver so we shall see what happens. I happen to like DW an I know most don’t but I’m new and need the help. Slowly but surely I am transitioning over to Atom the more I know. Have found Atom and think it’s awesome way better than Sublime.

        • RD

          Dreamweaver’s pretty much dead when you consider the opposition (Atom, Sublime, hell even Vim if you’re a CUI enthusiast).

  • Ralph Mason

    Yes, a shocking omission! Sorry about that! (Where’s that shocked and ashamed emoji when you need it?)

  • Graham Hannington

    If you edit HTML5 or XHTML5 in Atom, you might be interested in the v.Nu linter package:

    https://atom.io/packages/linter-vnu

  • VLC

    I don’t know how you missed a git addon

  • Mark Aaron

    for productivity, asteroids = the best

  • http://jeffsandroidtop5.blogspot.ca/ Jeff G.

    “activate-power-mode”.

  • OneCar Wood

    Love the Seti theme it does make Atom look freaking amazing! Thanks for the article I am new to Atom and I think I installed everyone almost! They seem to be just what I want so I have some testing to do thanks to you!

  • preetb123

    what is the font used in above atom screenshots and how can i use it as a default atom font.

  • Muhammad Aliff Muazzam

    Great

Recommended

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Instant Website Review

Use Woorank to analyze and optimize your website to improve your website to improve your ranking!

Run a review to see how your site can improve across 70+ metrics!

Get the latest in Front-end, once a week, for free.