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
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.
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.
Top comments (0)