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.
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.
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.
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 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.
- 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.
Atom tips & tricks
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.
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.
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
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
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 + /
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.
20+ fantastic web development newsletters worth reading
This article was brought to you by Usersnap – a visual feedback & bug tracking tool, used by software companies like Facebook, Google, and Microsoft. Get your free 15-day trial, too. Recently I’ve present you a collection of the best web development blogs and podcasts available. If you’re like me and more like an inbox…
Fundamentals on setting up your bug reporting workflow
With all these emerging new devices – from mobile devices, to wearables, to VR, to smart devices – having a proper bug reporting workflow in place becomes quite a challenge. Building web applications in particular might seem quite painful due to the different screen sizes of the used devices. It can even be worse than…
23 amazing lessons learned from interviewing the world’s top developers
Three months ago – on Thursday, April 16th – we launched bugtrackers.io as a new platform showing the life of people in web development. I expected it to be super fun. And of course, I expected it to be successful. After all, we showcased the life of famous, successful or extraordinary tech people, like CTOs, developers,…
GitLab vs GitHub: Key differences & similarities
This article is brought to you by Usersnap. Usersnap helps you to communicate visually. And the best part? It connects with GitLab and GitHub. Get a 15-day free trial here. Version Control repository management services are a key component in the software development workflow. In the last few years, GitHub and GitLab positioned themselves as…
How our team manages passwords with 1Password
Due to the increasing number of web services that we use, we are faced with an increasing number of passwords as well. Managing passwords is an important topic especially when adding new people to the team. A while ago, we took a deeper look into how we manage passwords. Here’s what we’ve learned so far…
Is Email the best customer support channel?
A lot has been written on how companies can grow their business through customer success. The terms “customer success” or “customer experience” seem to be the new buzzwords in the growth-driven tech world. These discussions are great, and we at Usersnap believe that customer support and customer success are important factors when it comes to business…
Get website feedback. Keep clients happy. Repeat.
Let clients draw directly in the browser.
Fix bugs in minutes with screenshot & metadata.
Trusted by 1000+ customers worldwide.