2025年100个产品计划之第7个(树图) - 目录结构生成工具

大家好，我是农村程序员，独立开发者，行业观察员，前端之虎陈随易。

关注公众号：陈随易，获取最新文章推送 (很多内容只在公众号发布)
个人网站 1️⃣：chensuiyi.me
个人网站 2️⃣：me.yicode.tech
技术群，搞钱群，后端群，闲聊群，自驾群，有兴趣入群的联系我。

我会在这里分享关于 编程技术、独立开发、行业资讯，思考感悟 等内容。

所有文章都是古法手打，经过了深度思考和总结，不含 AI 添加剂，请放心食用，一起灵魂交流。

如果本文能给你提供启发或帮助，欢迎动动小手指，一键三连 (点赞、评论、转发)，给我一些支持和鼓励，谢谢。

这两天真是干冒烟啊，在 AI 的加持下，经过无数次沟通，终于把第 7 个产品给完成了。

从对 AI 嗤之以鼻，到日常问答，再到把代码任务完全交给 AI 实现，仿佛是一场惊心动魄的未来之旅。

这神乎其技的 未来科技，难以置信地竟在我们每个人的眼前上演，并在日常提供了巨大的帮助。

我的计划是在2025年，在 AI 的帮助下，写 100 个产品，欢迎大家围观与交流，交流微信 chensuiyime。

那么本次的产品是什么？有什么作用？能解决什么问题？接下来详细分享下。

树图 - 目录结构可视化

📋 功能特性

🎯 右键生成：在资源管理器中右键点击文件夹，即可生成目录树图
📝 文本格式 ：生成美观的文本格式目录树 (.txt 文件)
📋 剪贴板支持：直接将目录树复制到剪贴板，无需生成文件
⚙️ 高度配置：丰富的配置选项，满足不同使用需求
🚀 高性能：智能排除规则，避免大型目录性能问题

🚀 快速开始

安装方式

在 VS Code 扩展商店搜索 dirViz 或 树图
点击安装即可使用

基本使用

右键生成：在文件管理器中右键点击任意文件夹
选择操作 ：在弹出的 "Dir Viz" 子菜单中选择操作
- Generate Directory Tree - 生成目录树文件 (.txt 格式)
- Copy Directory Tree - 复制目录树到剪贴板
自动处理：生成的文件会自动保存到目标目录并打开

输出示例

文本格式示例

scss 复制代码

my-project/
├── src/
│   ├── components/
│   │   ├── Button.vue (2.1 KB)
│   │   └── Modal.vue (1.8 KB)
│   ├── utils/
│   │   └── helpers.js (1.2 KB)
│   └── index.js (0.8 KB)
├── public/
│   └── favicon.ico (4.2 KB)
├── package.json (1.5 KB)
├── README.md (2.3 KB)
└── dist/
    ├── assets/
    └── index.html (0.5 KB)

统计信息：
目录：5 个
文件：8 个
总大小：14.4 KB

⚙️ 配置选项

在 VS Code 设置中搜索 dirViz 可找到所有配置项：

配置项	类型	默认值	说明
`dirViz.excludePatterns`	array	`[]`	排除的目录和文件模式列表
`dirViz.maxDepth`	number	`10`	目录扫描的最大深度
`dirViz.showHidden`	boolean	`false`	是否显示隐藏文件
`dirViz.fileNameTemplate`	string	`{name}_tree_{timestamp}`	输出文件命名模板
`dirViz.showSize`	boolean	`false`	是否显示文件大小
`dirViz.maxNameLength`	number	`50`	文件名显示的最大长度
`dirViz.showStats`	boolean	`false`	是否显示统计信息
`dirViz.showHeader`	boolean	`false`	是否显示标题和生成时间

配置示例

json 复制代码

{
    "dirViz.excludePatterns": ["node_modules", "*.log", ".git", "dist", "build"],
    "dirViz.maxDepth": 5,
    "dirViz.showHidden": false,
    "dirViz.showSize": true,
    "dirViz.showStats": true,
    "dirViz.showHeader": true,
    "dirViz.maxNameLength": 30
}

🛠️ 高级功能

自定义排除规则

支持多种通配符模式：

*.log - 排除所有。log 文件
test_* - 排除以 test_ 开头的文件
node_modules - 排除整个目录
**/*.tmp - 递归排除所有。tmp 文件
.git - 排除版本控制目录

文件命名模板

支持以下变量：

{name} - 目录名称
{timestamp} - 当前时间戳 (格式：YYYYMMDDHHMMSS)

示例：

{name}_tree_{timestamp} → my-project_tree_20250603120000.txt
{name}_结构图 → my-project_结构图.txt
tree_{name} → tree_my-project.txt

性能优化

深度限制 ：通过 maxDepth 配置防止过深的目录结构影响性能
智能排除：预设常见的大型目录 (如 node_modules) 排除规则
文件名限制 ：通过 maxNameLength 避免过长的文件名影响显示效果

最后给大家分享一下我的主打产品，VSCode 编程神器 fnMap (函数地图)，欢迎大家体验。

安装地址：sourl.cn/zmnsPf