如何使用Tree CLI生成项目树

Tree CLI 是一个强大的命令行工具，用于查看当前目录结构。它可以帮助开发者快速了解项目的整体架构和文件分布情况。

通过在 package.json 中配置如下脚本，可以轻松地调用 Tree CLI 来生成项目树。

"scripts": {
  "tree": "treee -a -l 4 --ignore 'node_modules, dist, .git' --directoryFirst -f"
},

快速使用方法

执行以下命令即可查看当前项目的目录结构：

pnpm tree

默认情况下，该命令将显示项目根目录下四层深度的文件和目录，并忽略 node_modules, dist 和 .git 目录。

常用命令示例

显示所有内容

列出当前项目的全部文件和目录：

pnpm tree

只展示目录结构

仅显示目录层次，不包含任何文件信息：

npx treee -d --ignore 'node_modules, dist, .git'

控制显示深度

可以使用 -l 参数来指定显示的目录层数。例如，以下是只查看两层和六层深度的例子：

# 显示两层深度
npx treee -l 2 --ignore 'node_modules, dist, .git'

# 显示六层深度
npx treee -l 6 --ignore 'node_modules, dist, .git'

输出到指定文件

将生成的目录树输出至一个文本文件中：

npx treee -l 4 --ignore 'node_modules, dist, .git' -o docs/tree-output.txt

显示隐藏文件

使用 -a 参数可以显示所有隐藏文件（例如以 . 开头的文件）：

npx treee -a --ignore 'node_modules, dist, .git'

指定目录优先级和标记类型

通过添加 --directoryFirst 和 -f 参数，可以使树状结构中目录排列在文件前，并标记不同类型的内容：

npx treee --directoryFirst -f --ignore 'node_modules, dist, .git'

忽略额外目录

忽略更多特定的目录和文件，例如 coverage, .pnpm-store 等：

npx treee --ignore 'node_modules, dist, .git, coverage, .pnpm-store'

参数详解

• -l <n>：设置最大显示深度为 <n>。
• -d：仅列出目录，不包含文件。
• -f：在目录后添加 / 符号，在其他特殊文件类型后面标记相应的符号（如 = 对于套接字，| 对于管道）。
• -a：显示所有隐藏的文件和目录。
• -o <file>：将输出结果保存到 <file> 文件中。
• --ignore '<dirs>'：忽略指定的目录或文件列表（以逗号隔开）。
• --base <path>：设置根目录为 <path>。
• --directoryFirst：确保在列出内容时目录优先于文件显示。
• --noreport：不显示最后的统计信息。
• --fullpath：显示所有文件和目录的完整路径（相对于当前工作目录）。

总结与建议

Tree CLI 为开发者提供了直观地查看项目结构的方法。通过结合不同的选项，可以灵活定制输出格式以满足不同需求。在开发过程中使用此工具能够帮助快速定位问题所在，并且更好地理解项目的整体架构。

希望这篇文章能帮你在日常工作中更有效地利用 Tree CLI 来管理和优化你的代码库！