Mac tree 输出文件树形式

效果

看到 github 上梳理 vue 项目文件结构时能输出下面的文件树形式，让我感觉很棒。

.
├── Makefile
├── README.md
├── build
│   ├── build-prompt.js
│   ├── build.js
│   ├── check-versions.js
│   ├── dev-client.js
│   ├── dev-server.js
│   ├── publish-prompt.js
│   ├── rollback.js
│   ├── tag.js
│   ├── utils.js
│   ├── vue-loader.conf.js
│   ├── webpack.base.conf.js
│   ├── webpack.build.conf.js
│   ├── webpack.dev.conf.js
│   └── webpack.test.conf.js
├── config
│   ├── common.env.js
│   ├── dev.env.js
│   ├── index.js
│   ├── local.env.js
│   ├── prepub.env.js
│   ├── prod.env.js
│   ├── project.config.js
│   └── test.env.js
├── index.html
├── package-lock.json
├── package.json
└── src
    ├── api
    ├── assets
    ├── components
    ├── dictionary
    ├── directives
    ├── pages
    ├── utils
    └── vuex

配置

直接使用 tree 命令

brew install tree

# 只输出两层并且忽略 node_modules 和 dist 文件夹
tree -L 2 -I 'node_modules|dist'

若 brew 安装不了tree，笔者也曾经卡了好久安装不上，还可以用 find 命令去模拟出 tree 命令的效果

打印所有层级

find . -print | sed -e 's;[^/]*/;|____;g;s;____|; |;g'

当然你也可以选择忽略 node_modules 文件并可以指定输出层级。

find . -path  "*/node_modules" -prune -o -depth 2 -print | sed -e 's;[^/]*/;|____;g;s;____|; |;g'