Atom Tips

691 web-design

I knew there was a reason Atom made this video, it makes a really sweet featured image 😅

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 gitignored 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.

Atom User

Packages

There’s 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 let’s 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 now favourite feature, the Git/Github Tab.

This side pane 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 User

So now you’re a true Atom wizard! 🧙 Let me know what you couldn’t code without!

web-design