DEV Community

loading...
Cover image for Atom Tips šŸŒ¶

Atom Tips šŸŒ¶

nervewax profile image nervewax Originally published at nervewax.com 惻4 min read

This article was originally posted 16th Sep 2018 at nervewax.com/atom-tips

I use Github's text editor Atom pretty much every day, so I thought maybe I should write up some tips for anyone who's just started with it, or even those thinking about switching to it.

Powerful Keys

Command Palette

Cmd+Shift+P This one is possibly the most useful, it brings up the atom Command Palette. It's best described by Atom themselves in the Flight Manual:

This search-driven menu can do just about any major task that is possible in Atom. Instead of clicking around all the application menus to look for something, you can press Cmd+Shift+P and search for the command.

Fuzzy Finder

Cmd+P When you have a crazy big project, this helps you quickly find and open a file. It uses "fuzzy" search, so the results can match any part of the search query. It also skips git ignored files by default, which is cool.

Find & Replace

Cmd+F / Cmd+Shift+F Atom's shortcuts for this familiar function have two flavours. The former will just search within the current tab, but by holding shift too, you're able to search the entire open project.

In addition to this, you can provide a third parameter in the form of a file pattern, so entering *.html will search only HTML files etc. There's also a Regex toggle... but let's not go down that rabbit hole.

Packages

There are currently nearly 8000 atom packages available right now, so it can be hard finding the ones that are actually useful. I'll keep it brief, here's my favourite packages:

Emmet

emmet You might be familiar with this one, since it's available in a few other text editors. Basically, it lets you change code like this:

ul.list>li.list__item*5>a.list__link

into this:

<ul class="list">
  <li class="list__item"><a href="" class="list__link"></a></li>
  <li class="list__item"><a href="" class="list__link"></a></li>
  <li class="list__item"><a href="" class="list__link"></a></li>
  <li class="list__item"><a href="" class="list__link"></a></li>
  <li class="list__item"><a href="" class="list__link"></a></li>
</ul>

Great for quickly preparing markup, it feels so slow when coding without it now! šŸŒ

Tree View Git Status

tree-view-git-status does exactly what it says on the tin, it adds the current git branch and status to your tree view. Even though Atom has recently included this info in the bottom right status area, I feel like the colouring and text provided right there in tree-view is still pretty handy.

Pigments

pigments applies the colour value of a colour as the background for that text in the editor. Sort of like this: rgb(25, 187, 134) - So yep, really handy for visualising what you're doing without switching to browser.

File Icons

file-icons just swaps out the default file icon for a little icon representing the file type. Surprisingly useful

Atom Alignment

atom-alignment is simple, but so useful. It's just a keyboard shortcut that lets you quickly align all your variable definitions. This saves you a bit of effort aligning them yourself, but also you get a little feeling of satisfaction seeing everything line up nicely. šŸ¤“

Atom Shell Commands

This is a neat feature, if you're regularly switching between your editor and terminal, install atom shell commands and you can use atom . to open your cwd in atom. Do atom -h to see all the other available commands šŸ‘Œ

Atom package manager will also let you install packages with apm install [package], which is handy for quickly getting set up on a new machine too.

The Holy Grail šŸ¹

Saving the best til last, Atom v1.18 introduced my new favourite feature, the Git/Github Tab.

This side panel gives you a visual view of the current state of your local git branch. From here, you can easily navigate changes, resolve merge conflicts, pull/push and much more!

I'll not go on about it too much, but this feature improved my workflow a fair bit, so I'd certainly recommend Atom for this alone.

Atom Wizard

So now you're a true Atom wizard! šŸ§™ Let me know what you couldn't code without!

Discussion (3)

pic
Editor guide
Collapse
angelarae63 profile image
Angela Whisnant

AWesome! Thanks for sharing these shortcuts and tips. Question, though...do the keyboard shortcuts you shared work with both Mac and Windows? My keyboard has a key rather than a command key.
Thanks!
Angie

Collapse
nervewax profile image
nervewax Author

Thanks, glad you found it helpful!

Most of the time windows ctrl key is the equivalent to the mac cmd key. So fuzzy finder on windows is ctrl + P for example.

On the Flight Manual at the top, you can click "Windows" and that will display all shortcuts as windows keys too.

Collapse
angelarae63 profile image
Angela Whisnant

Cool. I was hoping that's how it is...I've tried it a few times.:0)