Using your code editor

A quick overview of how to use the Atom code editor—though many of these techniques apply to Sublime Text and many others.

Watch the video playlist

  1. Video or tutorial

    You can watch the video(s) or follow along with the written tutorial—or both—they convey exactly the same information.

1 Opening projects

The best way to open code in Atom is to drag a whole folder from finder right to the Atom icon in your dock.

The best part about this is that all the files within the folder will then be listed on the right hand side for easy access.

Opening multiple projects

Same idea applies here: drag the folder to the dock icon. This will open a completely new Atom window which is significantly help you keep all the code files organized.

  1. Shortcut

    If you don’t have Atom in your dock, put it there right now—you’ll be needing it a lot.

  2. Shortcut

    Use ⌘` to switch between multiple project windows in Atom.

2 Previewing & opening files

Single clicking on a file within the Atom sidebar will preview that document in the Atom window.

You can tell it’s being previewed because a tab doesn’t get created or the name on the tab doesn’t change.

Double clicking on a files will open that document into a new tab in Atom that you can then edit.

Using only the keyboard

Atom has a super useful keyboard shortcut: ⌘P—it will pop open a little dialog listing all the files in the current project. Start typing to search through the files and hit enter when you’ve highlighted the one you want.

Just start typing to select the file you want.

You don’t even have to type all the letters—it will “fuzzy match” the name and find the one that’s closest to what you want.

  1. Shortcut

    Pressing ⌘P—then you can search through all the files and open one without taking your hands off the keyboard.

3 Making a new file

In Atom, since we installed a package, there’s a shortcut key that will make a new file and save it directly into the folder we have open.

  1. Press ⌘⌥O to trigger a new dialog.
  2. Type the name of the file, including the extension.
  3. Hit Return—the file is saved into the folder you opened.

4 Navigating between tabs

Using a mouse is slow and cumbersome—that’s why keyboard shortcuts are amazing.

To navigate between tabs you can use the ⌘ key and numbers:

Keys Explanation

⌘1

Will go to the first tab.

⌘2

Will go to the second tab.

⌘3

Will go to the third tab.

etc.

Or you can use ⌘⇧[ and ⌘⇧] to go backwards and forwards through the tabs.

5 Navigating code

Navigating code in Atom is the same as any text field in MacOS—all the same shortcuts apply.

It’s a really good idea to get a handle on these shortcuts because they will greatly increase your efficiency.

Keys Explanation

⌘C

Copy the selected text.

⌘X

Cut the selected text.

⌘V

Paste the previously copied item.

⌘Z

Undo the recent change.

⌘⇧Z

Redo the recent undo.

⌘F

Find within this file.

⌘G

Find next matching item.

⌘⇧G

Find previous matching item.

⌘➔

Move to the end of the line.

⌘←

Move to the start of the line.

⌥➔

Move to the next word.

⌥←

Move to the previous word.

⌘↑

Move to the top of the file.

⌘↓

Move to the bottom of the file.

Shift Arrows
  • Highlight text.
  • Can be combined with ⌘ & ⌥

Manipulating multiple lines of code

By pressing the ⌘ key and clicking on multiple lines you can change code on many lines at once.

The great thing is that all the keyboard shortcuts you use for one line will now apply to all of those lines too!

6 Other important keyboard shortcuts

Here are a few other important keyboard shortcuts you should remember to help you get more efficient:

Keys Explanation

⌘⇧P

Open the command palette to search everything the code editor can do.

⌘/

Toggle comments on/off for code, knowing the correct language.

⌘], Tab

Indent a line of code or multiple lines of code.

⌘[, Shift Tab

Outdent a line of code or multiple lines of code.

⌘⌥F

Find and replace within this file.

⌘⇧F

Find and replace within this folder.

⌘R

Filter & find by keyword in this file.

⌃⌘↑

Move a line up.

⌃⌘↓

Move a line down.

⌘J

Join the line below with this line.

⌘⇧D

Duplicate this line.

⌃⇧K

Delete this line.

Test your knowledge

Complete this quick activity to confirm all the knowledge you just learned in the above lesson. Repetition helps you learn.

Be sure to call the teacher over and show them that you’ve completed all the questions to get your mark.

Start the activity

  1. Red sticky note

    This is a good use of your red sticky note.