1919-02-14

“I didn’t know Atom could do that!”

This article is brought to you by Usersnap, a bug reporting solution with visual annotation features the perfect sidekick for your Github, GitLab, Jira, Azure DevOps etc etc. Get a 15-day free trial here

Atom, the code editor from GitHub, was initially released in May 2014 by the team of GitHub. As an open-source editor Atom became hugely popular over the last two years. And for some, it’s the Sublime killer. And I’m not exaggerating.

Today, I’m going to show you the best tips, tricks, and shortcuts while using Atom. So better go pro with Atom.

What is Atom?

For all the beginners here, let me briefly give you some insights into Atom. Atom 1.0 was released in May 2014, as a fully fledged text editor for modern needs.

In May 2016, the team behind Atom released some pretty impressive statistics. With overall, 15.9 million downloads and 1.1 million monthly users, it can be said that Atom has gained worldwide attention.

OK, there are great alternative code editors out there. Today, however, I’m going to give you some pro tips for Atom. And how to be better and more productive using it.

It’s not about the tools. It’s how you use them.

So before we get started, download Atom at atom.io.

Setting up Atom – The Basics

Before we get into the pro details and tips, let me quickly give you a tour on how to set up the most relevant things (such as fonts, styles, templates, etc.) inside your new Atom code editor.

Font family & size

Atom comes with a nice default font family (Monaco). If you’d like to change it though, you can do so, by going to Atom > Preferences. In the Editor Settings, you can change the font family or the font size. Pretty neat.

atom editor settings

Split screen

You have a big screen and want to have certain files side by side? No problem. Just right-click and choose “Split left” or “Split right”. That’s it.

slit screen atom editor

Scroll Past End

If you activate the “Scroll Past End” option, the editor allows you to scroll past the end of the last line. This sounds irrelevant, however, it’s one of those little details which helps me to get more out of my Atom.

scroll past end atom code editor

Show Indent Guide & Invisibles

Another small, yet helpful setting is showing the indent guide & invisibles. Depending on your preferences, you could show indention indicators and invisibles in your Atom editor.

Atom Themes

Atom comes with a bunch of default themes. The dark theme (the one you probably use or saw other people) is the basic default theme and reminds me a bit of Sublime.

In its current version, Atom comes with 4 basic UI themes which can be changed in Settings > Themes.

If you’d like to install new templates, switch to the Install tab.

install atom editor theme

Et voila, I just installed a new theme, and after activating it, I run Atom with a completely new interface (what do you think about this material design?).

atom new theme

If you also like to change the syntax theme of your editor, you could do so by installing a new syntax theme, which can also be activated in the themes tab.

Atom Packages

With Packages, you can make your Atom editor even more powerful. There are various great packages out there, and I do recommend to check out the following ones.

  • Minimap – Get a preview of your full source code
  • Emmet – Auto-complete package
  • Pigments – a simple package to display colors in projects and files
  • Git-Plus package – make commits without your terminal

For further package recommendations, make sure to check out this article.

source code preview in atom editor

Atom tips & tricks

So let’s get into some really neat tips for using Atom.

Multiple cursors

Do you have multiple <li> elements and want to type something at the same time? Well, with multiple cursor support, Atom is your friend.

Just hold down CMD (on Mac) or CTRL (on Windows) and click in every place you’d like to write something. Just wow.

multiple cursor atom editor

Text manipulation tools

Sometimes, you need to change your text styles. Maybe you want to have it written in Upper Case or Lower Case.

Simply highlight the text, and go to Edit > Text and choose your preferred option.

text manipulation atom editor

Atom Keyboard Shortcuts

Who does not love keyboard shortcuts? They make life so much easier, and allow you to simply be faster.

Most of the time, we forget about the ones we use only rarely and stick to the ones we use daily.

Duplicate a line.

This one’s a true lifesaver. Go to any line in your Atom editor, and use the following shortcut to copy & paste this particular line.

  • On Mac: Cmd + Shift + D
  • On Windows: Ctrl + Shift + D

keyboard shortcut copy-paste atom

It just works.

Select the next characters.

This keyboard shortcut allows you to highlight the next word or characters.

  • On Mac: Cmd + D
  • On Windows: Ctrl + D

Et voila. Your word gets highlighted.

Unselecting the next characters.

Well, this one offers the same feature, but the other way around. Want to un-select a highlighted word or character. Use this one.

  • On Mac: Cmd + U
  • On Windows: Ctrl + U

Highlight all matching characters.

I particularly enjoy this one. If you want to bulk edit all matching characters in a file, you’ll love this one.

  • On Mac: Cmd + Ctrl + G
  • On Windows: Alt + F3

bulp edit atom

Easy commenting.

Last but not least, let me show you how you could easily transform your code into comment lines. With the following shortcut, you can turn your code into a comment, or your comment into a line of code.

  • On Mac: Cmd + /
  • On Windows: Ctrl + /

commenting shortcut atom

Wrapping it up.

Wow. That was a lot, right? Well, I hope you found those tips and tricks useful. And in the best case scenario, you include them in your daily behavior. Because trust me: They are a true productivity booster.

Any package, tip, or trick missing? Let us know in the comment section below.

This article is brought to you by Usersnap, a bug reporting solution with visual annotation features the perfect sidekick for your Github, GitLab, Jira, Azure DevOps etc etc. Get a 15-day free trial here

Capture user feedback easily. Get more insights and make confident product decisions.

Microsurveys by Usersnap

Getting feedback has never been easier and we hope you’ve realized that after reading this article. Let us know what you think, your feedback is important.

And if you’re ready to try out a customer feedback software, Usersnap offers a free trial. Sign up today or book a demo with our feedback specialists.