10 Essential Atom Add-ons

By Craig Buckler
We teamed up with SiteGround
To bring you the latest from the web and tried-and-true hosting, recommended for designers and developers. SitePoint Readers Get Up To 65% OFF Now

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


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


If you require something a little more sophisticated, try 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


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


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


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.


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


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:


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.


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.


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


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.

We teamed up with SiteGround
To bring you the latest from the web and tried-and-true hosting, recommended for designers and developers. SitePoint Readers Get Up To 65% OFF Now
  • 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?

    • 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.

        • 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.

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

        • 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).

  • 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.

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

    • Craig Buckler

      Thanks – I’ll look into that one…

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

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

    • Steije Hillewaert

      I’ve missed this so much coming from Sublime Text!

    • John John

      “Tag” have the same functionality but loading much quickly https://atom.io/packages/tag

      • Kevin Pham

        Except for the fact it does not properly work for multiline editing.

  • Justin Bailey

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

    Great article by the way!

    • 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… :-)

  • 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.


    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.

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

      • Gabriel Madeira

        How should i install the icons that are avaiable on your github?

        • avrenna

          On macOS, select the app, Cmd+I to open the Inspector, then drag the .icns file into the icon in the upper-left corner. You’ll need to remove it from the Dock and re-add it to get the icon to update there too.

  • 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).

          • Carl-Johan CJ Fransson

            Dreamweaver has a simple “Manage sites” menu.. This doesn’t seem to exist in Atom? A bit annoying when I’m having 10 FTP servers that needs to be maintained.. I refuse to overwrite the FTP-server file every god damn time I want to make a new connection.. solution?

  • 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:


  • VLC

    I don’t know how you missed a git addon

  • Mark Aaron

    for productivity, asteroids = the best

  • “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


  • Cam

    I switched to Atom less than a week after buying Sublime. I will never look back. I love you @github… forever.

  • Nice, makes Atom stand out any where!

  • Zbynek Novotny

    Thanks a bunch for this amazing write-up. I am just starting out with Atom and this article was a great help in setting up the editor with additional useful features.

  • Wiz Harley

    Im really enjoying this.

  • which add-one is best for php developers .. ?

    • I’m a PHP developer and, personally, there’s not a *single* add-on that’s best, but a culmination of multiple packages.
      Start downloading, chopping and changing what you do and don’t want.
      Currently, I have 30 community add-ons installed, negligible startup impact, and all used often for what I do. Don’t be afraid to experiment!

  • Srikanth Gadicherla

    seti-ui …wow! very pretty!

  • Carl-Johan CJ Fransson

    I miss the most basic functionality.. To have a simple “Manage sites”, that allows you to just add multiple FTP-servers and move easily thru them in a tree-menu at the left side.. Searched for this functionality for ever but I cant seem to find it.. This is ABC for a WebDev.. If it doesn’t exist, then what meaningful work can I possibly use this editor for?

    • Ralph Mason

      There are some FTP add-ons for Atom. Not sure if they do all you want, but worth looking into. Code editing is not the same as FTP and managing sites, so they are normally separate things, but some tools (like Dreamweaver) come with the two bundled together. Many devs don’t use FTP any more, so the trend is likely to veer away from bundled editing and FTP, I suspect.

  • Exillustx

    thank you