Using the tree Command for Software Projects

The tree command is a handy tool for visualizing directory structures. The default options recursively show all the files and directories in the current directory.

In this tutorial you’ll explore some of tree’s options and create an alias for the tree command that you can use to visualize your software projects.

What You Need

To follow this tutorial, you’ll need to install the tree command.

• On macOS, ensure Homebrew is installed on your Mac, which you can do by following the Installing Homebrew tutorial.

To follow along, create a Node.js project with a directory structure like this:

files
├── bin
├── src
│   └── components
└── test

Use the following command to build that structure quickly:

mkdir -p files/{bin,src/components,test}

Use the tree command to verify that the structure you created looks like the structure specified previously:

tree files

files
├── bin
├── src
│   └── components
└── test

4 directories, 0 files

Switch to the project directory:

cd files

Make it a Git repository, which will create a hidden .git directory:

git init

Use npm to create a package.json file:

npm init -y

Then, install Webpack as a dependency, which will create and populate the node_modules directory:

npm install --save webpack

Now you have a project you can use to explore tree in more detail.

Run tree on your project now and you’ll see too many files to fit on the screen due to the number of files in the node_modules directories. But that’s not even showing you the full story, as the tree command doesn’t show hidden files by default.

Use tree -a to see everything. And since there’s so much to see, pipe it to the less command so you can view the results one page at a time:

tree -a | less

Press Space to page through the results or press q to quit and return to the prompt.

There’s a lot of output you probably don’t need to see all the time. The -I flag lets you supply a list of directories to ignore:

The following command runs tree but ignores the .git directory:

tree -a -I '.git'

By using the pipe (|) character, you can ignore multiple directories. To ignore both the .git and node_modules directories, execute this command:

tree -a -I '.git|node_modules'

Now the output is more manageable:

.
├── bin
├── package-lock.json
├── package.json
├── src
│   └── components
└── test

4 directories, 2 files

The --dirsfirst option lists the directories first, then the files. If you have a project with many files in the root, this option might be useful. Run the following command:

tree -a -I '.git|node_modules' --dirsfirst

The output now shows the package.json and package-lock.json at the bottom of the list:

.
├── bin
├── src
│   └── components
├── test
├── package-lock.json
└── package.json

4 directories, 2 files

The command’s gotten pretty long, and it’ll be even longer if you need to pipe the results to the less command. To make it easier to use, use a shell alias.

If you’re using Bash, add an alias to your ~/.bashrc file on Linux or your ~/.bash_profile on macOS. If you’re using ZSH, add the alias to the ~/.zshrc file.

alias devtree="tree -aC -I '.git|node_modules|bower_components' --dirsfirst | less -FRX"

The -C flag for the tree command ensures that tree displays colored output. Some operating systems colorize the output by default through its own alias. The -F flag on less tells less to exit if there’s only one page of results, while the -R and X flags preserve colors and other terminal characters from the tree command.

With the alias in place, you can open a new Terminal session and use the devtree command to execute the command. Navigate to the files directory you specified and run the command to try it out.