DEV Community

Brian P. Hogan
Brian P. Hogan

Posted on • Originally published at smallsharpsoftwaretools.com

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

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

files
├── bin
├── src
│   └── components
└── test
Enter fullscreen mode Exit fullscreen mode

Use the following command to build that structure quickly:

$ mkdir -p files/{bin,src/components,test}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Switch to the project directory:

$ cd files
Enter fullscreen mode Exit fullscreen mode

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

$ git init
Enter fullscreen mode Exit fullscreen mode

Use npm to create a package.json file:

$ npm init -y
Enter fullscreen mode Exit fullscreen mode

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

$ npm install --save webpack
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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`
Enter fullscreen mode Exit fullscreen mode

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'
Enter fullscreen mode Exit fullscreen mode

Now the output is more manageable:

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

4 directories, 2 files
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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.

In this tutorial, you used several tree command options to customize its output, and then combined it with the less command to ensure it'll be readable. Using shell aliases, you saved the long command so it's more usable.

If you enjoyed this tutorial, check out Small Sharp Software Tools, my book on command-line tools.

Discussion (0)