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

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

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

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

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

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


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

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

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

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

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

树图 - 目录结构可视化

📋 功能特性

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

🚀 快速开始

安装方式

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

基本使用

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

输出示例

文本格式示例
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

相关推荐
zwjapple4 小时前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
tan180°6 小时前
MySQL表的操作(3)
linux·数据库·c++·vscode·后端·mysql
像风一样自由20206 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem7 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊7 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
优创学社27 小时前
基于springboot的社区生鲜团购系统
java·spring boot·后端
why技术7 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
幽络源小助理7 小时前
SpringBoot基于Mysql的商业辅助决策系统设计与实现
java·vue.js·spring boot·后端·mysql·spring
GISer_Jing7 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止7 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器