12 Favorite Atom Tips and Shortcuts to Improve Your Workflow

By Mike Street
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

Atom logo

Atom is the code editor released and maintained by the GitHub team. Released in 2014, the “Sublime Text killer” has over 1.1 million monthly users, and it’s no surprise: easily expandable, customizable and hackable, the IDE has become the favorite of many developers.

Despite its wide use, I often see competent developers taking the long way around to do things, or not knowing about its true potential. This post explores some tricks for improving your Atom workflow. I’m hoping that, by the time you’ve finished, you’ll have learned at least one new trick you can’t live without.

Note: Although this post is for Atom users, a lot of these tips and shortcuts also work in Sublime Text.

Tips

The first stop is some general Atom tips. There are options you can enable, features the IDE has, and menu settings you never knew existed. It’s worth having a look through all the menu options — as you might spot something you never knew was there!

Multiple Cursors

One of the most impressive features of Atom is its multiple cursor support. This enables to you type many things at once, on multiple lines, anywhere in the document. Just hold cmd (Mac) or ctrl (Windows/Linux) and click in every place you want to type. There are also other ways to get multiple cursors — but we’ll cover them later with keyboard shortcuts.

multiple cursors

Auto Indent

One annoyance I have is when I copy code from somewhere and the indentation is all over the place. Luckily, Atom has you covered. Select the code and head to Edit > Lines > Auto Indent. This should copy the current indentation on the file to correct your code.

auto indent

To speed this up, I created a custom keyboard shortcut, enabling me to use Ctrl + Cmd + ] at any point. (On Windows, I would opt for Ctrl + } — which is Ctrl + Shift + ] — as Ctrl + Alt + ] is already taken.)

To do the same yourself, go to Atom > Keymap (Mac) or File > Settings > Keybindings > Keymap (Windows/Linux) and paste the following for Mac:

'atom-text-editor':
    'ctrl-cmd-]': 'editor:auto-indent'

or this for Windows/Linux:

'atom-text-editor':
    'ctrl-}': 'editor:auto-indent'

Show invisibles

To make sure the document and all lines are using the correct indentation, I’ve enabled invisibles in my editor. This shows ··· for space indentation, » for tab and ¬ for new line characters. This helps you see exactly where you have mixed tabs and empty news filled with spaces.

Although it makes your screen feel “busy” to begin with, you soon get used to it, and I now find it invaluable.

To do this, go to Atom (Mac) or File (Windows/Linux) > Preferences > (Scroll Down) Show Invisibles.

preference settings

Soft wrap

I despise having to scroll left and right and up and down, so to make sure there’s only one direction, I’ve enabled soft wrap in Atom. This makes sure nothing goes off the edge of the screen but wraps around. If it has wrapped the line, it indents it to the same level as the previous line and replaces the line number in the gutter with a ·.

To enable this option, it’s a few checkboxes down from the Show invisibles option in Atom (Mac) or File (Windows/Linux) > Preferences > (Scroll Down) Soft Wrap.

Character case convert

Sometimes you have text that’s in the wrong case. You might want all uppercase, or you may need to convert a SHOUTY SENTENCE to all lowercase. Located in the Edit > Text menu are some clever text manipulation tools, including Upper Case and Lower Case functions.

character case conversion options

Packages

Packages are a compelling reason for choosing Atom. The ability to install and change anything and everything is what makes this code editor so great. I’m not about to reel off the best plugins that you must have installed — there are plenty of posts that do that already.

Instead, I’m going to tell you to install every one that you come across, then uninstall the ones you don’t like (or add too many precious seconds to your start-up time). If you go to Settings > Packages and click on an installed extension, it tells you how many milliseconds it adds to boot-up time.

These are a few packages that I rely on daily and that I haven’t seen listed in many other blog posts:

Keyboard Shortcuts

I love keyboard shortcuts. I can’t help but try and learn them all for every program I use. (There are things I do via shortcuts in Photoshop that I wouldn’t have a clue how to do any other way!)

Naturally, you forget the ones you don’t use, whereas the ones you use constantly get engraved in your mind. The ones I’ve listed below I tend to use at least once an hour. They’re lifesavers.

Duplicate line

Cmd + Shift + D (Mac)
Ctrl + Shift + D (Windows/Linux)

If shortcuts got medals, this would be the one to win gold. I use this one constantly. It allows you to place your cursor anywhere on the line and duplicate it.

duplicating a line

It’s hugely helpful for duplicating CSS selectors, gradients or table cells. Of course, you can duplicate multiple lines at once, too — either by highlighting them or by using multiple cursors:

duplicate multiple lines

Move the current line Up or Down

Cmd + Ctrl + Up (or Down) Arrow (Mac)
Ctrl + Up (or Down) Arrow (Windows/Linux)

This keyboard shortcut is great in conjunction with the duplicate line one above. Wherever your cursor is, this shortcut will move the current line above or below the lines around it.

moving lines up and down

If you have selected multiple lines, it will move the whole block (and auto indent) as you move in and out of tags and brackets.

Select the next matching characters

Cmd + D (Mac)
Ctrl + D (Windows/Linux)

This command allows you to select the next matching word or characters to that which is highlighted. You can then (using the auto generated multiple cursors) delete, edit or update the highlighted values.

matching characters

This is particularly helpful if you want to update only a couple of values or properties, without resorting to find and replace.

Unselect the next matching characters

Cmd + U (Mac)
Ctrl + U (Windows/Linux)

If you’re selecting the next matching characters, sometimes you go too far. This shortcut will unselect the most recently selected characters in reverse order.

unselect next matching character

Select all matching characters

Cmd + Ctrl + G (Mac)
Alt + F3 (Windows/Linux)

Sometimes you want to bulk edit all the matching characters in the document, rather than pressing Cmd/Ctrl + D for every one. This shortcut selects everything that matches what you’ve selected. (Warning: a large selection can seriously slow down Atom!)

select all matching characters

Toggle comments (on and off)

Cmd + / (Mac)
Ctrl + / (Windows/Linux)

There may be cases where you want to comment out a line or collections of lines. This shortcut appropriately comments out the current line (or selection of lines) with the correct commenting syntax for whatever language you are in. No longer do you need to remember your <!-- or /* ever again.

toggle comments

Conclusion

Atom is amazing, and I’m finding out new things about it every day. However, these are the shortcuts and plugins I use consistently. Do you have any favorites I haven’t covered? Let us know!

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
  • Article very useful and practical, thank you!

  • Jon James

    This makes me want to give atom a try again…

    Two things that would still bug me:

    1. Highlighting a block of text goes to the end of the window instead of the end of the line of content
    2. The fuzzy search doesn’t learn from previous searches. Sublime is a boss at weighting recent searches to the top.

    • mbokil

      Also I have to keep Sublime open to check large log files. Searching across a 2 gig text file works great on Sublime but try it on Atom and it will freeze up as you wait. I use both and for Angular projects I do most my work on Atom since if you are writing a controller with 2K lines you are probably doing something wrong. The plugins for Atom are excellent. I love the project one so you can switch between projects with Ctrl + Cmd + P.

  • This post is for Mac users, right ? ;)

    • Ralph Mason

      Sorry about that, Zenylium. It’s been updated to cater to Mac, Windows and Linux.

      • Thanks a lot, that is nice !!!!!

  • Ralph Mason

    Good point, Oren. We’ll update the article shortly!

    • Ralph Mason

      OK, updated now.

  • rouzbeh84

    I think almost all shortcuts will work on Windows if you replace CMD with CTRL from what I remember on my Windows machine

  • Erdem

    Very usefully for me. Thanks…

  • Mariusz Kujawski

    What do people use multiple cursors for?

    • mikestreety

      I often use them to update multiple values at the same time, or copy and paste multiple values at the same time

      • Mariusz Kujawski

        Why do you have the same values multiple times in your code?

        • mikestreety

          For example, a JS variable name or CSS class.

          • Mariusz Kujawski

            Isn’t refactoring/renaming quicker and more reliable?

          • mikestreety

            I think this is getting beyond the scope of the article :) I use it daily for various things in HTML, JS and CSS/SCSS to update multiple values.

          • Mariusz Kujawski

            So how do I ask you to let you answer my question? ;)

          • mikestreety

            I’m not quite sure exactly what your question is – Are you asking why you would use multiple cursors?

          • Not always. 1. Pasting into multiple places is possible only via multiple cursor. 2. If you want to replace only _some_ of findings, you can easily select more, less and even tweak using multiple cursor. This is impossible (at least without regex) if you use find-and-replace.

  • Thank you for a nice writeup. Wanted to add, there’s a package which highlights hidden characters (such as Unicode ETX) in red. It’s called: highlight-bad-chars

  • Enrique

    Great article Mike, thanks !

    One question, maybe you can help me, at Sublime Text there is a way to add quick points, i think Ctrl+F2 on Windows to create one line point, and pressing F2, yo go quickly to the selected line numbers.
    This exists on Atom? I cant find it.

    Thank you.

    • mikestreety

      Thanks Enrique.

      I’ve just tried and it works the same in Atom. Under the Edit menu, there is a Bookmark option – under there is the shortcuts for adding, removing and jumping to bookmarks.

      Hope that helps!

      • Enrique

        Yes! I’ve found the Bookmarks, now im coding like a ninja XD
        Thank you again.

  • Cam

    Atom <3

  • Anupam Jain

    Thanks Mike – great tips!

  • Victor Stadnichenko

    How do I Search and Replace multiline text with newline marks?

  • anonymyst

    I use shift + option/alt + right or left arrow to jump select one word at a time, but all of a sudden this functionality disappeared from my atom. Any ideas? I made no changes to my atom themes or UI. Big loss in productivity.

  • I liked this tips! Thanks for sharing! :)

  • Maxipy

    Thanks Mike, Great one