Quicktips For Using Atom

There's nothing worse than downloading a new app only to realize you don't know how to navigate it.

Here are a few quick tips to help get you started once you've downloaded Github's free, open-sourced code editor, Atom. If you don't already have this amazing tool, you can download it here.

If you're like me then you are obsessed with the way text wraps in your window, here's how to set 'soft wrap' permanently to all of your opened files in Atom on a Mac (sorry other OS users):

  1. Open 'Preferences' from the top menu under 'Atom'
  2. Click on 'Editor' from the side menu
  3. Scroll down until you see the checkbox for 'Soft Wrap'
  4. Check the 'Soft Wrap' checkbox and notice how your code now wraps
How To Softwrap Text in Atom

Another thing I like to do when I'm editing code, specifically super long code that includes thousands of lines, is nest elements within parent elements to 'hide' them from view. This helps me get the whole picture of a project and makes it easier to find bugs or edit certain elements.

  1. Locate the parent element of the element that you want to 'hide'
  2. Hover your mouse over the code line number listed on the left
  3. Click on the that appears at hover to hide the nested elements
  4. Click it again and the nested code will appear again
How to hide/show nested elements in Atom

Lastly, I like to edit my code side by side with a web browser to see changes locally on my computer. I have a 27" iMac that makes this easy to do because of the wide screen but I still like to use this next quicktip to help streamline the screen for easy viewing and editing:

  1. Hover your mouse over the thin, dark line that separates the menu list from the code
  2. Hover over the vertical middle of the page to see the <appear
  3. Click on the icon and watch the menu slide out of view
  4. Repeat the steps again to show the menu again
How to hide/show nested elements in Atom

Did you find a helpful quicktip for using Atom? Let me know what you thought by sharing your thoughts on LinkedIn or Twitter

more from the blog

About Hailey
13 Acronymns Ever Aspiring Designer Should Know
5 Things You Didn't Know About Graphic Designers Before Computers