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.