Atom Tips 🌶
Tags: productivity, atom, beginners, tutorial
Published: 2019-05-07 14:37:19

---
title: Atom Tips 🌶
published: true
cover_image: https://thepracticaldev.s3.amazonaws.com/i/vf4tichqlpdwi6par31e.gif
description: A few of my tips for using Github's code editor Atom.
tags: productivity, atom, beginners, tutorial
canonical_url: https://nervewax.com/atom-tips
---
_This article was originally posted 16th Sep 2018 at [nervewax.com/atom-tips](https://nervewax.com/atom-tips/)_

I use Github's text editor <a href="https://atom.io/">Atom</a> 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
<kbd>Cmd+Shift+P</kbd> This one is possibly the most useful, it brings up the atom Command Palette. It's best described by Atom themselves in the <a href="https://flight-manual.atom.io/getting-started/sections/atom-basics/">Flight Manual</a>:

>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
<kbd>Cmd+P</kbd> 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 &amp; Replace</h3>
<kbd>Cmd+F</kbd> / <kbd>Cmd+Shift+F</kbd> 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 <code class="highlighter-rouge">*.html</code> 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
<a href="https://atom.io/packages/emmet">emmet</a> 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:
```html
ul.list>li.list__item*5>a.list__link
```
into this:
```html
<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
<a href="https://atom.io/packages/tree-view-git-status">tree-view-git-status</a> 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
<a href="https://atom.io/packages/pigments">pigments</a> applies the colour value of a colour as the background for that text in the editor. Sort of like this: <span style="background-color:rgb(25, 187, 134); color:white;">rgb(25, 187, 134)</span> - So yep, really handy for visualising what you're doing without switching to browser.

### File Icons
<a href="https://atom.io/packages/file-icons">file-icons</a> just swaps out the default file icon for a little icon representing the file type. Surprisingly useful

### Atom Alignment
<a href="https://atom.io/packages/atom-alignment">atom-alignment</a> is simple, but <em>so</em> 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 <code class="highlighter-rouge">atom .</code> to open your cwd in atom. Do <code class="highlighter-rouge">atom -h</code> to see all the other available commands 👌</p> <p>Atom package manager will also let you install packages with <code class="highlighter-rouge">apm install [package]</code>, which is handy for quickly getting set up on a new machine too.

## The Holy Grail 🍹
Saving the best til last, <a href="http://blog.atom.io/2017/06/13/atom-1-18.html">Atom v1.18</a> 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](https://nervewax.com/content/images/2018/02/rWu0kFq1.jpg)

So now you're a true Atom wizard! 🧙 <a href="http://twitter.com/nervewax">Let me know</a> what <em>you</em> couldn't code without!