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.
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.
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.
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.
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.
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.
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 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.
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?).
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.
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.
For further package recommendations, make sure to check out this article.
So let’s get into some really neat tips for using Atom.
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.
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.
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.
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.
It just works.
This keyboard shortcut allows you to highlight the next word or characters.
Et voila. Your word gets highlighted.
Well, this one offers the same feature, but the other way around. Want to un-select a highlighted word or character. Use this one.
I particularly enjoy this one. If you want to bulk edit all matching characters in a file, you’ll love this one.
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.
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.
Release notes aren't just a list of changes—they’re a key touchpoint in the customer journey,…
Product updates aren’t just a box to check—they’re your chance to connect. And a changelog?…
What’s the point of launching a great feature if no one notices? The real magic…
Ever wonder how some companies make product updates feel like the highlight of your day? …
Picture this: You’re in the middle of a hectic workday, balancing strategic decisions with daily…
Ever wish customer feedback came with subtitles? With the right feedback analytics tools, you can…
