前言

在我们写 Markdown 文档时，需要展示项目的目录树，比如《手摸手教你搭建Vue3脚手架》，别人的目录是这样的。

my-vue-app
├── index.html
├── package-lock.json
├── package.json
├── public
│   └── favicon.ico
├── README.md
├── src
│   ├── App.vue
│   ├── assets
│   │   └── logo.png
│   ├── components
│   │   └── HelloWorld.vue
│   ├── env.d.ts
│   └── main.ts
├── tsconfig.json
└── vite.config.ts

而你的目录树是个截图！！！

在使用这个截图的时候，还需要把截图上传到个人图床，显得比较麻烦。相比之下，别人的项目目录树显得更加简单。

那别人是怎么做的呢？

别人怎么做的，我也不知道，哈哈哈~~

个人推荐一个插件 tree-node-cli

使用

安装

依赖 node 环境，无 node 环境的，需要安装环境，此处默认都有 node 环境。

npm install tree-node-cli

# 全局安装（推荐）
npm install -g tree-node-cli

基本使用

tree -I "node_modules"

1640588368(1).jpg

在 Windows 和 Linux 上使用命令 treee 以避免与内置的 tree 命令冲突。

如果你的 tree 命令与本机的 tree 命令有冲突，可以使用 treee 命令。

treee -I "node_modules"

常用命令

tree [options] [path/to/dir]

帮助命令

帮助命令 treee -h

$ treee -h
Usage: tree [options]

Options:
  -V, --version             output the version number
  -a, --all-files           All files, include hidden files, are printed.
  --dirs-first              List directories before files.
  -d, --dirs-only           List directories only.
  -I, --exclude [patterns]  Exclude files that match the pattern. | separates
                            alternate patterns. Wrap your entire pattern in
                            double quotes. E.g. `"node_modules|coverage".
  -L, --max-depth <n>       Max display depth of the directory tree.
  -r, --reverse             Sort the output in reverse alphabetic order.
  -F, --trailing-slash      Append a '/' for directories.
  -h, --help                display help for command

忽略目录或文件

# -I pattern 表示匹配输出时需要忽略的目录或文件，类似于 ignore 的功能
tree -I "node_modules"

# 忽略多个，使用 | 分割
tree -I "node_modules|public|vite.config.ts"

1640591081(1).jpg

指定目录层级

# -L level 表示只会遍历到指定层级
tree -L 1 -I "node_modules"

tree -L 2 -I "node_modules"

显示.xxx文件

执行 tree -I "node_modules" 命令时，我们发现目录树中，.gitignore 文件是没有显示出来的，这是因为 tree-node-cli 默认忽略了 .xxx 类文件。我们可以增加参数：

tree -I "node_modules" -a

1640591395(1).jpg

更多使用方法，参考 tree-node-cli文档。

参考文档

tree-node-cli文档

后记

工欲善其事，必先利其器。

如果这个插件不能满足你的要求，可以使用 node 的 fs 模块写一个属于你自己的插件。

使用 tree-node-cli 命令生成项目目录树

前言

使用

安装