dirViz (树图) - Directory Structure Visualization (目录结构可视化)
📋 Features (功能特性)
- 🎯 Right-click Generation: Right-click any folder in the explorer to generate directory tree
- 📝 Text Format: Generate beautiful text format directory trees (
.txt
files)
- 📋 Clipboard Support: Copy directory tree directly to clipboard without creating files
- ⚙️ Highly Configurable: Rich configuration options to meet different usage needs
- 🚀 High Performance: Smart exclusion rules to avoid performance issues with large directories
- 🎯 右键生成:在资源管理器中右键点击文件夹,即可生成目录树图
- 📝 文本格式:生成美观的文本格式目录树 (
.txt
文件)
- 📋 剪贴板支持:直接将目录树复制到剪贴板,无需生成文件
- ⚙️ 高度配置:丰富的配置选项,满足不同使用需求
- 🚀 高性能:智能排除规则,避免大型目录性能问题
🚀 Quick Start (快速开始)
Installation (安装方式)
- Search for
dirViz
or Directory Tree Visualizer
in VS Code Extensions Marketplace
- Click Install to start using
- 在 VS Code 扩展商店搜索
dirViz
或 树图
- 点击安装即可使用
Basic Usage (基本使用)
- Right-click Generation: Right-click any folder in the file explorer
- Select Action: Choose an action from the “Dir Viz” submenu
Generate Directory Tree File
- Generate directory tree file (.txt
format)
Copy Directory Tree
- Copy directory tree to clipboard
- Auto Processing: Generated files are automatically saved to the target directory and opened
- 右键生成:在文件管理器中右键点击任意文件夹
- 选择操作:在弹出的 “Dir Viz” 子菜单中选择操作
Generate Directory Tree
- 生成目录树文件 (.txt
格式)
Copy Directory Tree
- 复制目录树到剪贴板
- 自动处理:生成的文件会自动保存到目标目录并打开
Output Example (输出示例)
Text Format Example (文本格式示例)
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)
Statistics:
Directories: 5
Files: 8
Total Size: 14.4 KB
⚙️ Configuration Options (配置选项)
Search for dirViz
in VS Code settings to find all configuration options:
在 VS Code 设置中搜索 dirViz
可找到所有配置项:
Configuration(配置项) |
Type(类型) |
Default Value(默认值) |
Description(说明) |
dirViz.excludePatterns |
array |
[] |
List of directory and file patterns to exclude 排除的目录和文件模式列表 |
dirViz.maxDepth |
number |
10 |
Maximum depth for directory scanning 目录扫描的最大深度 |
dirViz.showHidden |
boolean |
false |
Whether to show hidden files 是否显示隐藏文件 |
dirViz.fileNameTemplate |
string |
{name}_tree_{timestamp} |
Output file naming template 输出文件命名模板 |
dirViz.showSize |
boolean |
false |
Whether to show file sizes 是否显示文件大小 |
dirViz.maxNameLength |
number |
50 |
Maximum length for file name display 文件名显示的最大长度 |
dirViz.showStats |
boolean |
false |
Whether to show statistics information 是否显示统计信息 |
dirViz.showHeader |
boolean |
false |
Whether to show header and generation time 是否显示标题和生成时间 |
Configuration Example (配置示例)
{
"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
}
🛠️ Advanced Features (高级功能)
Custom Exclusion Rules (自定义排除规则)
Supports various wildcard patterns:
支持多种通配符模式:
*.log
- Exclude all .log files
test_*
- Exclude files starting with test_
node_modules
- Exclude entire directory
**/*.tmp
- Recursively exclude all .tmp files
.git
- Exclude version control directory
*.log
- 排除所有。log 文件
test_*
- 排除以 test_ 开头的文件
node_modules
- 排除整个目录
**/*.tmp
- 递归排除所有。tmp 文件
.git
- 排除版本控制目录
File Naming Template (文件命名模板)
Supports the following variables:
{name}
- Directory name
{timestamp}
- Current timestamp (format: YYYYMMDDHHMMSS)
Examples:
{name}_tree_{timestamp}
→ my-project_tree_20250603120000.txt
{name}_structure
→ my-project_structure.txt
tree_{name}
→ tree_my-project.txt
支持以下变量:
{name}
- 目录名称
{timestamp}
- 当前时间戳 (格式:YYYYMMDDHHMMSS)
示例:
{name}_tree_{timestamp}
→ my-project_tree_20250603120000.txt
{name}_结构图
→ my-project_结构图.txt
tree_{name}
→ tree_my-project.txt
- Depth Limitation: Use
maxDepth
configuration to prevent deep directory structures from affecting performance
- Smart Exclusion: Preset exclusion rules for common large directories (like node_modules)
- File Name Limitation: Use
maxNameLength
to avoid long file names affecting display
- 深度限制:通过
maxDepth
配置防止过深的目录结构影响性能
- 智能排除:预设常见的大型目录 (如 node_modules) 排除规则
- 文件名限制:通过
maxNameLength
避免过长的文件名影响显示效果
🔥 Extension Recommendation (扩展推荐)
outlinePlus - Function Map Extension

A powerful code navigation extension for quickly locating and jumping to function definitions.
Main Features:
- 🗺️ Visual function map
- ⚡ Quick function jumping
- 🔍 Smart code search
- 📊 Code structure analysis
📖 Learn More
fnMap - 函数地图扩展

一个强大的代码导航扩展,快速定位和跳转到函数定义。
主要功能:
- 🗺️ 可视化函数地图
- ⚡ 快速函数跳转
- 🔍 智能代码搜索
- 📊 代码结构分析
📖 了解更多
📱 Author (作者)

Focusing on creating exquisite tools.

加微信 chensuiyime
加入编程技术交流群。
祝你今天、明天、后天,每天都能享受到编码的乐趣!