Navigation

The main purpose of a terminal is to enable you to move around the file system and open/run things. It's essentially a text-based version of the GUI file explorers we use every day (eg. Finder, Windows Explorer).

To help us navigate around, there are lots of terminal commands we can use. Let's explore some of them.

The pwd command stands for “Print Working Directory”, and it's sorta like the "You are here" arrow on shopping mall directories. It tells you where you are right now:

$Running the 'pwd' command, which shows the current path (/Users/joshu)$

When you open the terminal application, you're generally tossed into the "home" directory, the one that contains the Documents and Desktop directories. On my particular machine, this directory is located at /Users/joshu.

You can see the contents of the current directory using the ls command (short for “List”):

Running the 'ls' command, showing a set of all files and folders in the current working directory

In my particular terminal, directories are bold and written in a light aqua color, while single files are regular weight and written in white.

We can move around the file system with the cd (“Change Directory”) command:

$Running the 'cd' command, to enter one of the directories shown in the previous 'ls'. Afterwards, 'pwd' is run to confirm the new location$

This is equivalent to double-clicking the “stuff” directory in a GUI file explorer.

What if I want to go up one level, back to the home directory? I can use the cd command for this as well, with two dots (..).

$Running 'cd ..', which takes the user back up to the previous directory.$

The dot character (.) has a special meaning in most shell languages:

A single dot (.) refers to the current directory.
Two dots (..) refer to the parent directory.

If you've worked with module systems in JavaScript, you're probably already familiar with this convention. It uses the same notation, using two dots to refer to the parent directory:

import { COLORS } from '../../constants';
import Button from '../Button';

One important thing to know about cd is that it can take complex paths. Terminal beginners will often go one step at a time, like they would in a GUI file explorer:

Using 'cd' to step down through 4 different directories

This works, but it's a lot of extra work. We can make the same jump in a single step like this:

Running the 'cd' command to make the same transition as before, but doing it in 1 single step: 'cd things/some-project/src/components'

Tab auto-completion

One of the most intimidating things about the terminal is that it doesn't give you any clues or hints. With a GUI file explorer, you can see a full list of files and folders, to refresh your memory and help you find what you're looking for.

If you want to use cd as I propose, leaping from 1 spot to another in a single bound, it might seem like you'd need a photographic memory. You can't do it unless you remember the exact name of every directory in the chain, right?

Fortunately, an incredibly-handy trick makes this much easier: tab autocompletion.

It'll be easier for me to show you how this works in a short video:

The Tab key is critically important when it comes to using the terminal effectively. In addition to the navigation tricks shown here, we can also use Tab to auto-complete Git branches, or fill in the rest of a command.

Try pressing Tab in different circumstances, and see what happens!